[Resolved] Widget in Navigation as Header

Home Forums Support Widget in Navigation as Header

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1361846
    Jack

    Hi, I was looking at this page on centering the logo in the nav menu. This looks great, but I was wondering if it is possible to use my header widgets in the header still? Instead of the “Press, Contact and Search” items on the right in the example in that link, I would have a Custom PHP widget – alternatively is there a way to manually put in the HTML/PHP in a menu item and have it run?
    Thanks!
    Jack.

    #1361865
    David
    Staff
    Customer Support

    Hi there,

    theres a few ways to go about it.

    If you’re using the header setup then yes the Header Widget can still be used. It would require some different CSS to make that work and we can help with that.

    If using the Navigation as Header method you can use a Hook element to add your custom PHP element to the inside_navigation hook

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

    #1361893
    Jack

    Hi, thanks for your reply. I just tried using the Navigation as Header method but couldn’t get the widget to appear on the right hand side of the navbar – perhaps I could try the Header Setup, if you could help with the CSS? Thanks!

    #1361911
    David
    Staff
    Customer Support

    Yeah – header widget is disabled when Navigation as Header is selected.
    If you want to remove any CSS you have in relation to the centered logo.
    Then:

    1. Add your code to the Header Widget.
    2. Set you Primary Navigation to Float right.

    Once thats done ill take a look at the CSS.

    #1362260
    Jack

    Perfect, I’ve done that there – thanks!

    #1362264
    David
    Staff
    Customer Support

    Can you remove the CSS you got from this doc and disable any cache plugins you may have.

    #1362372
    Jack

    I’ve done that there now too

    #1362781
    David
    Staff
    Customer Support

    Move your Custom content into a Header Widget.
    Then add this CSS:

    @media(min-width: 769px) {
        .site-header {
            position: relative;
        }
        .inside-header {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
        }
        .site-logo {
            position: absolute;
            top: initial;
            left: 50%;
            transform: translateX(-50%);
        }
        .main-navigation {
            margin-right: auto;
        }
        .site-header .header-widget {
            width: auto;
            top: unset;
        }
    }
    #1363013
    Jack

    Perfect – that worked once I set the background color of inside-header to the same colour as the nav menu also. Thanks!

    #1363120
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.