Customize header like Target and add switcher language

Hi there,

the Target site has the following setup.

1. Customizer > Layout > Header - enable Navigation as Header.
2. Customizer > Layout > Primary Navigation - Navigation Width and Inner Navigation Width are both set to Full.
3. This CSS to center the navigation:

.main-navigation:not(.toggled) .main-nav > ul {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

4. Adding the Language Switcher - if the plugin provides a shorcode then you can use a Hook element to add it to that place by selecting the generate_menu_bar_items hook:

https://docs.generatepress.com/article/hooks-element-overview/

1. I use this CSS. But my navigation dropdown disappear :(. Can you fix this?

2. WPML has this shortcode: [wpml_language_selector_widget]
Can you show me how to add shortcode of WPML to Hook element?
I'm not a coder.

Thank in advance!

1. Can you share a link to your site? So i can see the layout.

2. Go to Appearance > Elements and create a new Hook Element.
2.1 Paste your Shortcode to the text area.
2.2 Below that select from Hook dropdown: generate_menu_bar_items
2.3 Below that check the Execute Shortcodes box.
2.4 Go to the Display Rules tab, and in Location select Entire Site
2.5 Save the Hook Element

Link is here, David

Can you check the link as it wouldn't load for me - it just timed out.

It's strange. I access normally. Please try again.

I got in :) So that method of centering the navigation won't work instead add this CSS:

@media(min-width: 769px) {
    #primary-menu {
        margin-left: auto;
        margin-right: auto;
    }
    .menu-bar-items {
        flex: 0 1 187px;
        justify-content: flex-end;
    }
}

Note this line:

flex: 0 1 187px;

The 187px is the width of the current logo - we're setting the menu bar items container to match the same width - so there is equal space either side of the menu.

You just need to add the Language Selector shortcode to the hook as mentioned here:
https://generatepress.com/forums/topic/customize-header-like-target-and-add-switcher-language/#post-1765401

Thank you, David. It worked like a charm! :)

Glad to hear that!

Hi David
i added the code you referenced above (replacing it with a shortcode for a search bar) by creating a hook element. It worked nicely. Many thanks for that.

How do I center the Search Bar to be positioned in between the logo (on the left) and the Shopping Cart icon (on the right).
So here is what I want:
Logo - Search Bar - Shopping Cart Icon - Hamburger Menu

Any ideas?

Hi Amit,

i replied to your other topic - if you want to return to that topic and share a link and your requirements i will take a look.