[Resolved] Enable Mobile Header ONLY for mobile and NO tablet

[George]

I have looked everywhere, couldn’t find the solution. I have Mobile Header activated through the Layout->Header option from the Customizer but I want the mobile header activated ONLY for mobile screens and NO tablets. Can you point me to the right direction?

Please note: I don’t want to modify the mobile menu breaking points. I just want the mobile header to be activated only for smaller mobile screens but excluding tablets.

[Tom]

Hi George,

This is much easier to achieve in GPP 1.6, which is currently in beta. You can update like this: https://docs.generatepress.com/article/beta-testing/

In 1.6, you should be able to do this:

@media( width: 768px ) {
	.site-header,
	#site-navigation,
	#sticky-navigation {
		display: block !important;
		opacity: 1;
	}

	#mobile-header {
		display: none !important;
		opacity: 0;
		width: 100% !important;
	}
}

@media( max-width: 767px ) {
	.site-header,
	#site-navigation,
	#sticky-navigation {
		display: none !important;
		opacity: 0;
	}

	#mobile-header {
		display: block !important;
		opacity: 1;
		width: 100% !important;
	}
}

[George]

I think I can afford using the beta for this particular installation. Here is the code that worked for me:

@media( min-width: 500px ) {
	.site-header,
	#site-navigation,
	#sticky-navigation {
		display: block !important;
		opacity: 1;
	}

	#mobile-header {
		display: none !important;
		opacity: 0;
		width: 100% !important;
	}
}

I used min-width instead. Thanks for the pointers.

[Tom]

Awesome, thanks for posting your code 🙂

[Author]

Posts