[Support request] Arbitrary content in navigation as header

Home Forums Support Arbitrary content in navigation as header

  • This topic has 5 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1376712
    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.

    #1376797
    David
    Staff
    Customer Support

    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.

    #1377970
    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

    #1378141
    David
    Staff
    Customer Support

    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;
    }
    #1379719
    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.

    #1379840
    David
    Staff
    Customer Support

    Glad to hear you found the solution!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.