Change mobile menu breakpoint

I’ve noticed that when an image is used for logo, when the window is resized the menu jumps bellow the logo making the headbar height too big. Is there a way to set the navigation to change to mobile on an earlier point?

Hey there,

I hope you are well today and thank you for your question.

Can you provide the URL to your website so we can look into this issue?
Also, try using a smaller image, by responsive design when the window is resized it will force the image to the top.

Best regards,
Support.

my test site is www.getaway24.ru
I have noticed this in other sites which use this theme and an image logo.
On the other side, if you use site name (text) the menu changes to mobile before the header breaks and I would like to have the same behavior with an image logo.
I cant make the logo smaller, I already made it smaller than the suggested size but it is a code problem.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

@media (min-width: 768px){
#page .navbar-default .navbar-toggle {
display: block;
float: right;
}
#page .navbar-collapse {
display: none!important;
}
#page .navbar-collapse.in {
display: block!important;
}
#page .navbar-header {
float: none;
}
}

@media (min-width: 999px){
#page .navbar-default .navbar-toggle {
display: none;
}
#page .navbar-collapse.collapse {
display: block!important;
}
#page .navbar-header {
float: left;
}
}

@media (max-width: 999px){
.navbar-default .navbar-nav > li > a {
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-nav>li,
.nav.navbar-nav {
float: none;
}
}

This works the way it should!
I wonder why it didn’t work like this from the beginning…
Your help and support is amazing Movin!

You are most welcome here :slight_smile:

Hi Movin,

I’m trying to use this to do the same on my website, however, it’s not working.

On my site, I’ve figured that I need it to switch to the mobile menu (with the little hamburger) at about 1200px width (otherwise it starts to drop/lose navigation items), but using this code you provided doesn’t do it (even adjusting the media min/max widths).

Any help?

The test site I’m working on is at:
http://newionsite.com/WordPress/

hey there
Please try this css code and let me know if it worked, with this code mobile menu (hamburger) will appear on 1200px

@media (max-width: 1200px){
.nav-bar .module-group {
display: none;
}
.module.mobile-toggle {
    display: block;
}
}

Noda,

Thanks, but still no. It hides the entire navigation at the right time, but it doesn’t turn on the hamburger menu icon.

So you have this interim space where the navigation is gone, and there’s no hamburger menu to access mobile navigation.

Ok, i know the why :slight_smile:

lets update your code little bit:

@media (max-width: 1200px){
.nav-bar .module-group {
display: none;
}
.module.mobile-toggle {
display: block !important;
}
}

Noda!!! You’re wonderful!

That worked like a charm!

You guys are great, you’ve made a beautiful product and I love this support!

Thank you!

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support