X-theme menu overlapping on content on mobile

Support
#1

Hello, One of my website as an issue in the mobile version for its menu. Only on certain pages the menu appears as transaparent and it overlaps on the content making it basically unreadable.

I already implemented this

@media (max-width: 979px) {
.x-navbar {
height: auto;
}
}
In the content css of all pages, but in few of them it doesn’t work.

This one for example http://educaresydney.com.au/who-is-gaby/

Can you please let me know?

#2

Hi there,

Thanks for writing around! Please use the following code instead:

@media screen and (max-width: 979px) {
  .x-navbar {
    height: auto !important;
  }
}

Make sure to purge all cache after adding the code otherwise you won’t see the changes on the front-end due to the cache.

Hope this helps!

#3

Sorry but that one doesn’t work either, I placed on the right place but it makes no difference for the same pages…

#4

Hi,

Try adding it in Appearance > Customize > Additional CSS

@media screen and (max-width: 979px) {
  .x-navbar {
    height: auto !important;
  }
}

If it still doesn’t work, please provide us your wordpress admin login in Secure note

Thanks

#6

Hello There,

The issue is happening because you have added this custom css in the customizer, Appearance > Customize > Additional CSS

.x-navbar {
    width: 1287px;
    height: 125px;
}

You would need to update it and use this code instead:

@media(min-width: 980px){
  .x-navbar {
    width: 1287px;
    height: 125px;
  }
}

We would loved to know if this has work for you. Thank you.

#7

Unfortunately still doesn’t work. but I am not sure I placed in the right spot, should i remove all the other command related to the nav bar and replace with only that specific one that you gave me? Thanks

#8

Hi There,

Please find and remove this custom CSS under Customizer > Additional CSS:

.x-navbar {
 
    width: 1287px;
    height: 125px;
}

You just need to keep this CSS:

@media(min-width: 980px){
  .x-navbar {
    width: 1287px;
    height: 125px;
  }
}

Regards!

#9

Thank you! It works now

1 Like
#10