How to Center Drop-Down Menu Items

Hello,

I’m looking to center both the text and the background of the drop down menu. Currently it’s aligned to the left.

I’m not a professional web designer so I’m having some issues finding the code to change.

I’ve attached a photo of the current dropdown:

Thanks!

Hello there,

To achieve it, try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    #mainnav .sub-menu a {
      text-align: center;
    }

Regards,
Kharis

Hi Kharis,

That line of code is centering the font, but not the actual drop down menu (see attached screenshot).

Is there a line of code to add that centers the entire drop down menu under the original link?

Thanks

Hello there,

Please try adding this CSS code:

#mainnav ul li ul {
-webkit-transform: translateX(85px);
   -moz-transform: translateX(85px);
    -ms-transform: translateX(85px);
     -o-transform: translateX(85px);
        transform: translateX(85px);  
}

Regards,
Kharis

Hi Kharis,

Unfortunately that didn’t work either, it just shifted everything over to the right.

So what I did it tweak your code to say:

    #mainnav ul li ul {
    -webkit-transform: translateX(-85px);
       -moz-transform: translateX(-85px);
        -ms-transform: translateX(-85px);
         -o-transform: translateX(-85px);
            transform: translateX(-85px);  
    }

and it ended up centering everything. Thanks for helping me get to this step!