Site logo

Archived topic

GP Premium 1.8.1 Mobile Menu Issue

7 replies · Started by Zach on April 29, 2019

Viewing posts 1–8 of 8

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/

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!

This archived topic is closed to new replies.