Header responsive fix on devices

Support
#1

Hi there,

The menu on the header of my site is too large to fit on a Ipad screen. (it stacks in to two layers) So i added css to make the padding arround the menu items smaller. Now it fits, but on the Ipad Pro it doesn’t.

How can i resolve this issue?

I was thinking of making the menu collapse to a mobile menu to the maximum resolution of a Ipad Pro, but i don’t know how.

Thanks!

#2

Hello @Doetjes,

Thanks for asking. Hope you are doing good. :slight_smile:

I can see navigation splitting in two rows on tablet devices. To fix that up, please add following CSS under X > Theme Options > CSS:


@media only screen and (max-width: 1130px) {
    .x-navbar .desktop .x-nav > li > a {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
}


@media only screen and (min-width: 980px) {
    .x-navbar .desktop .x-nav > li > a {
    padding-left: 2px !important;
    padding-right: 2px !important;
}
}

Please let us know how it goes.

Thanks.

#3

Thanks for your answer!

The text is now to close to eachother, that doesn’t look pretty to me haha. Do you have another option?

#4

Hi again,

Please use this code instead:

@media only screen and (min-width: 980px) and (max-width: 1200px){
  .x-navbar .desktop .x-nav > li > a {
      font-size: 12px;
      padding-left: 8px !important;
      padding-right: 8px !important;
  }
  .menu-item-136 > a {
    width: 220px;
    background-size: contain;
  }
}

Hope this helps!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.