Dropdown Menu of Country Switcher in Header

Try this CSS:

nav#secondary-navigation {
    order: -1;
}
ul#menu-country-switch-1 li {
    padding-right: 10px;
}

to change the background color of the earth icon, go for Customizing > Colors > Secondary Navigation > Background.

Let me know :)

thanks the css works. but this setting didn't:
Customizing > Colors > Secondary Navigation > Background.

https://prnt.sc/1h3dmxg
https://prnt.sc/1hfjspd

Hi Ree,

Can you try adding this?

nav#secondary-navigation li.menu-item.menu-item-has-children { 
background-color: #f7f8f9;
}

not working by targeting the style in <li>. I inspected the elements the background is in the <a>.
How to set in <a> ?

https://prnt.sc/1hk7wag

This line:

nav#secondary-navigation li.menu-item.menu-item-has-children {

becomes:

nav#secondary-navigation li.menu-item.menu-item-has-children a {

I used the above css it is working on desktop, but on mobile it is still not blending in the background.

You can have a look here

Set your background color to transparent ie.

background-color: transparent;

Thank you it works.
However In mobile I couldn't click the links
3 top icons on the right side including the country switcher.

Can you specify which devices did you test it on?

I've tried tapping on the 3 icons on mobile (Android - Chrome) and they seem to be working on my end.

But here's the thing. Perhaps you're tapping the icons before the whole site completely loads.

That can cause an issue because the country switcher is tapped before its script loads, it won't work properly.

That said, this is a completely separate matter. One which involves site performance optimization. :)

I tested on iphone - safari, iphone - chrome, android, no luck.
Something seemed to be covering the menu (only on the homepage) and the hamburger menu on the left doesn't work as well.

It's not a performance matter because other pages are working well.

you can see there's a blue block hovering while tapping on the dropdown
https://prnt.sc/1qemkm9

Hi Ree,

Try to add this CSS:

#mobile-header {
    z-index: 999 !important;
    position: relative;
}

Let me know :)

do you know why in android the menu went to second line? if the cart items is [1] it is also the same. I don't have this issue on iphone though.

theres simply not enough room on the header for all the elements to remain inline on the smallest screens.
Use this CSS to reduce the logo on small devices:

@media (max-width: 360px) {
    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 40px;
    }
}