[Support request] How to recreate advanced header?

[Sascha]

As you can see on this screenshot, I need to place menu items in a way, the GP-Theme currently does not allow, right?

So I have tried to find the relevant menu-items as blocks to insert via GP-Elements > Block Element > Site Header but all the blocks available look very bad on frontend. No way to use GB-Blocks here, correct? How to build this header? Can you please help?

Thank you in advance and kind regards,
Sascha

[David]

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.

[Sascha]

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

[Fernando]

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

[Sascha]

Sure, please find it in below PNF

[David]

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

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

[Sascha]

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

[Ying]

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

[Author]

Posts