Navigation Menu Display on Smaller Browser Windows

[insidrsports1]

Hello,

When I make my browser window smaller, my navigation menu gets screwed up and displays like this until it gets sufficiently small for the gray dropdown to display:

Do you know how to make the gray dropdown menu display earlier so there is not this middle size-phase where the nav menu gets convoluted below the logo in the top left corner?

Thanks,
Kevin

[thai]

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 1150px){
    nav.x-nav-wrap.desktop {
        display: none;
    }
    .x-btn-navbar {
        display:block;
        float: right;
    }
    .x-nav-wrap.mobile,
    .x-nav-wrap.mobile.in {
        display: block;
    }
}

Let us know how it goe!

[insidrsports1]

Unfortunately that doesn’t work. That makes my default navbar (at full width), look like this:

I don’t want the navbar to change for the default size window. I just want to make sure it doesn’t get distorted when I make the window size smaller. Any other solutions in mind?

Thanks,
Kevin

[christian]

Hey Kevin,

You need to reduce the number of your menu items. Otherwise, this would need custom CSS which would be getting into custom development which is outside the scope of our support.

Thank you for understanding.