[Resolved] Header Widget Positioning

[Brent]

Hi Guys –

I’ve got 2 header widgets stacked, which is how I’d like them. However, I’d like the position to be in the upper right-side header, above the navigation. Right now they are floating to the immediate right of the navigation. Can you help me with the CSS?

Thanks

[Ying]

Hi Brent,

In this case, can you try using Top bar widget instead of Header widget?

Let me know if that works 🙂

[Brent]

When I tried that – it’s putting one of the widgets on the left side. I’d like them to look just like they do now, just above the nav. Any idea why it won’t stack the 2 widgets, both on the right side?

Thanks!

[Ying]

Can you keep them in the topbar widget? So we can help with some custom CSS 🙂

[Brent]

For sure. Thanks!

[Ying]

Try this CSS:

body .top-bar .inside-top-bar {
    flex-direction: column;
    align-items: flex-end;
}

I noticed you have 3 empty widget blocks in the Topbar area, if there’s no specific reason, I think it’s better to get them removed 🙂

[Brent]

Hi Ying –

Thanks! It’s almost there. How do I remove the padding/spacing above the logo on the left? I’d like the logo to be horizontally in line with the icons on the right – or as close as it can be.

[Brent]

If there is not a way to remove the padding/spacing above the logo – if the icons/phone are moved below the navigation – would that solve it?

Thanks

[David]

Hi there,

try adding this extra CSS:

.top-bar {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 5px;
}

You can adjust the top: 5px; value to move it down.
I would suggest increasing the Customizer > Layout > Header > Top Padding to match the top: 5px; value to stop there being any overlap of the widgets and the navigation.

[Brent]

Hi David –

Perfect! Thank you so much for the assistance.

[David]

Glad we could be of help!
One thing i would suggest is to increase the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation. If you currently reduce the width of your browser you will see on narrower screens the menu runs to two lines. Increasing the mobile menu break point will resolve that.

[Susanne]

Hi,

I looked for something like that (header widget above the navigation with the logo on the left side, and navigation and widget on the rihgt side). I tried using the top bar widget instead, this works but the absolute position of the top bar puts the widget at the very right side whereas for the whole website I use a container (1440px) so the top bar should be inside the container.

Do you have a solution for this?

Thank you in advance!

[Elvin]

Hi Susanne,

Can you open a new topic for this? So you can use the private information text field to provide us the site details –
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

If you can link us to the site in question, we can check it for you to see what can be done. 😀

Let us know. 🙂

[Author]

Posts