Clean up Menu look

  • Author
  • #1383419


    My menu is up top right -is there any way to make those links more organized. Either to stretch across the top more or be better right justified and there is too much space between the items -thanks. Id like it to stretch across more into only two rows. I can change the font size to make the rows uniform.

    The blog I need help with is


    Hi, since you have a lot of menu items, my first thought would be to suggest thinking about organizing at least some of them into dropdown submenus in your custom menu to lower the number of top level menu items.

    That said, since your logo is rather narrow, we can decrease the width of that div in the CSS and then increase the width available for the menu by the same amount (deduct 20% from the header and add 20% to the navigation).

    header[role="banner"] .branding {
        width: 20%;
    nav[role="navigation"] {
        width: 80%;

    The following tightens up the spacing between the menu items. The existing had 2% left and right margins. I’ve moved the margin over to only the left, and then set the right at 0 so they align better on the right side which gets you down to three rows at maximum theme width.

    nav[role="navigation"] li {
        margin-left: 1%;
        margin-right: 0;


    Beautiful! Thank you!


    You are welcome.

The topic ‘Clean up Menu look’ is closed to new replies.