Breakpoint for mobile navmenu (hamburger menu) to kick in?

[COK]

hi, i’d like my mobile navmenu to kick in later than normal as my nav links are currently making it drop down to a second line at some breakpoints. i’m using the renew stack. can you advise?

i’ve tried the following code but it seems to be causing issues (such as the menu not expanding at all when clicked at some breakpoints)

@media only screen and (max-width:1180px){
 .x-nav-wrap.desktop {
   display: none;
 }
 .x-btn-navbar {
   display: block;
   float: right;
 }
}

site: https://tinyurl.com/y8gma8nx

thanks

[ruenel]

Hello There,

Thanks for writing in! Adjusting the trigger to display the mobile menu will not because using your custom css because the JS code that handles the click events will only work when the screen size is smaller than 980 pixels. I would recommend that you adjust the brand logo image in a specific screen sizes to prevent the menu navigation from displaying in another row. Please use this css code instead:

@media(min-width: 980px) and (max-width: 1100px){
    .x-brand img {
        margin-top: 20px;
        max-width: 190px;
    }
}

We would loved to know if this has work for you. Thank you.

[COK]

After adjusting the margin-top and max-width sizes, it works pretty well:

@media(min-width: 980px) and (max-width: 1100px){
    .x-brand img {
        margin-top: 10px;
        max-width: 225px;
    }
}

thank you

[thai]

You’re welcome.