[Support request] Dropdown Menu of Country Switcher in Header

[Ree]

it should show up here https://share.getcloudapp.com/7KuoDqNn

I’ve added a hook, but how do I add the dropdown menu that i’ve created?
I tried to use generateblocks but there’s no menu in the elements.

[David]

Ok it doesn’t look like you’re using the Secondary Navigation.
If so, then try this

1. Create a new Menu just for your Country Switcher and set its location to the Secondary Navigation.
2. Create a Hook Element for the generate_menu_bar_items hook
2.1 Add this code to the Hook text area:

<?php 
	if ( function_exists( 'generate_secondary_navigation_position' ) ) {
		generate_secondary_navigation_position();
	}
?>

2.1 Check Execute PHP.

3. Add the snippet and CSS provided here so the Secondary doesn’t switch to a hamburger on mobile:

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

[Ree]

I couldn’t find the secondary navigation option to tick https://prnt.sc/1gjk53u

[David]

Aah sorry – you need to enable the Secondary Navigation module in Appearance > GeneratePress

[Ree]

https://prnt.sc/1gnqb4o
It showed up but alongside with a new hamburger menu…
It should show beside the “user” icon. I am using the hook location generate_menu_bar_items

I’ve added both the functions and css:

add_action( 'wp_enqueue_scripts', 'generate_dequeue_secondary_nav_mobile', 999 );
function generate_dequeue_secondary_nav_mobile() {
    wp_dequeue_style( 'generate-secondary-nav-mobile' );
}

.secondary-navigation .menu-toggle {
      display: none;
}

@media(max-width: 768px) {
    .secondary-navigation {
        text-align: center !important;
    }
    .secondary-navigation ul {
        display: block;
    }
    .secondary-navigation .sf-menu>li {
        float: none;
        display: inline-block !important;
    }
}

[David]

Do you still have the hook enabled ? As i don’t see the request for the Secondary nav inside the menu_bar_items

[Ree]

Sorry was just doing some testing. I’ve enabled it back again.

[David]

Now add this CSS:

@media(max-width: 1024px) {
    #mobile-header .menu-toggle.secondary-menu-toggle {
        display: none;
    }

    #mobile-header .secondary-navigation ul {
        display: block !important;
    }

    .secondary-navigation {
        order: -1;
    }
}

And you can set the colors for the Menu item in Customizer > Colors > Secondary Navigation

[Ree]

its now showing two secondary navigation..

[David]

And the last thing ( fingers crossed ) – is to:

Customizer > Layout > Secondary Navigation – and set its Location to No Navigation.

[Ree]

Thank you! it works, phew!

I am testing on mobile, one tap on the arrow – the dropdown menu show up. However on second tap on the arrow the menu didn’t close. Any fix for this?

[David]

Try changing the Customizer > Layout > Primary Navigation –. Navigation Dropdown to one of the Click options ( The secondary nav will use that setting )

[Ree]

Thanks for the pointers David! Works like magic

[David]

Awesome – glad we got there 🙂

[Ree]

a question about styling ：

1. how to make sure same distance between icons
2. Globe dropdown background is white but I want it to blend into menu background. Tried to change in customizer > colors but it’s not working.
3. How to switch globe position with user icon?

https://prnt.sc/1h3dmxg

[Author]

Posts