[Resolved] Hamburger menu on tablet, but with the logo from desktop

[Swen]

Hello,

I want the hamburger menu on tablet, which also works with changing the toggle point.

But I want the desktop logo with a smaller size on the tablet.

Thanks

Swen

[Ying]

Hi Swen,

You can adjust the mobile breaking point at customizer > primary navigation > Mobile Menu Breakpoint.

Once you set the breaking point to what you’re happy with, we can have a look at the logo issue.

Let me know 🙂

[Swen]

Hello Ying,

I know that and everything fits so far. I have the mobile menu on the tablet and it should stay that way.

But instead of the mobile logo, I would like the desktop logo on the tablet, but in a smaller size.

[Ying]

Try this CSS:

@media (min-width: 769px) and (max-width: 960px) {
nav#mobile-header {
    display: none !important;
}
#masthead.site-header {
    display: block !important;
    opacity: 1;
}
.site-header .site-logo {
    width: 200px;
}
}

[Swen]

Ying, thank you very much!

[Ying]

You are welcome 🙂

[Swen]

I still have one problem.
When I’m on the start page, the hamburger menu button doesn’t work.
It works on all other pages.

[Ying]

Can you link me to your site again since once the topic has been marked as resolved the info in private info field will be erased?

[Swen]

See below

Thanks

[Ying]

The first container block on home page has a z-index value 10set:
https://www.screencast.com/t/OM2jGG3KnO
https://docs.generateblocks.com/article/container-overview/#inner-z-index

Removing the number should fix the problem 🙂

[Swen]

You are great!

Thanks

[Ying]

You are welcome 🙂

[Author]

Posts