[lygiahuan]

Hi,

Please take a look at my blog: http://cuden.net/

At the main menu bar, I’d like to have the elements (home, about, contact, etc) spread out (even out) and fill the awkward blank space at the right side.

If this is not possible, I’d like to have the whole menu to be centered, leaving equal space on the left and right.

Many thanks in advance. I appreciate your help!

[Mahesh]

Hi @lygiahuan,

Sticking with your first option, for spreading out the menu evenly, go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS:

.menu-item {
    text-align: center;
    width: 16.56%;
}
  
#header #mainmenu ul li a {
  float: none;
}
  
.sub-menu .menu-item {
    text-align: left;
    width: auto;
}
  
#header #mainmenu ul li ul.sub-menu a {
  display: block;
}

Note: You have a missing curly brace at the end in your Custom CSS please add it.

Let me know if this helps with your issue.

Regards,
Mahesh

[lygiahuan]

It’s fixed. Thank you. I had to change the width from 16.56% to 16:55% though because it pushed the last menu item down to the second line.

Thanks for your help.

[Mahesh]

@lygiahuan: Glad you made it work out. Thank you for your appreciation. Have a nice day!

Regards,
Mahesh

[Author]

Posts