How to recreate advanced header?

Hi there,

i would:

1. Add logo to Customizer > Site Identity

2. Create my menu and with the 3 menu items and set its location to Primary Nav

3. Customizer > Layout > Primary Navgiation

3.1 -> Location --> Float Right.

3.2. Enable the Navigation search

4. Then create a Block Element - Hook to add the Button,

4.1 Set the Hook to menu_bar_items

4.2 set the location to the entire site.

Then it will require a little CSS for the dividers, which i can assist with if i can see the site.

Hello, thank you so much, great advice!

So I have implemented following the steps you've recommended. Now the cart, loupe & reg-button sort order is not perfect, also for dividers, can you help a bit further please?

Kind regards,
Sascha

Hi Sascha,

For reference on what you have right now, can you provide the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Sure, please find it in below PNF

Add this CSS to move the search icon before the cart:

.main-navigation .menu-bar-item.search-item {
    order: -1;
}

Hello,

sorry for late reply. I still have issues with the header, although I have followed your advice precisely.

The button "Logout" (screenshot) was added as block-element (hooked as menu_bar_items, see screenshot).

On desktop it looks okay, but tablet (screenshot) and mobile views (screenshot) look bad, items overlap each other.

Also, the sort-order CSS does not work, as you can see here.

Can you please help me further with this? Access via PNF ...

Thank you in advance and kind regards
Sascha

On the tablet, they are overlapping each other because of the CSS, the CSS set the menu bar items to position: absolute;
https://www.screencast.com/t/Md1MxvOKN

For the search icon order, try this CSS instead:

span.menu-bar-item:has(.icon-search) {
    order: -1;
}