Dropdown Menu of Country Switcher in Header

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.

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/

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

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

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

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

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

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

its now showing two secondary navigation..

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

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

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?

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

Thanks for the pointers David! Works like magic

Awesome - glad we got there :)

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