[Resolved] Header Menu

[Dan King]

Hello,

Happy Holidays… 🙂

I’ve added a dynamic menu – sign in | sign out

https://learnclub.staging.wpmudev.host/ (login: dan_kings password: 1.2.3)

I’m really struggling with the menu / navigation is their a decent tutorial you’re aware of? For the canvas menu?

Can I replace the 3 BARS (canvas menu) with the word MENU on desktop and mobile?

Can I change the colour and transparency of the canvas menu?

I don’t seem to have the mobile menu feature even though I’ve activated it?

Thanks so much!!!!

Dan

https://drive.google.com/file/d/1fxuBRGF2NHGvg6H2_O81S4qk6YRa1V8h/view?usp=sharing

https://drive.google.com/file/d/1yVGqPtqq3VdTbX7mPuUautQR94TlbAtV/view?usp=sharing

[David]

Hi there,

Happy Holidays 🙂

First off this the Off Canvas Panel – which simply creates a container that sits off screen until the Menu Toggle is clicked:

https://docs.generatepress.com/article/off-canvas-panel-overview/

So if i read correctly, then you don’t need a menu toggle (hamburger) and you just want the sign in / sign out to be displayed. If thats the case then do:

1. Disable the Off Canvas Navigation in Customizer > Layout > Off Canvas.
2. In Customizer > Layout > Primary Navigation set the Mobile Menu Breakpoint to 0 this means the Mobile menu not be displayed, instead you see the same layout as the desktop.

[Dan King]

Hey David,

You were quick lol… i went for a cycle and realised the canvas menu was actually really handy!

Let me have a read of the article 😉

Thanks so much!!!!

Dan

[David]

You’re welcome

[Dan King]

Hey David,

Gosh this navigation thing is super confusing lol…

So I’ve settled on the canvas navigation (more flexible i.e. i can easily add more pages) but I can’t seem to add it to ‘normal’ pages is it only for the ‘landing pages’? If so can I set a page as a landing page? If not how do I mimic the canvas menu on other pages?

I’ve taken a screen shot of my current settings they match the ones out the box… if i remove the primary landing then my landing page is covered in page links… if I can’t use the canvas on other pages do I use the secondary navigation on other pages?

Sorry about all these questions!

Also is there a way to have a menu for logged in users i.e. a menu with things like ‘my account’, ‘my x’ ‘my y’ and z etc… obviously non-logged in users don’t have an account – mind blown 😭 😤 🤬 😷…

Hopefully you can save the day!

and turn 😭 😤 🤬 😷 into 🥳 🤩 😃 😍

Thanks as always!

Dan King

https://drive.google.com/file/d/1EAfYcGiXvEYNHXv7w_TcURPpIjsqFs0_/view?usp=sharing

https://drive.google.com/file/d/1O1DISrPox-gJxK2nNLO1z5d6COOw0Mmp/view?usp=sharing

https://drive.google.com/file/d/1alPsw97C5RYvxWv5g2BTD63gbpbM8z_1/view?usp=sharing

[David]

The Off Canvas Menu will apply to all pages.
However if you do not set a menu to the Primary Navigation then WP will automatically fill it with all your top level pages. To exclude them simply create a Menu that has NO menu items and assign that to the Primary Nav location.

[Dan King]

Hey David,

Happy New Year! Apologies for the delay I’ve been ill with COVID! But all good now :-))

I’ve managed to add the canvas menu to pages 🙂 BUT.. it’s on a white header background i can’t seem to get rid of?

https://learnclub.staging.wpmudev.host/c7/

username: dan_kings
password: 1.2.3

If I disable ‘header’ in page settings the white bar disappears but so too does the menu?

Thanks again,

Dan

[David]

Wow sorry to hear that – glad to hear you’re all well.
An Happy New Year to you too

Can you disable the cachce plugin so i can see whats going on?

[Dan King]

Hey David,

I think my cache plugin is Hummingbird Pro which i’ve disabled… 🙂

https://drive.google.com/file/d/1FKcIM6D8eupzzKHMXTImv2IagkGB29Co/view?usp=sharing

Thanks for this… (menus are doing my head in lol)

Dan

PS – failing that is there a decent navigation plugin i can use that won’t slow the site down and is ‘easy’ to use?

[David]

Try setting the Customizer > Color > Header –> Background color for desktop.
And Color > Primary Navigation –> Background color for the Mobile Header.

[Dan King]

Hey David,

Okay so… I changed the colour and now the menu is visible on the header… but I want the MENU to overlay the image – i.e. no header bar…:

Like this:
https://drive.google.com/file/d/17giBnHMB4vGmoYLYMtGmYE3AbXByZfdT/view?usp=sharing

But this is what it looks like:
https://drive.google.com/file/d/1jC-wvyS-r9FFrbdYwZhwS3YoxvRd6Cgb/view?usp=sharing

If I disable header bar in page settings the menu disappears.

Thanks

Dan

[David]

Is the merged ( transparent header ) going to be required for all pages in the site ?

[Dan King]

Hey David,

Yes I would like it on every page…

Thanks again,

Dan

[David]

You need to create a Header Element:

https://docs.generatepress.com/article/header-element-overview/

DO NOT add anything to the Hero tabs content or change its settings.
Just go to the Site Header tab, and enable Merge with Content. You will then be displayed the options for Site Header and Navigation colors ( check box ) – where you can then set the Transparent colors. This will override the Customizer settings – but the customizer settings will still apply to the Sticky Nav is you’re using that.

[Dan King]

OMG YOU ARE A GENIUS!

booooooooooooooooooooom!!!! wow!

what’s a hook? there was an option for header, hook and layout…

Thank you sooooooooooooooooo much David :-))

Dan

[Author]

Posts