Navigation jumps below logo and covers first section of page on certain desktop sizes

[SocialLightPB]

When I resize the browser from full screen, the navigation moves below the logo (instead of inline with it) before it changes to the mobile navigation button. This sits on top of the first section of the site and covers it up. How do I fix? You can see it at http://approvedassets.com/aspen-vail-photo-booth/
Thanks!

[ruenel]

Hello There,

Thanks for writing in!

When you resize your browser window, the menu will display in the next row of the logo because there isn’t any more enough space to display the logo and menu inline. The mobile responsive menu will only be triggered once the screen is less than 980 pixels.

I have checked it and as soon as the screen size hits 1050 pixels, then you will see the change in the rows. To prevents this from happening, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 1060px){
  .masthead-inline .x-btn-navbar {
    display: block;
    float: right;
  }

  .x-nav-wrap.desktop {
    display: none;
  }

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

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

And by the way, X 6.2.0 and Cornerstone 3.2.0 are now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[SocialLightPB]

This worked, thank you for the quick reply!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.