Mobile nav is not taking on cutoms css like desktop

Site URL: https://toucan-accordion-c6x7.squarespace.com

My Nav in mobile is not taking on the custom CSS Ihave applied. Example in the images below is the 'UA' language switcher which has a white box around it on desktop but this is not present in the mobile breakpoint?

Any hekp would be much appreciated 

Website passwors is: Maksym

Hi @Maksymrewko

The mobile menu uses a different class to the desktop menu. Add this to Custom CSS for the mobile menu.

Alternatively you can use the standard button element in the header. You can turn this on by selecting Edit Header > Elements > Button.

.header-menu-nav-item:nth-child(12) a{
    color: #000;
    background-color: #fff;
    padding-left: 1vw;
    padding-right: 1vw;
}

@meganheath thaks for your help but this doesnt seem to be achiveing the exact results I require. The nth child item is not taking on the colour associated to it and the background (currently black) span the width of the nav compared to desktop?

Any suggestions?

15 hours ago, Maksymrewko said:

@meganheath thaks for your help but this doesnt seem to be achiveing the exact results I require. The nth child item is not taking on the colour associated to it and the background (currently black) span the width of the nav compared to desktop?

Any suggestions?

Hi @Maksymrewko

Try this instead

.header-menu-nav-item:nth-child(12) a:not(.btn){
    color: #253551;
    background-color: #000;
    padding-left: 2vw;
    padding-right: 1vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    display: inline-block;
}

You can add a width property if you want to change the width of the background.

Hope that helps.