Widget in Navigation as Header

[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.

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jack]

Perfect, I’ve done that there – thanks!

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jack]

I’ve done that there now too

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jack]

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

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts