[Resolved] Hamburger nav on all devices with transparent background.

[Michael]

Is it possible to create nav like this site and have it work on all pages?:

http://www.washmarkmanson.com/

[Leo]

Hi there,

This should help:
https://docs.generatepress.com/article/off-canvas-panel-overview/#use-off-canvas-menu-only

Let me know 🙂

[Michael]

Thanks, Leo. I’ll check it out.

[Michael]

I don’t see anywhere that says “off-canvas menu”. The only items listed under Manage Locations are Primary Menu, Secondary Menu and Slideout menu.

[Michael]

Ok. I figured the “off-canvas menu” thing out. Followed the instructions but no hamburger shows up, or any other navigation for that matter.

[Leo]

I just tried the exact same instruction and it worked with no issues:
https://www.screencast.com/t/fDbsiYlq

Can you double check that all steps are completed?

Can you also disable purge and disable Endurance cache for now?

[Michael]

Yep. I did everything. I can go back and try it all again.

I’ve disabled Endurance Purge Cache. There’s no option for disabling Endurance Browser Cache.

[Leo]

Looks like you’ve decided to use Elementor for the header?

Let me know if you change your mind again.

[Michael]

Hi, Leo.

I’ve not heard back from you today, to I’ve reactivated Endurance Purge Cache. I still need help with this issue, however, and two others seemingly related to the nav issue.

HAMBURGER ON ALL DEVICES:
After following the steps you recommended (https://docs.generatepress.com/article/off-canvas-panel-overview/#use-off-canvas-menu-only) no navigation shows up at all on desktop, does on tablet and mobile. The position and size of the logo and hamburger on mobile is an issue though. I can share the URL if you’d like. Just let me know.

SCROLLING DOWN ON DESKTOP, NAV BAR:
When I scroll down on desktop, the logo shows up in a black bar at the top. How do I lose this effect?

WHITE SPACE ABOVE HERO IMAGE:
I’ve got a white space above my hero image, but only on tablet and mobile.

Please let me know if you’d like the URL.

Thanks for you help.

[Leo]

Do you have any menu items added in the off-canvas menu?

If this doesn’t work, any chance you can disable all activated plugins, then send me the dashboard access through Account Issues here?
https://generatepress.com/contact/

Make sure to mention the topic URL.

Please do open new topic(s) for the separate questions.

Thanks!

[Michael]

Yes. I have Home and About added to the off-canvas menu.

I’ll forward info as requested.

[Leo]

Hmm looks like you didn’t follow the steps at all.

First of all, you are using GP Premium 1.7.8 which doesn’t have the off-canvas navigation as that module started in GP Premium 1.8.

Please update first:
https://docs.generatepress.com/article/updating-gp-premium/

Then you need to follow the steps in the article, the first step requires you to create a new menu and assign to Off Canvas Menu (naming it Off Canvas menu won’t work).

Please do follow the steps mindfully, each step have links that you can click on for more details with screenshots.

[Michael]

Thanks, Leo. My apologies. I was looking at my version of GP, not GP Premium. Sorry to have wasted your time.

[Leo]

No problem 🙂

[Michael]

Sorry, Leo, it just doesn’t work for me. I’ve updated the plugin, and gone through the steps in the “use off canvas menu only” tutorial 2 times. Nothing gets the hamburger to show up on desktop.

I thought it might be the custom CSS I added to get rid of the black bar the behind the hamburger on tablet and mobile, but taking that out changed nothing except the black bar was back.

Here’s that CSS:

@media(max-width: 768px) {
#site-navigation {
clear: none;
background: transparent;
z-index: 500;
position: relative;
}

.site-branding {
display: block;
float: left !important;
}

.site-logo {
float: left !important;
clear: none !important;
max-width: 50%;
}

button.menu-toggle {
width: auto;
float: right;
}
}

#site-navigation {
text-shadow: 0px 0px 30px rgba(255, 255, 255, 0.4);
}

Don’t know what else I can tell you. I’m sure there’s something I’ve done wrong or haven’t done that needs to be, but the steps in the link you provided were followed without success.

[Author]

Posts