Desktop navbar not working in mobile since latest update to x

Support
#1

Hello,

Since the most recent update to X (6.0.4) we have a problem with the mobile navigation setup that worked fine prior to the update.

Basically, our desktop navbar that we have configured for mobile is no longer showing up on the mobile pages.

Here a the picture from our staging site that I loaded a pre-update backup to.

Here is our live site of the same page.

Both pictures were taken today and Cornerstone is also updated to the most recent version.

Here is the code we are using for this (same on both that staging/pre-update site and the live site):

/* hide xtheme mobile menu and show desktop menu (contact button only) on mobile */
@media (max-width: 979px) {
.masthead-inline .x-btn-navbar {
display: none !important;
}
.x-nav-wrap.mobile.collapse {
display: block !important;
}
.x-navbar .mobile .x-nav li> a { border: 0; display: inline; position: absolute; right: 0; top: -5px;
}
.x-navbar {
height: 40px;
}
.mobile .menu-item-2103 {
display: none;
}
.mobile .menu-item-1048 {
display: none;
}
.mobile .menu-item-1108 {
display: none;
}
.mobile .menu-item-1060 {
display: none;
}
.mobile .menu-item-1747 {
display: none;
}
.mobile .menu-item-1818 {
display: none;
}
}

Have been trying to figure this one out and have had no success. Please help!!

Thanks very much and have a great day.

#2

Hello @TackleB,

Thanks for asking. :slight_smile:

I see that you have added a custom CSS that’s hiding the menu. Can you please try remove .masthead-inline .x-btn-navbar the CSS and then see how it goes? Here is a screencast https://cl.ly/2Z0p370Q0t17

Thanks.

#4

Hello @TackleB,

Yes, actually the images didn’t load on my end properly and that’s why I got confused with the burger menu. I have updated my pervious reply. Can you please check?

I am sorry for the confusion.

Thanks.

#5

Did not help and made thing worst. Removing the

.masthead-inline .x-btn-navbar { display: none !important; }

brings up the xTheme mobile burger which is not to be displayed on the page.

Just as a reminder, this code worked absolutely fine until the most recent update of x.

#6

Hi There,

On your custom CSS code above. Please update this:

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

To this:

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

You might also have other custom CSS that has the .collapse selector, please update that selector to .x-collapsed

Hope it helps,
Cheers!

#7

Worked perfectly! Thanks so much for such a great product and support!!