Reply To: Mobile Menu

Home Forums Support Mobile Menu Reply To: Mobile Menu

Home Forums Support Mobile Menu Reply To: Mobile Menu

#234565
Garth Dryland

Hey Tom

I assume you’re referring to code on Github not GeneratePress itself. I recall the mobile menu appearing inside-header when testing options a few days ago.

Anyway it looks like I have found another one of these pesky type issues. Don’t shoot the messenger haha

Over the last few days I’ve noticed something going on with the main-navigation between 769px and 768px at 100% on firefox and MS Edge plus 125% on Chrome.
It happens using other percentages however viewing sites with these percentages makes sites appear close to equal in physical size across browsers so I typically use them like this.

Having said that at 100% the site works as it should on chrome which you may find interesting.

What happens is the menu appears to loose/override the CSS below causing the menu to move up 10px from where it generally sits until 769px before changing to display the mobile menu icon at 768px
In addition to that, other percentages on one or more of these browsers can cause menu to take one more pixel (767px) before the mobile icon appears.

@media (min-width: 769px) {
	.main-navigation:not(.is_stuck) {
		margin-top: 0;
	}
	
	.main-navigation:not(.navigation-clone) {
		margin-top: 10px;
	}
}

I tried adding !important before the px but no change for the better.

Also when using the floating menu plus which in my case navigation sits on the right, the items jump hard left a pixel before transitioning into the mobile-header.
You may find it interesting that both of these issues appear so far to be happening at the same percentages on the same browsers like they’re connected.

Furthermore I removed the CSS above and the menu jumping from right to left continues however the first issue stops occurring, potentially due to the new position of menu items.

Any suggestion as to what’s going on ?