[Resolved] Menu for mobile pushing page down

[Raul]

Hi
If I click on the hamburger icon to open the menu, this will open but pushing the webpage down.
I would like the menu to open hovering the webpage without pushing it down. Isa that not possible?
I’m using just the customizer of GeneratePress and navigation as header. Nothing else.

Thank you ad best wishes
Raul

[David]

Hi there,

try adding this CSS:

#mobile-header.toggled .main-nav > ul {
    position: fixed;
    width: 100%;
    background-color: #fff;
}

[Raul]

Hi David,
That works, indeed. Thank you very much.
Best Regards,
Raul

[David]

You’re welcome

[Joel]

Sorry to necro an old thread, but this doesn’t seem to work anymore.

Any chance you could add updated code to work with the latest version?

[Ying]

Hi Joel,

Can you open a new topic and link us to your site?

[Joel]

Hi Ying, the site I’m working on is https://dev.lcsnetworks.com/

Thanks,

[Ying]

Try this CSS:

.main-navigation.toggled .main-nav>ul {
    position: absolute;
    width: 100%;
    top: 1.5em;
}

.has-inline-mobile-toggle #site-navigation.toggled {
    margin-top: 0;
}

[Joel]

Hooray, it works! 🎉🎉🎉

Thank you for the quick response Ying.

Also, what an awesome and light weight theme! 🙂

EDIT: Whoops! I spoke to soon.

It works in the mobile version of Firefox, but not in Safari on IOS.

Is there some different CSS being applied on Apple?

It was a PEBKAC error. Forgot to save! Whoops. Everything works great, this is a perfect solution thanks!

[Ying]

You are welcome 🙂

Glad you are happy with our theme!

[Joel]

Spoke to soon! It works in the mobile version of the desktop browser, but not in any browser on my iPhone.

I’m using a private browsing window.

Tested in Firefox Focus on IOS as well.

[Ying]

Did you clear cache after the CSS has been added?

[Joel]

Oh my mistake. It wasn’t the cache – rather, my changes didn’t save for some reason🤦

It works! My PEBKAC error of the day 😂

Thank you again!

[Ying]

Lol you are welcome 🙂

[Author]

Posts