Docs

[Simon T]

Hi Guys,

Just wondering how I can stop the navbar items dropping off at smaller screen sizes? Even if that means using the mobile menu at smaller screens, how do I set this?

[Simon T]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! It’s causing because you have set large size for the logo image, larger font size for menu items,some messy custom CSS etc.
You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 1450px) {
header .x-container.max {
  padding-right: 10px;
}

.x-brand img {
  width: 250px;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  font-size: 14px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 45px;
}
}

@media only screen and (max-width: 1450px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  font-size: 12px;
}
}

Let’s adjust the CSS within media queries if needed.

Hope this helps.

Cheers!

[Author]

Posts