Mobile View

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! 

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
}

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>

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

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>

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

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. 

It's still not showing in phone view 

I can see a mistake there in my code. This is the correct code:

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

Is this for the mobile view? 

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>

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.

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

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?

10 hours ago, tuanphan said:

Do you still need help?

Yes please I need some help.

10 hours ago, tuanphan said:

Do you still need help?

I already send you an email please do help me out. Thank you so much!

On 10/18/2022 at 2:12 AM, Chrstine said:

I already send you an email please do help me out. Thank you so much!

I don't remember If I solved this via email or not?