navigation and widget not vertically aligned?

What I want to achieve is this, a slim line header, with back widget and nav in line both on desktop and mobile:

https://imgur.com/FspB5pW

Hi there,

the Header Widget sits within the Site Header container as does the primary navigation, hence the elements stack.

Instead of using the header widget, you can do the following:

1. Add New Hook Element
https://docs.generatepress.com/article/hooks-element-overview/

2. Add you button to the content with a CSS Class eg.
<a href="#" class="navigation-button">Label</a>

3. Select the inside_navigation hook
4. set your Display Rules to entire site.

5. Add this CSS:

.inside-navigation {
    display: flex;
    align-items: center;
}
.navigation-button {
    margin-right: auto;
}

Hi David, thank you.

Quite a process to achieve this, is this something you would concider to implement to GP?, I think many would ask for this slim compact header app like design for mobile.

Regards
Carsten

We do get quite a lot of requests for adding custom elements to the navigation. The hang up is the requests vary quite considerably and we have yet to find a solution that covers enough bases to warrant a new feature.... this is where the Hook Element really does shine.

But we are still looking :)

Yes I understand, I can only imagine the amount of requests you are receiving every day. Header and navigation are really difficult to get right, but it must be possible to make some kind of grid for the header and top bar, to avoid something like this, which does not make sense.

https://imgur.com/cxyy5CD
https://imgur.com/e2dE0SP

Leo has answered that this must be a css conflict with the plugins, it might be, but you would expect the design to be more logic and better out of the box.

With these settings, and my poor css skills, I manage with flex to have the back button widget and the navigation almost in line in header.
What I need now is to have the nav menu to float right. This is not the right way of doing this, I know, when I scroll down the back button disappears and the nav is centered again.

https://imgur.com/Vf0tjvW
https://imgur.com/4kWQv2G

But just to demonstrate, that by build in a little more tools and options in the customization of the header would solve a lot of requests I think.

The header widget was never designed to sit in-line with the Navigation. Only in line with the Site Identity. The markup used to build the site header is not conducive for this type of layout and changing it to make it so would break backwards compatibility and potentially break a lot of sites.

Further to this we have to consider the direction that WP is taking and how the block editor will become more entwined with theme editing. So much so we had to pull our latest Elements module from the last update that would make this sort of thing simpler.

The simplest solution today is the steps i provided earlier.

Ok, I will use the top bar for my widgets instead.
If my Top Bar Alignment is set to Left, the two widgets are centered on mobile, please explain why this is happening?
How do I get the widgets aligned left, and even better, the Back Button widget aligned left, and the 'New Messages' widget centered? Thanks

Regards
Carsten

Desktop
https://imgur.com/B8bPkgp
mobile
https://imgur.com/rjh8jXu

settings
https://imgur.com/3bRMiqN
https://imgur.com/iKPdzIv

Hi there,

Should only require a little bit of CSS - your site seems to be password protected, any way you can share the password with us?

Let me know :)

Credentials have been sent by mail

Password: buddydev

I'm only seeing the one widget in the Top Bar area right now.

To stop them from centering, try adding this CSS:

@media (max-width: 768px) {
    .top-bar.top-bar-align-left, 
    .top-bar.top-bar-align-right {
        text-align: left;
    }   
}

Hi Tom, thanks for the code, it aligned all the widgets to the left.

Optimally I want the two widgets, either to align left/center, or left/right.

To see the top bar with two widgets active, please ty to login again as 'jette', password 'alfa'

What if you just add this?:

a.yhanm {
    float: right;
}

Thanks, that's looks much better, what if I instead want the second widget centered?