The issue is that SS menus are a bit complex. There are two menu structures in a site. One for desktop and one for mobile. The mobile one is complex in itself because of it's panel like presentation.
Using the .header-nav-item class alone is not going to work. Use the following code which is more explicit about what is happening where and removes the need for media queries.
<style>
/* spanish navigation, hide english */
/* desktop */
.header-nav .header-nav-item:nth-child( 6 ),
.header-nav .header-nav-item:nth-child( 7 ),
.header-nav .header-nav-item:nth-child( 8 ),
.header-nav .header-nav-item:nth-child( 9 ),
.header-nav .header-nav-item:nth-child( 10 ),
.header-nav .header-nav-item:nth-child( 11 ),
/* mobile */
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 6 ),
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 7 ),
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 8 ),
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 9 ),
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 10 ),
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 11 )
{
display : none;
}
</style>
<style>
/* english navigation, hide spanish */
/* desktop */
.header-nav .header-nav-item:nth-child( 1 ),
.header-nav .header-nav-item:nth-child( 2 ),
.header-nav .header-nav-item:nth-child( 3 ),
.header-nav .header-nav-item:nth-child( 4 ),
.header-nav .header-nav-item:nth-child( 5 ),
.header-nav .header-nav-item:nth-child( 12 ),
/* mobile */
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 1 ),
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 2 ),
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 3 ),
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 4 ),
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 5 ),
.header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 12 )
{
display : none;
}
</style>
Note my use of the [data-folder="root"] selector. That targets the mobile menu top level elements leaving the sub elements alone.
Let us know how it goes.
florgodoyf got a reaction from creedon in Changing mobile navigation drop down menu not showing
