Hide header elements on mobile version.

Site URL:  https://bridge-sa.net/

Hello, on my website in order to implement a language switcher that keeps you on the same page once you switch language i added a bunch of elements to the header and then hide all the ones in Arabic on the English pages and viceversa.

Issue is on the mobile version the drop down menu still shows every single header page, how can i fix this?

Images for comparison:

https://prnt.sc/5kFl5sANCqpQ (Homepage header on desktop)

https://prnt.sc/xOQZ2affsdle (Homepage dropdown header menu on mobile version)

Can you share your website URL?

How are you hiding the language navigation items on desktop currently?

Just now, Ziggy said:

Can you share your website URL?

How are you hiding the language navigation items on desktop currently?

Site URL: https://bridge-sa.net/

I'm currently hiding the items using this code in the page settings advanced tab:

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

  </style>

Works like a charm, yhanks a bunch, spared me lots of headaches!

29 minutes ago, GiorgioDesign said:

Works like a charm, yhanks a bunch, spared me lots of headaches!

Not a problem! Could you mark my post as the solution to your question and give it a like? Thanks!

Hi, I'm having trouble with this code for the mobile version. 

I use Dropdown elements in my navigation. This works fine with this code on desktop mode.
On mobile mode it does not show me all the elements in the dropdown menu. 

Can you help me?

Thanks!

This is what I coded:
 

<style>
  #header .header-nav-item:nth-child(1){
    display:none
  }
  #header .header-nav-item:nth-child(3){
    display:none
  }
  #header .header-nav-item:nth-child(5){
    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;
    }
    #header .header-menu-nav-item:nth-child(3) {
      display:none;
    }
    #header .header-menu-nav-item:nth-child(5) {
      display:none;
    }
    #header .header-menu-nav-item:nth-child(7) {
      display:none;
    }
</style>

On 10/26/2024 at 12:03 AM, ybalis said:

Hi, I'm having trouble with this code for the mobile version. 

I use Dropdown elements in my navigation. This works fine with this code on desktop mode.
On mobile mode it does not show me all the elements in the dropdown menu. 

Can you help me?

Thanks!

This is what I coded:
 

<style>
  #header .header-nav-item:nth-child(1){
    display:none
  }
  #header .header-nav-item:nth-child(3){
    display:none
  }
  #header .header-nav-item:nth-child(5){
    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;
    }
    #header .header-menu-nav-item:nth-child(3) {
      display:none;
    }
    #header .header-menu-nav-item:nth-child(5) {
      display:none;
    }
    #header .header-menu-nav-item:nth-child(7) {
      display:none;
    }
</style>

Remove your code & use this approach

<style>
/* hide items on desktop */
nav.header-nav-list>div:nth-child(1), nav.header-nav-list>div:nth-child(3), nav.header-nav-list>div:nth-child(5), nav.header-nav-list>div:nth-child(7) {
    display: none;
}
/* hide items on mobile */
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(1), [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(5), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(7) {
    display: none;
}
</style>