Mobile dropdown Menu different from Desktop

Site URL: https://www.lesmenagers.ca/

Hey there, 

The dropdown menu of my "Services" section in both EN and FR are not complete aaaand for both language it's showing different info. 

For the EN version it's showing the first 3 linked page under that menu and for the FR version it's showing the last 2 linked pages. There is a total of 5 pages... Sooo I am assuming there is something in my custom CSS coding that's off. 

Can someone please please help me. 

Here's what I entered in my custom CSS for the Bilingual coding : 

for EN pages 

<style>

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

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

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

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

@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}}
  </style>



 

for FR pages 

 

<style>

#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(10) {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(10) {display:none}}
  </style>




Thank you so much !

Hi. Do you still need help?

With multi language site, you can use these guides

• For Business Plan or higher: https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template
• For Personal Plan or higher: https://beaverhero.com/squarespace-2-languages/

Hi there @tuanphan

I've been following so many of your posts ! You're amazing ! It's been super helpful. 

I do indeed still need some help though. I still can't figure out why my dropdown menu on the Mobile doesn't display all my services. In EN it displays the first 3 pages and in FR in displays only the last 2. On both languages it should display 5 services on each. 

I don't know if that makes sense. It's find on desktop but it doesn't work on Mobile. Any idea what I did wrong ? 

Thank you so so much for your help !!

Mobile has same class: nav item - nav dropdown item.

Target this class for nav items.

nav>div:first-child .header-menu-nav-item:nth-child(8) {
    display: none;
}

Do similar for other items.

also, you can combine some code into one

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

to

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

or shorter

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

with n run from 0, 1,2,3,4....

@tuanphan Thank you so so much for your help ! 

I am sorry though but I am not sure I understand the code. It doesn't seem to work. Should I fully remove the codes I already have and add this code you gave me or should it just me modified. 

This is the code I have been using that works perfectly for the desktop version : 
 

<style>

#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(10) {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(10) {display:none}}
  </style>

Hi Eli, Did you find a way to resolve this? I have the same issue and I'm using exactly the same code that you

On 1/12/2021 at 9:22 AM, ElieGator said:

@tuanphan Thank you so so much for your help ! 

I am sorry though but I am not sure I understand the code. It doesn't seem to work. Should I fully remove the codes I already have and add this code you gave me or should it just me modified. 

This is the code I have been using that works perfectly for the desktop version : 
 

<style>

#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(10) {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(10) {display:none}}
  </style>

I have just found the code, you can use:

@media screen and (max-width: 1511px) {
  #header
    .header-menu-nav-folder:not([data-folder="root"])
    .header-menu-nav-item {
    display: block;
  }
}

On 11/30/2021 at 9:47 AM, Giovani said:

I have just found the code, you can use:

@media screen and (max-width: 1511px) {
  #header
    .header-menu-nav-folder:not([data-folder="root"])
    .header-menu-nav-item {
    display: block;
  }
}

Hi @Giovani

I'm having the same unsolved problem. I've tried using your code but it won't hide the other language menu which is the required feature. Perhaps you can show how this can be tweaked so that it still hide the other language menu as well?

On 2/8/2022 at 12:30 PM, Seanth said:

Hi @Giovani

I'm having the same unsolved problem. I've tried using your code but it won't hide the other language menu which is the required feature. Perhaps you can show how this can be tweaked so that it still hide the other language menu as well?

What is your site url? We can check easier

On 2/12/2022 at 8:56 PM, tuanphan said:

What is your site url? We can check easier

Hi @tuanphan @bangank36

Here's my site. tma-mdpartner.com

I've posted it here, but without any replies. 

So I've made adjustment to use the mobile menu in the desktop mode which kinda avoided the unsolved problem. This is no problem on mobile and normal size desktop/laptop.

But there's another problem (sighhhhh....!) as it shows all menus in both language when displayed on larger screen when expanded. Kindly see below.

Here's the CSS code I'm using.

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
.header-menu-nav-item a:hover {
    color: #ff524a !important;
}
}

/* show burger */
.header-burger {
  display: flex; 
}

/* Show overlay mobile menu */
.header--menu-open
  .header-menu {
   visibility: visible;
    opacity: 0.9;
 *{font-family: 'noto-m',arial;
   font-size: 18px!important;}
.header-menu-nav-item a {
   margin-top: 8px;
   margin-bottom: 8px;
    }
}

header#header [href="/home-th"]{
  color: white;
  background-color:#ec111a;
  padding: .2rem 1.2032rem;
  border-radius: .5rem;
}
header#header [href="/home-eng"]{
  color: white;
  background-color:#ec111a;
  padding: .2rem 1.6032rem;
  border-radius: .5rem;
}
 

PS: I'm a code dummie. So I just search, copy and paste, with a little adjustment.

Thank you so much for your kind supports!

Here's the code injection on every page for Thai menu.

<style>
  #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
  }
    #header .header-nav-item:nth-child(13){
    display:none
  }
    #header .header-nav-item:nth-child(14){
    display:none
  }
    #header .header-nav-item:nth-child(16){
    display:none
  }
    #header .header-nav-item:nth-child(17){
    display:none
  }
</style>

<style>
  @media screen and (max-width:1511px){
    #header .header-menu-nav-item:nth-child(7){
    display:none
  }
    #header .header-menu-nav-item:nth-child(8){
    display:none
  }
    #header .header-menu-nav-item:nth-child(9){
    display:none
  }
    #header .header-menu-nav-item:nth-child(10){
    display:none
  }
    #header .header-menu-nav-item:nth-child(11){
    display:none
  }
    #header .header-menu-nav-item:nth-child(12){
    display:none
  }
    #header .header-menu-nav-item:nth-child(13){
    display:none
    }
    #header .header-menu-nav-item:nth-child(14){
    display:none
  }    
    #header .header-menu-nav-item:nth-child(16){
    display:none
  }    
    #header .header-menu-nav-item:nth-child(17){
    display:none
  } 
  }
</style>

Look at your code, you will see max-width:1511

It means, if screen >1511px the code won't work.

You can change it to 9511px ☺️

On 2/21/2022 at 2:37 PM, tuanphan said:

Look at your code, you will see max-width:1511

It means, if screen >1511px the code won't work.

You can change it to 9511px ☺️

OMG! It works like magic!

Thank you soooo much !

Hello everyone.

Same 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 Mobil Spanish browsing and on Desktop (English and Spanish) they are displayed correctly 

Here the site:

https://amorylujo.squarespace.com/

Password: Amor

And here the code I copy/paste for the English pages

<style>

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

</style>

Is the same Issue:

On 1/10/2021 at 3:53 AM, tuanphan said:

Mobile has same class: nav item - nav dropdown item.

Target this class for nav items.

nav>div:first-child .header-menu-nav-item:nth-child(8) {
    display: none;
}

Do similar for other items.

Shoul I change this

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

Whit something like this:

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

Any possible  help will be greatly appreciated.

A&L

On 1/24/2024 at 1:33 AM, AmoryLujo said:

Hello everyone.

Same 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 Mobil Spanish browsing and on Desktop (English and Spanish) they are displayed correctly 

Here the site:

https://amorylujo.squarespace.com/

Password: Amor

And here the code I copy/paste for the English pages

<style>

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

</style>

 

Is the same Issue:

Shoul I change this

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

Whit something like this:

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

Any possible  help will be greatly appreciated.

A&L

 

 

 

 

 

Change this code

<style>

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

</style>

to this

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

7 hours ago, tuanphan said:

Change this code

<style>

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

</style>

to this

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

 

Good morning Tuanphan,
It worked perfect.
I passed it on each page of English and that's it.
Bravo once again and thank you for all your help.

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

Your opinion is greatly valued.