[Resolved] Fighting with mobile menu and mobile header again!

Hi Tom, thanks for getting back.

In GP 2.3, the “mobile header” breakpoint option in GPP 1.8 will apply to the regular mobile navigation as well.

Sorry but I don’t know what that means in the context of the link I sent not working. Maybe I am missing something but if the code that I linked doesn’t work now, doesn’t it need to be removed?

According to the code, the sticky nav will disable once the .menu-toggle element is visible if it’s set to be sticky on desktop only. Is .menu-toggle visible when the sticky is still working? Is the mobile header set to sticky?

Mobile header is set to sticky with a breakpoint of 602px as I mentioned earlier. Sticky navigation is set to Desktop Only. If what you say is true, a size smaller than 602px should disable sticky but in my case, it doesn’t. I just realized that Mobile header also have Sticky On. Setting it Off leaves the menu Sticky up to a minimum width before it switches to mobile (602px). I guess that should be the expected behavior which I need to balance out. I just find it so confusing though! I think a setting in the Customizer for manually adjusting the mobile breakpoint would help visualize things a bit more, what do you think?

This sounds like there simply isn’t enough room for everything in the navigation at that size? Maybe 602 isn’t wide enough?

There isn’t enough room for the sticky navigation but there is enough room for the normal menu and I am looking for a way to possibly separate their behavior and have the sticky menu as a mobile icon even though mobile breakpoint hasn’t been initiated yet.

You should be able to use CSS to target .main-navigation.navigation-stick and hide the menu items/show the menu toggle using your own media query. As long as .menu-toggle is visible, the sticky navigation javascript should function.

Aha, the show/hide functionality is what I wanted! I think I just created a super responsive menu here! There are some layout and alignment issues but I think I can handle those. I will get back to you if I have more issues.

Thanks for the quick reply, as always!

Hi Tom.

I managed to do quite a lot only a couple of problems. It’s hard to describe so I will include a development URL on the first post and say a few things here:

1) When resizing the browser window, take a look at the main menu (non-sticky). On sizes smaller than 769px the menu shifts to the left. I have tried everything to center it but I couldn’t.

2) When resizing the browser window, please focus on the sticky menu now at the top. At 769px the mobile menu on the right makes a sudden movement. The same thing happens at 603px. I believe it’s because I used the following CSS:

@media (min-width: 603px) and (max-width: 769px) {
		.navigation-stick .menu-toggle {
		padding-top: 10px;			
	}
}

I had to use that as between those sized, the mobile menu was jumping up so I re-added the padding but it does this weird jump and I would like to avoid that.

3) Again on the sticky header and on sizes smaller than 603px, the mobile menu floats to the left, near the logo instead of staying floated to the right. I believe it has to do with the menu converting to flex but settings flex-grow to 1 just shifts it a bit to the right.

I have used this CSS for the responsive menu alignment which seems to me a bit overkill but I could not think of a better more refined way. Maybe you could help?

@media (min-width: 602px) {
    .inside-footer-widgets > div {
        float: left;
        clear: none;
        width: 50%;
    }

    .main-navigation .mobile-bar-items,
    .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: none;
    }

    .main-navigation ul,
    .gen-sidebar-nav {
        display: block;
    }
}

@media (max-width: 769px) {
	#site-navigation .menu-toggle {
		display: none;
	}

	.inside-header {
		padding-top: 20px;
	}

}

@media (min-width: 603px) and (max-width: 769px) {
		.navigation-stick .menu-toggle {
		padding-top: 10px;			
	}
}

@media (max-width: 890px) {
	.navigation-stick .main-nav {
		display: none;
	}

	.navigation-stick .menu-toggle {
		float: right;
		display: block;
	}

}

@media (max-width: 490px){
	.main-navigation .menu-toggle {
		margin: 0 auto;
	}

}

@media (max-width: 494px){

	.main-navigation .mobile-header-logo {
		margin: 0 auto !important;
	}	

}	

.mobile-header-logo {
	padding-top: 10px;
}

@media (max-width: 601px) {
	.navigation-stick .mobile-header-logo {
		padding-top: 0;
}

1. I completely lost you there, sorry. I don’t understand the nav drop point using the 769px breakpoint has anything to do with the menu not being able to center with any CSS applied. Also as far as I understand you will update GPP soon but I could use the provided code? Anyway, I tried using the filter you provided but didn’t fix anything. I think it would help if I was able to understand the reasoning behind what you are proposing. So as far as I understand, the filter sets a custom breakpoint, right? How would that fix the menu alignment? I am still using the latest GP version and not 2.3. Do I need to use a development version to see any changes? And if yes, how would I install that since I can’t find it in the repository?

2. Ok, I applied that filter and removed the CSS. It works better even though I can still see that only at 603px the mobile menu jumps up instantly.

3. Yes, you are right, I removed it and applied some other styling to fix it, even though I am still not clear why that CSS would cause the mobile menu to come closer to the logo unless I was targeting the wrong class or something (getting very late here and I can’t think so clearly!).

1. It’s not working. I went into the css.output.php at line 47 and renamed generate_not_mobile_media_query to generate_not_mobile_menu_media_query, then refreshed the page. Top menu jumps on the left. I also don’t understand why I couldn’t have used the original filter name instead.

2. Updated the first post with a link to a gif. Look at 604px.

3. Ok, thanks. I believe I have fixed that.

1. Yes, I did. I had to deactivate the Cache dynamic CSS in the Customizer general settings. Now it’s working!

2. Yes, I have removed the code and all realted CSS is the following:

/* Sticky Logo */
.main-navigation.is_stuck {
	background-color: #282828;
}

.navigation-stick .navigation-logo {
    margin: 14px 0 0 10px;
}

/* Change mobile break point */
@media (min-width: 602px) {
    .inside-footer-widgets > div {
        float: left;
        clear: none;
        width: 50%;
    }

    .main-navigation .mobile-bar-items,
    .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: none;
    }

    .main-navigation ul,
    .gen-sidebar-nav {
        display: block;
    }
}

@media (max-width: 769px) {
	#site-navigation .menu-toggle {
		display: none;
	}

	.inside-header {
		padding-top: 20px;
	}

}

@media (max-width: 890px) {
	.navigation-stick .main-nav {
		display: none;
	}

	.navigation-stick .menu-toggle {
		float: right;
		display: block;
	}

}

@media (max-width: 490px){
	.main-navigation .menu-toggle {
		margin: 0 auto;
	}

}

@media (max-width: 494px){

	.main-navigation .mobile-header-logo {
		margin: 0 auto !important;
	}	

}	

.mobile-header-logo {
	margin-top: 8px;
}

.navigation-stick .mobile-header-logo {
	margin-top: 0;
}

.navigation-stick .mobile-header-logo {
	padding: 14px 0 8px 0;
}

I have also updated links in the first post.

1. Ok got it!
2. Yeah, you are right. Much better now. The only thing is that at 603px now and coming from a smaller size, the whole sticky header disappears instantly and fades in again (as per the Customizer setting I would imagine). Can this be avoided?

Thanks Tom.

Those filters found in the css-output.php: I couldn’t find them in the documentation anywhere and they seem very helpful indeed. Can you add them in the documentation maybe? I was under the impression that all filters and hooks available were documented but apparently, there are some that are not?