Hi there,

The navigation have no limit on the amount of menu items, but when the navigation is wider (due the amount of menu items) than the space that's left next to the logo and the right side of the wrapper the navigation is being pushed down.

I can provide you some custom css that will make the header wrapper a little bit wider so your logo and navigation is horizontally aligned on a single line, or if you do want to center the logo above the navigation I can provide you this css.

Can you point me to the link of your website? I will take a closer look and provide you the fixes.

Thank you.

Hi there,

You're welcome.

There are multiple options to fix this. Because your website is not active yet I can't see which one will be the best for you so please try the different CSS lines to pick the best option.

1. Reduce the padding between the menu items

@media (min-width: 992px) {
    .main-navigation li a { padding: 45px 6px 43px 6px; }
}

Please increase/decrease the 6px values to your own needs

2. Increase header wrapper width

/* Screens from 992 pixels wide */
@media (min-width: 992px) {
    .header .container { width: 970px; }
}
/* Screens from 1200 pixels wide */
@media (min-width: 1200px) {
    .header .container { width: 1170px; }
}

Please change the 970px and 110px to your own needs

3. Center logo above navigation

@media (min-width: 992px) {
    .header-logo { 
        display: block;
        width: 100%;
        height: auto;
        margin-top: 20px;
        text-align: center;
    }
    .header-logo a {
        display: inline-block;
    }
    .header .header-wrapper .header-navigation {
        float: none;
        margin: 0 auto;
    }
}

Please add the CSS via Appearance -> Customize -> Theme Options -> Custom CSS.

If you have any questions, please let me know.

Hi there,

I have tested the first and second option and the css work correctly. For the second option the width values do need to be increased to see the effect. I do understand that if you have a lot of items in your menu, or long menu item titles, these options doesn't work out.

The last option, to center the logo above the main navigation did not work as it should and I have changed the CSS a little bit. Please see the code below:

@media (min-width: 992px) {
    .header .header-wrapper .header-logo { 
        display: block;
        width: 100%;
        height: auto;
        margin-top: 20px;
        text-align: center;
    }
    .header .header-wrapper .header-logo a {
        display: inline-block;
    }
    .header .header-wrapper .header-navigation {
        float: none;
        margin: 0 auto;
    }
}

Hope this will help.

If you have any questions please let me know