[Resolved] Logo missing from primary navigation

[Gayle]

Hello,

I’m using a GP Element (Block – Site Header) for my site header, with the Primary Navigation set to display above it. I’ve set a logo in Site Identity, but for some reason the logo does not display inline with the navigation bar in either tablet or desktop view, and I can’t figure out why not. It does display correctly on the sticky nav, and also in mobile. Help!

[Leo]

Hi there,

Do you have a logo uploaded under Site identity?
https://docs.generatepress.com/article/adding-header-logo/

Let me know 🙂

[Gayle]

Yep.

[Leo]

Do you have this option activated?
https://docs.generatepress.com/article/navigation-as-a-header/

If not can you try activating it?

[Gayle]

Global logo is definitely loaded under Site Identity; just to be sure I removed it and replaced it with a new version. Same behavior, I’m afraid.

Navigation-as-header is not selected. Oddly enough, when I DO select it, the logo DOES appear, but the logo + nav bar displays below my Block – Site Header element. Unfortunately I need the logo + nav to be above the header.

[Elvin]

Hi Gayle,

After setting the “Navigation-as-header” on, can you try setting the site to flexbox?

Go to Appearance > Customize > General and set the “Structure” dropdown to “Flexbox”.

Let us know how it goes.

[Gayle]

Thanks Elvin – I switched the Structure from Floats to Flexbox (and cleared my cache ☺ ), but there was no change.

However: I just tested the behavior using the Element Type “Header” instead of Element Type “Block – Site Header.” This actually seems to behave as expected, with the logo + nav displaying above the header’s static background image.

Unfortunately the Header Element doesn’t offer the handy building tools available in the Block Element, and I’m not conversant with SVG. But if someone could help me figure out how to code the wave shape w/ the fixed background, I’d be all set.

[Leo]

Sorry so have we figured out the logo issue?

The wave shape requires GenerateBlocks unfortunately.

[Gayle]

Well, since it sounds like I need to use the Block – Site Header Element in order to get the wave shape I need, we’re still at Square One. The logo displays correctly only if the navigation is set to appear after the header. When the nav bar is set to display above the header, the logo still disappears.

[Leo]

Maybe try adding the logo in the block site header element?

If that doesn’t help, do you have an example of the result you’d like to achieve?

[Gayle]

Hi Leo – for result I’m trying to achieve, please see links in the Private Info section below.

[Ying]

Hi Gayle,

For the wave shape header, I suggest you use the GP default navigation and header and create a block element hook tobefore_header. Then there won’t be logo disappearing issue:
https://www.screencast.com/t/ZF7iDL0HRy
1. Add a GB container block.
2. Under the spacing tab, add a min height to the container.
3. Under the background tab, add a background image to it, set Attachment to fix.
5. Under the shape tab, add a shape, set its height and color ( #fffff in your case).

The element setting is as below:
https://www.screencast.com/t/9OxoURVYc8ky

For the navigation, if you use the GP navigation,
1. Go to customizer > layout > header, check the navigation as header box.
2. Go to Customizer > Layout > Primary navigation, set Navigation Width and Inner Navigation Width both to full.

Hope that’s helpful! 🙂

[Gayle]

YES! I was able to recreate my original design in the Block – Hook element, and then used the settings you suggested. At first it didn’t work, but then I realized I needed the after-header hook instead of before-header, and voila!

Many thanks,

Gayle

[Ying]

You are welcome Gayle 🙂

Glad it works!

[Author]

Posts