Jump to content

Recommended Posts

Site URL: https://www.joannebasilieres.com/

Good day! 

Jut want to ask for assistance for the tech problem that I am experiencing now. My client wants to create a bilingual website which I already created one, but the thing is when I view it in the mobile view there are some pages that are not showing in the screen specifically this page "Devenir mon moi authentique"

Please do help me out. Thank you so much! 

 

Screenshot 2022-10-01 041617.png

Link to comment
  • Replies 16
  • Views 612
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Does this code look familiar to you? Is it from your custom css? 

#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
}
#header .header-nav-item:nth-child(7){
Display:none
}

 

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
1 hour ago, joseph81 said:

Does this code look familiar to you? Is it from your custom css? 

#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
}
#header .header-nav-item:nth-child(7){
Display:none
}

 

Yes I am using this code to other pages and it's working. Only in this page "Devenir mon moi authentique"  that it's not working. I also added this code for mobile in other pages and it's working. 

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

<style> 
@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
  }   
 @media screen and (max-width:1511px){
  #header .header-menu-nav-item:nth-child(13){
    display:none
  }
 @media screen and (max-width:1511px){
  #header .header-menu-nav-item:nth-child(14){
    display:none
  } 
</style>

Link to comment
8 minutes ago, Chrstine said:

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

<style> 
@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
  }   
 @media screen and (max-width:1511px){
  #header .header-menu-nav-item:nth-child(13){
    display:none
  }
 @media screen and (max-width:1511px){
  #header .header-menu-nav-item:nth-child(14){
    display:none
  } 
</style>

This code is in english page

Link to comment
Just now, Chrstine said:

And this is in French 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
}
#header .header-nav-item:nth-child(7){
Display:none
}
</style>

<style> 
  @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
  }
 @media screen and (max-width:1511px){
   #header .header-menu-nav-item:nth-child(7){
     display:none
  } 
</style>

 

Link to comment

So I'm not sure why are those css rules applied but it affects 2nd level navigation also. You could override those rules on 2nd level navs like this:

 

.header-menu-nav-folder:not(data-folder="root"] .header-menu-nav-item {
    display: block!important;
}

 

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment

s

On 10/1/2022 at 4:54 PM, joseph81 said:

So I'm not sure why are those css rules applied but it affects 2nd level navigation also. You could override those rules on 2nd level navs like this:

 

.header-menu-nav-folder:not(data-folder="root"] .header-menu-nav-item {
    display: block!important;
}

 

Can you give me the exact code to be put in? I tried to follow the code that you have given and it's not working. 

Link to comment

So I will not be using 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
}
#header .header-nav-item:nth-child(7){
Display:none
}
</style>

<style> 
  @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
  }
 @media screen and (max-width:1511px){
   #header .header-menu-nav-item:nth-child(7){
     display:none
  } 
</style>

Link to comment

If you want to use it for mobile than do it like this:

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

That code that you mentioned above is not best practice code, because it was intended to hide first level navigation items but it does hide second level navigation too. Anyway the shortest way to fix this is to override that long code with the code above.

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
  • 2 weeks later...

Hi Josh, for clarification am I going to change the this code  

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

To this code?

 

@media (max-width:1024px) {
  #header .header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-item {
      display: block;
  }
}
Link to comment
On 10/15/2022 at 4:51 AM, Chrstine said:

Hi Josh, for clarification am I going to change the this code  

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

To this code?

 

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

Do you still need help?

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

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.