[Support request] Arbitrary content in navigation as header

[Andrew]

Is there a (supported or unsupported) way to put arbitrary content into the header when using “navigation as header”?

Specific example: I am using navigation as header, with sticky header, for desktop and mobile. I would like to add a Facebook like button to the header. This requires inserting either an iframe or div tag where the button will appear. Can you suggest how to do this?

Note that I might want to do this with other content in the future, so I’d prefer a general solution rather than e.g. a Facebook-specific plugin.

[David]

Hi there,

you can use a Hook Element:

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

The inside_navigation hook is the one you require.
By default it will appear before the nav content so it will require some CSS to position, which i can help with once i can see it on the site.

[Andrew]

That’s exactly what I was looking for! You can see it live here.

Couple of follow-up questions:

• Is there a way to force a mobile-style hamburger/dropdown menu on all platforms?
• If so, can I do that and keep the FB button (inside_navigation hook) as its own element in the header bar, outside the dropdown?
• You offered CSS for positioning the FB buttons to left or right of the menu.
• Can you suggest CSS to get the tagline (after_logo hook) to appear consistently to right of logo? It moves around when I scroll.

Thank you!
Andrew

[David]

If you want a ‘mobile’ header across the site, the you can set the Customizer > Layout > Primary Nav –> Mobile Menu breakpoint to a really high value – manually type in 6000.

Then disable the Mobile Header Enabled in Customizer > Layout > Header so your current nav remains in place with your hooked in elements.

To keep the logo to the left on sticky. Edit your Hook thats adding the tag line and increase its Priority to 50

To position the social icons to the far right and align them use this CSS:

#gay_social_menu {
    order: 20;
    position: relative;
    bottom: -13px;
}

[Andrew]

Thank you! The trick re the mobile menu worked perfectly, but the positioning details for tagline and social menu didn’t work for me as provided. But I did get it figured out in the end, and in the process I learned about flex boxes.

For anyone else who is interested:

• I changed the tagline element to the “before_logo” hook. Then I added the following CSS: “.navigation-branding { flex-direction: row-reverse; }”. Now the tagline appears to the right of the logo in both sticked and unsticked versions.
• I reordered the flex items inside “div.inside_nagivation” by applying the following CSS to each item: “order: X !important;”, where X = 1,2,3,4,etc. Now the social menu appears to the left of the search icon.

Still some fine-tuning to do, but those were the key points.

[David]

Glad to hear you found the solution!

[Author]

Posts