Centering the menu

[Becca]

I was wondering if there was a template or snippet of css that I can put on a theme to center the menu instead of having it default to the left. I am not using any plugins and no menu buttons. This image shows what I'd like to do:


 

I'm hoping it's an easy fix, but I have tried (in vain) to find where to change it in my style sheet. I just can't figure it out. Thank you in advance for any help.

[elli]

Sure, try this.

1. Go to Admin > Themes > Advanced Styles & CSS and click on the "Style Sheet" tab
2. Find this line:
   
   #navigation-menu > ul, #navigation-menu > ul li { float: left; }
   
3. You'll need to separate these so that #navigation-menu > ul doesn't have float: left, like this:
   
   #navigation-menu > ul { }
#navigation-menu > ul li { float: left; }
   
4. To #navigation-menu > ul, add the following:
   
   #navigation-menu > ul { display: inline-block; vertical-align: top; }
   
5. Next, find the following line:
   
   #navigation-menu { padding: 0 8px; background: @nav_bar_background; border: @nav_bar_border; .rounded-corners(@nav_bar_border_radius); }
   
6. Add text-align: center; to #navigation-menu:
   
   #navigation-menu { padding: 0 8px; background: @nav_bar_background; border: @nav_bar_border; text-align: center; .rounded-corners(@nav_bar_border_radius); }
   
7. Click "Save Theme" or "Save Changes" to save your changes.
   

Let me know if you have any issues.

[Becca]

Yay, it worked perfectly! Thank you so much, Elli, I appreciate your help.

[Retread]

My favorite part of this solution was this:

Mar 31, 2019 9:09:07 GMT -8 elli said:

You'll need to separate these so that #navigation-menu > ul doesn't have float: left

As someone who's still learning CSS, you taking the time to explain the core issue was much appreciated!