Archived topic
Enable Mobile Header ONLY for mobile and NO tablet
3 replies · Started by George on March 7, 2018
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.
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;
}
}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.
Awesome, thanks for posting your code :)
