Jump to content

Multilanguage navigation dropdown menu problem - manually CSS setup. - NOT working on dropdown menu mobile view.

Go to solution Solved by tuanphan,

Recommended Posts



I've been migrating my site from 7.0 www.amorylujo.com to 7.1 for a month.

This is the result:


Password: Amor

To create the multilingual site I used this code to hide the pages´links in one language or the other

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}}


But I get this problem: the 2 links that are inside the "Films" folder are not displayed but only in the mobile view and only browsing in English language.

On Mobile Spanish browsing and on Desktop (English and Spanish) they are displayed correctly 


Here the code I copy/paste for all the English pages:


#header .header-nav-item:nth-child(1) {display:none}

#header .header-nav-item:nth-child(2) {display:none}

#header .header-nav-item:nth-child(3) {display:none}

#header .header-nav-item:nth-child(4) {display:none}
#header .header-nav-item:nth-child(5) {display:none}
#header .header-nav-item:nth-child(6) {display:none}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(5) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}}



And here for all the Sanish pages:


#header .header-nav-item:nth-child(7) {display:none}

#header .header-nav-item:nth-child(8) {display:none}

#header .header-nav-item:nth-child(9) {display:none}

#header .header-nav-item:nth-child(10) {display:none}
#header .header-nav-item:nth-child(11) {display:none}
#header .header-nav-item:nth-child(12) {display:none}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(7) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(8) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(9) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(10) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(11) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(12) {display:none}}



I figure I need to change something here:

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(5) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}}


Any help is deeply apreciated



Link to comment
  • Solution

Your code targets both Main item + Sub item

You should change the code

Something like this

/* hide items on desktop */
nav.header-nav-list>div:nth-child(3), nav.header-nav-list>div:nth-child(4), nav.header-nav-list>div:nth-child(5) {
    display: none;
/* hide items on mobile */
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(3), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(4), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(5) {
    display: none;

This code is just an example, it will hide item 3, 4, 5 from desktop (first code) and mobile (second code)

You can remove your code (remember to save a copy all code somewhere, just for backup), and use my new code aproach

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


Good morning Tuanphan,
First of all, thank you very much for your help.
The one you provided me

  div.header-nav-item:nth-child(-n+6) {
  	display: none;
  [data-folder="root"]>div:first-child>div:first-child>div:nth-child(-n+6) {
  display: none;

in this other topic worked perfectly.


I hope it's not too much to ask, if you can give us your opinion in this other problem I´m having on my site.

Your opinion is greatly valued.



Link to comment
On 1/30/2024 at 11:06 AM, tuanphan said:

If you agree, we can change top 2 buttons with a Code Block and second 3 buttons with a Code Block, I can give the code, they will be fine without overlap.


Yes please, whatever might work I can try.
I'm doing field work until next Tuesday, that's when I can continue working on the page.
Thank you so much

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.