Menu behaving strangely on certain screen size

[logoglo]

Hi there, see here: https://staging2.showgourmet.mx/

I have some code, and an image in the nav bar, it all works fine on mobiles and desktops…, but on an ipad and ipad pro landscape, it behaves weird, adding a scroll bar: (this has been tested in chrome dev tools on the devices screen)

This is the code I have:

.x-brand {
 margin-bottom: -60px;
}
@media (max-width: 1245px) {
  .x-nav-wrap.desktop {
    display: none;
  }

  .x-nav-wrap.mobile {
    display: block;
  }

  .x-nav-wrap.mobile.x-collapsed {
    display: none;
  }

  .x-nav-wrap.mobile.x-collapsed.in {
    display: block;
  }

  .masthead-inline .x-btn-navbar {
    display: block;
    float: right;
  }
}
@media (max-width:500px) {
    .x-brand img {
    width: calc(250px / 2);
    height: auto;
      margin-bottom: 20px;
    }
}
@media (max-width:400px) {
    .x-brand img {
    width: calc(250px / 2);
    height: auto;
          margin-bottom: 20px;
    }
}
@media (max-width:290px) {
    .x-brand img {
    width: calc(250px / 2);
    height: auto;
      margin-bottom: 20px;
  
    }

}
@media (max-width:979px) {
    .x-navbar-fixed-top {
        position: fixed!important
    }
}
.x-navbar .mobile .x-nav li>a {
    margin: 0 0 -1px;
    border: 1px solid #f2f2f2;
    border-left: 0;
    border-right: 0;
    padding: 1em 0;
    color: #b7b7b7;
    background-color: transparent;
  margin-top: 60px;
}
.menu-image {
 margin-top: -30px !important;
}
.menu-item-25 a {
    pointer-events: none;
}

.menu-item-25 a:hover {
    box-shadow: none !important;
    color: #002e47 !important;
} 

And here is a video of whats happening:

Anything I can do to fix this? (as it looks and works on the desktop/laptop and mobile is exactly how I want it)

Thanks.

[prakash_s]

Hello @logoglo,

I checked your given page URL it seems that you have set the custom height as “0px” of the navigation bar through the custom CSS code. Please have a look at the given screenshot below.

You need to replace the below code through the given CSS code

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0px;
}

Replace the code with the given code below.

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[logoglo]

Thanks! that worked.

[prakash_s]

Hello @logoglo,

Glad that we were able to help you. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks