[Resolved] Off Canvas Menu – Horizontal Dropdown

[John]

I just assigned the previously off-canvas menu

[Ying]

That’s a good start.

So you want the menus to be a hamburger icon on the desktop as well?

If so, go to customizer > layout > primary navigation, and set the mobile breakpoint to 999999px.

[John]

Yes, the Hamburger should be there on all divices. Done and works
There’s the horizontal alignment left and we’re ready 🙂

[Ying]

This CSS is for the desktop:

@media (min-width: 769px) {
.main-navigation.toggled .main-nav>ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
}

How do you want it on mobile?

[John]

Thanks for your speedy response Ying

The css works in the horizontal term but pushes down the items bellow the header.
Would it be possible to avoid that?
On mobile it would be fine to have the menu Verticaly.

[Ying]

Yes, try adding this CSS:

@media (min-width: 769px) {
header#masthead {
    position: fixed;
    width: 100%;
}
.site {
    margin-top: 84px;
}
}

[John]

hi there Ying,

thank you very much for your time and effort.
I did the sticky header with this css
header#masthead{position:-webkit-sticky; position:sticky; top:0;z-index: 999;}

Like mentioned above, if you could check the site out, you’ll mention the dropdown push.
Would it possible to fix this and reduce the distance between the nav items a bit??

[Ying]

You will not need that sticky CSS for the desktop anymore, as I used position: fixed; in my code.

Like mentioned above, if you could check the site out, you’ll mention the dropdown push.

The dropdown push is not fixed by my code? Let me know!

To reduce the distance between menu items, try adding this:

.main-navigation.toggled .main-nav li {
    width: fit-content;
}

[John]

I tried your code but unfortunately the dropdown push is still there as your code has nothing
to do with the dropdown positioning but the sticky header.

[John]

Hi there,

that’s how it worked

@media (min-width: 769px){
        header#masthead{position: fixed; top:0;width:100%;z-index: 999;}
.separate-containers{margin-top:80px;}}

thanks for your assistance, time & effort

[Ying]

Glad to hear that and you are welcome 🙂

[Author]

Posts