Navbar menu mobile/desktop toggle

[shayes]

Good afternoon. It has been awhile since we have messed with out site and today we noticed an odd behavior that we don’t think was there when we initially went live with our new site in 2015. At the top of all our pages we have our navigation bar. We believe it used to resize based on the screen size that was viewing it. Now it seems to wrap the navigation bar below as you shrink your screen down or adjust your screen resolution. I was wondering if there was something in our custom code that may had been inadvertently changed or modified that would cause this.

Home ⋆ JR Custom Metal Products Inc.

.x-navbar {
background-color: #333333;
background-image: url(‘http://f55.498.myftpupload.com/wp-content/uploads/2014/10/JRCM-Building-with-bushes-1916-x-4791.png’);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
} .entry-wrap {
background-color: transparent;
}
.x-colophon {
background-color: #333333;
background-image: url(‘http://f55.498.myftpupload.com/wp-content/uploads/2014/10/Wichita-Skyline-1.jpg’);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.x-scroll-top {
color: #FFFFFF;
border: 3px solid #FFFFFF
}
@media (min-width: 980px) and (max-width: 1200px) {
.x-navbar .x-nav > li > a {
font-size: 13px;
padding-left: 10px;
padding-right: 10px;
}
}
.entry-wrap {
-webkit-box-shadow: none;
box-shadow: none;
}

Thanks

[nabeel]

Hi Scott,

Thank you for reaching out to us. I checked your site and it seems like a version incompatibility issue as you’re using an outdated version of X with the latest version of Cornerstone. Please update your X theme as well to avoid such conflicts potential errors. You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

I would recommend that you create a staging site for updating. This is very useful because you can test drive any X or Pro updates in the staging area, do the customization and troubleshooting without disrupting your live site. Once everything is perfect, you can easily and flawlessly proceed the update in the live site. To know how to create a staging area, please check out these articles:
http://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/, https://maintainn.com/2015/02/how-to-create-a-staging-site-for-wordpress/

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.

I also noticed you’ve entered a very high value of your Navbar Top Height in Theme Options > Header > Navbar. Please change it to 60 or as per your need. This would resolve your Navbar shrinking issue.

Let us know how this goes!