[Resolved] primary/main menu sqooshes down :-(

[Michael]

hey folks

my top bar/main menu height is set in the customizer, appears fine when viewed, but it gets all effed up when I scroll down.

It was okay before, but my inexperienced self misclicked somewhere, and now its not okay.

screenshot- above (normal), and below (upon scroll)- https://pasteboard.co/oScGvrOWDNDh.png

A little help here?

thanks!

M

[Ying]

Hi Michael,

Do you want the sticky and non-sticky navigation to be the same height?

If so, go to customizer > layout > header, and tick the use navigation as header option.

Then go to customizer > layout > primary navigation > menu item height, you can use this option to control the primary navigation height.

If it doesn’t work, please link us to your site.

[Michael]

Hi there Ying
I somehow accidentally changed the sticky navigation height. I just corrected it.
Thanks a lot for your response
Michael

[Ying]

You are welcome 🙂

Happy to help!

[Michael]

Hi Ying

related problem- I fixed the primary nav issue, but now I realized there’s an issue with my mobile nav icon/logo.

https://pasteboard.co/yyB9pYMm28uy.png

When scrolling, it fades down and shrinks into the text line height. any way to preserve the logo height?

Should I just create a new block element menu and ditch the mobile nav altogether?

Thanks

Michael

[Ying]

Can you link me to your site where I can see this mobile logo?

[Michael]

Hi Ying,

Update- I turned off the mobile header as you suggested and made navigation as header in mobile. I still want sticky navigation for mobile.
As a quick fix, I created a block element hook that’s inside_mobile_menu, and this is what it looks like: https://pasteboard.co/9qCS1Wt9PlRf.png

Not quite there- it would be nice if the logo could to the left of the hamburger icon. Any recommendations? Sorry to burden you with a bunch of novice questions.

Link to site below- Thanks!

Michael

[Fernando]

Hi Michael,

In Site Identity, can you try adding the logo there? I’ll check what occurs.

[Michael]

Hi Fernando

Dude- slam dunk! I changed the logo in site identity, adjusted the menu item height, and it’s perfect. Thank you!

For future reference, it might be cleaner if you guys just removed the mobile header and logo altogether? it seems that there are two places to accomplish the same thing, but with very different and unpredictable results.

Just curious- why is the layout>header>mobile header>branding type/logo still a thing? Is this a legacy thing that’s going to be deprecated at some point?

cheers

Michael

[Fernando]

It’s not a legacy thing. The Mobile Header option is there if you want to disable the default header on mobile.

It basically gives you a Header specific to the Mobile view. And if you want a different logo, or add hooks specific only to mobile view without any extra code, you’ll be able to do so with that enabled.

[Michael]

ahh… I see. so a header element block with a mobile header hook would show up as a mobile header if the option is selected? And navigation as header just uses the hamburger with whatever site identity logo you choose.

Thanks for the help and clarification!

Michael

[Fernando]

So if you want to add items, you can use inside_mobile_header hook for instance with Mobile Header turned on.

And, you can set a specific Logo for mobile as mentioned.

You’re welcome Michael!

[Author]

Posts