[Resolved] Mobile Header/Menu

[Ed]

For the life of me I can not figure out how to get my mobile header to display correctly. The bar is there, but the menu just won’t show up. I’ve tried turning the off canvas panel, changed the width, etc. Is there a setting that I’m just missing? Please let me know.

[Tom]

Hi there,

I believe this is happening because you’ve disabled the navigation on the page using Disable Elements.

If you enable the navigation, does it display?

Let me know 🙂

[Ed]

I don’t see any options for navigation (screenshot here) – did I miss something?

[Leo]

Looks like you have this CSS added that’s hiding the toggle:

button.menu-toggle:not(.amp-menu-toggle), #mobile-header button.menu-toggle:not(.amp-menu-toggle) {
    display: none;
}

Let me know if this helps 🙂

[Ed]

So it turns out that I’m kind of an idiot – that was the CSS that was on github for AMP, but I had the CSS in the customizer vs installing it as a plugin.

Now that this is fixed, I can’t seem to get the nav bar to merge properly – half of it is sitting over the page, and half of it is sitting above the page. What can I do to bring that nav bar down?

[Leo]

Not sure if I fully understand. This is what I’m seeing:
https://www.screencast.com/t/2FMdbyVQYggY

What’s the issue here?

[Ed]

I actually don’t want the header on that page at all (not sure how to remove it), but I’m talking one page in (and the rest of the site) – here.

[Leo]

Do you have 30px of top padding added to the page hero?

[Ed]

I could have sworn I turned that back to 0 (I was trying different options yesterday), but now it seems to be working OK. Thanks.

How can I take that header off the entry page on mobile?

[Leo]

Try this CSS:

@media (max-width: 768px) {
    .home #mobile-header {
        display: none !important;
    }
}

[Ed]

That’s perfect – thank you!

[Leo]

No problem 🙂

[Author]

Posts