[Resolved] How to create header with following order

[Kevin]

Hello.
I am Trying to create following header and I am having trouble

So layout I want is following

MENU (left Float) LOGO (Center) SECONDARY MENU (RIGHT FLOAT) SEARCH | CART

I am attaching image to show what page looks like.
I already set menu to left float and secondary menu to right float.

Spilit in Site Library is similar what I am looking for except I don’t want to spilit main menu into 2 but I want main on the left and secondary menu on the right.

https://gpsites.co/split/

[Fernando]

Hi Kevin,

How are you adding the site logo? From the attached image, it seems to be added to the top bar. To clarify, are wanting to have the primary menu, site-logo and the secondary menu appear in one row?

Moreover, to have a better understanding of the issue, may you kindly 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

Hope to hear from you soon. 🙂

[Kevin]

Logo is being added using site Identity. Site is not using top bar.

I would like

Mein Menu – Logo – Secondary Menu – Cart

[Fernando]

Let’s first move the Search and Cart Icons to the secondary Navigation through this code:

add_filter( 'generate_woocommerce_menu_item_location', 'tu_move_menu_cart_item' );
function tu_move_menu_cart_item() {
    return 'secondary';
}

add_action( 'wp', function() {
    if ( 'enable' === generate_get_option( 'nav_search' ) ) {
        remove_action( 'generate_menu_bar_items', 'generate_do_navigation_search_button' );
        add_action( 'generate_secondary_menu_bar_items', 'generate_do_navigation_search_button' );

        remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
        add_action( 'generate_inside_secondary_navigation', 'generate_navigation_search' );
    }
}, 20 );

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

Adding it through Code Snippets should work.

Kindly let us know once you’ve added the code, and we’ll figure out what to do next. 🙂

[Kevin]

I have done the code in my child theme but it moved cart but not search.

[Fernando]

How are you adding the Search Icon? Did you add this manually or did you enable it through Appearance > Customize > Layout > Primary Navigation > Navigation Search?

Kindly let us know. 🙂

[Kevin]

enable it through Appearance > Customize > Layout > Primary Navigation > Navigation Search?

[Fernando]

This one: https://share.getcloudapp.com/YEurYDAD

So if you have that set, and you add the code I provided earlier, with the Primary Nav on float left and the Secondary Nav on float right, it would look similar to this: https://share.getcloudapp.com/bLuK2Om6

With the Search and Cart Icon on the right with the Secondary Nav.

Or, are you adding the Search Icon through a different way?

Kindly let us know. 🙂

[Kevin]

Yes…I am adding search icon exactly same as how you are adding it in the pic.

also, Primary Nave is already set to float left and Secondary Nav is already float right.

[Fernando]

At the moment, they seem to be added as menu item along with the mega menu which is unusual. Are you using a third party plugin to add this mega menu?

Perhaps you can temporarily disable this and I’ll see where the Search and Cart icons go?

If the plugin is the one modifying the structure where these icons appear, it would be best to reach out to them regarding this.

Kindly let us know. 🙂

[Kevin]

I have given up that idea because it will be a nightmare to make it work also in Mobile.
I have removed everything and starting over and trying to implement this Exactly.

https://docs.generatepress.com/article/centering-logo-navigation/

However, it’s not working.
Can you please check for me on the website?

[Kevin]

NVM…flex box option was not there when I click the link but I found it when I went to the menu item.
Everything is good.

[Fernando]

I see. Glad everything is good now. Feel free to reach out anytime in case you’ll need further assistance. 🙂

[Author]

Posts