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

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

Home Forums Support Enable Mobile Header ONLY for mobile and NO tablet

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #513677
    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.

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #514342
    Tom
    Lead Developer
    Lead Developer

    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;
    	}
    }
    #514448
    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.

    #514948
    Tom
    Lead Developer
    Lead Developer

    Awesome, thanks for posting your code 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.