Archived topic
GP Premium 1.8.1 Mobile Menu Issue
7 replies · Started by Zach on April 29, 2019
Hello,
I just updated to GP Premium 1.8.1 from 1.7.8 and now my mobile header is no longer showing on https://qualityfishingguides.com
I am using the Navigator starter site with some custom CSS. The starter site fixes the mobile header to the bottom. After updating, the header is gone on mobile. I suspect this has something to do with the new navigation as header feature. (Which I have kept disabled).
Here is the custom CSS I am using. Please advise, or let me know if you need more info.
/* ------
Header
------- */
.slideout-navigation ul:not(.toggled) .dropdown-menu-toggle:before {
transform: rotate(180deg);
display: inline-block;
}
.site-header {
border-right: 4px solid rgba(43,43,43,0.67)
}
#mobile-header {
position: fixed;
bottom: 0;
}
div.elementor.elementor-70.elementor-type-section {
width: 80%;
z-index: 500;
}
button.menu-toggle {
}
#generate-slideout-menu {
border-top-right-radius: 10px;
}
.offside {
height: auto !important;
bottom: 0 !Important;
top: auto;
}
.offside-js--is-open .slideout-overlay {
opacity: 0.5;
}
.slideout-exit {
visibility: hidden;
}
.slideout-widget {
margin: 0 !important;
}
/* ------
Fixed Header
------- */
@media (min-width: 769px) {
body {
margin-left: 265px;
}
.site-header {
position: fixed;
left: 0;
top: 0;
width: 265px;
z-index: 300;
height: 100%;
overflow: auto;
overflow-x: hidden;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
transition: .1s ease;
}
.admin-bar .site-header {
top: 32px;
}
.site-header .main-navigation li {
float: none;
}
}
.inside-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.site-branding,
.site-logo {
display: none;
}
.header-widget {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
margin: 0;
max-width: 100% !important;
}
.nav-float-right .inside-header .main-navigation {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
float: none;
margin: 0;
}
.nav-float-right .header-widget {
float: none;
top: auto;
width: 100%;
}
Hi there,
Have you fixed this?
I can see the mobile header no problem using browser resizing:
https://www.screencast.com/t/f6HP3LbF
I checked on mobile as well and the mobile header seems to be showing correctly.
Let me know :)
No. I just reverted back to an old backup. I need to know the fix before I update again.
Hi there,
We would need to see the issue in order to know what's going on, unfortunately.
You could set up a quick staging site to do the update so it doesn't affect your live website.
The standard Navigator site seems to be ok: https://gpsites.co/navigator/
Makes sense.
Here is the staging site with everything updated - https://staging4.qualityfishingguides.com/
Ah, is the navigation disabled on that page using Disable Elements? If so, it will disable the mobile header now as well. It was a bug that the mobile header continued to display even with the navigation disabled.
If you don't need the GP menu, it's better to disable it in Customize > Layout > Primary Navigation.
Yep, navigation is disabled on all pages.
That did the trick!
Thanks Tom!
You're welcome - sorry for the inconvenience!