Widget in Navigation as Header

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/

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!

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.

Perfect, I've done that there - thanks!

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

I've done that there now too

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

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

Glad to be of help