[Resolved] Customize header like Target and add switcher language

[Tan]

I want to create menu like Target template header and add language switcher of WPML on the right search icon like this: https://share.getcloudapp.com/GGuQePYv
How could I do?

[David]

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/

[Tan]

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!

[David]

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

[Tan]

Link is here, David

[David]

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

[Tan]

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

[David]

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

[Tan]

Thank you, David. It worked like a charm! 🙂

[David]

Glad to hear that!

[Amit]

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?

[David]

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.

[Author]

Posts