Mobile menu button not working

Hi there,

I wanted to make the mobile menu display at 1670 instead of wrapping my menu items onto a second line. However, the code I tried (borrowed from a previous question on here) didn’t work. The menu disappears at the right point but the mobile menu symbol doesn’t display until the old break point, and is unclickable.

What have I done wrong?! (BTW, I added some styling as the menu button came up with a grey background and black border - I took the styling out the code but it wasn’t that causing the issue. I have also tried deactivating all the plugins and it’s not solved it.)

@media only screen and (max-width: 1670px){
.nav-bar .module-group {
display: none;
}
.module .mobile-toggle {
display: block !important;/*
background:#ffffff;
border:#ffffff;/
}
/
Mobile menu break point */
}

Website is linaliu.co.uk, but it’s not live yet…

Thanks,
Gemma

Hey Gemma
I see only this text on your site: Lina Liu is coming soon…
Would you mind to disable coming soon template? otherwise, you may also provide temporary access details to your site

best regards

It’s live now, Noda…

Hello Gemma

Sorry, but it looks like JS code is not allowing the mobile hamburger menu to appear before 967px, so, we can hide the normal menu by your code but we cant show the mobile hamburger menu, CSS will not help in this case.
Instead of this what about focusing on the fixing second line issue? we can change font size and padding between menu elements on a smaller screen to keep it on one line

Let me know what you think

Ah that explains why it won’t work then.

Yes please to the menu wrap solution.

Thanks,

Gemma

Hello Gemma

Ok, you can use this CSS code:

@media (max-width: 1120px){
.main-navigation .menu > li {
margin-right: 0px;
}
.menu > li.dropdown {
padding-right: 0px;
}
}

Best regards

Thanks Noda… Unfortunately that doesn’t work… It squishes the menu instead, and when it does wrap it doesn’t wrap prettily!

So I have amended the code you gave me until it works better, like this:

@media only screen and (max-width: 1200px){
.menu > li.dropdown {
padding-right: 10px;
}
.main-navigation .nav-bar {
height:130px !important;
}
}

This works well except that the logo jumps right and up a bit rather than remaining in the same alignment as before. Any bright ideas on why that is?! Not massively important I don’t think. Just couldn’t work out why it was!

HI Gemma

Sorry, but it’s not happening on my side right now, is this fixed already?

Thanks

Hi Noda,

Yes, it wraps correctly at a narrower screen size, on both Chrome and Edge. however, the mobile menu isn’t displaying properly - it’s not giving the white background it should to the items so you can’t see them on a phone or properly on the pc.

Is that because of the height of the nav bar being set? I’m guessing I might need an adjustable height for the nav bar from 967px?

Gemma

Hello Gemma

this code will fix your problem:

.module-group.right {
background: white;
}

let me know if it helped

It helped but it was appearing behind the header image (or the parallax on the front page). I added the below line to make sure it came to the front:

z-index:1000;

And now it’s working!

Thanks for your help.

Gemma

Cool :slight_smile:

Have a nice day Gemmal

I will close this case now, Feel free to contact us again if you have other questions

Thanks!