Docs

[amoraiti]

Hello,

I have translated my website in German and the navigation menu does not break when it gets bigger than the screen but moves under the logo. Although it breaks perfectly for the English navigation menu.

I have attached a gif that demonstrates the issue!

Do you have any advise on how to solve the issue?
Thanks you very much!

Argyro

[Joao]

Hi There,

Your image did not upload, it needs to be max 500kb and please provide your URL.

Thanks

Joao

[amoraiti]

This reply has been marked as private.

[Rupok]

Hi Argyro,

The menu breakpoint is working perfectly and both breaks to mobile menu when screen size is under 980px. But I gues your issue is not related to breakpoint but the large menu that’s breaking to new line. It’s simple because you have so many items and there is no enough space on Navbar for them.

To fix this, you can add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 980px) and (max-width: 1350px) {
.x-navbar .x-container.max.width {
  width: 95%;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  padding-left: 12px;
  padding-right: 12px;
  font-size: 10px;
}
}

@media only screen and (min-width: 980px) and (max-width: 1130px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  font-size: 9px;
  padding-left: 8px;
  padding-right: 8px;
}
}

Hope this helps.

[amoraiti]

Thanks a lot! It solved my problem! You guys are amazing!

[Paul R]

You’re welcome! 🙂

[Author]

Posts