Okay
  Public Ticket #1814261
sticky header
Open

Comments

  • airion started the conversation

    Hello! 

    How can I make the header on mobile sticky?

    I used CSS you provided: 

    @media screen and (max-width: 1000px) {
        header {
            position: fixed !important;
            left: 0px !important;
            top: 0px !important;
        }
        .content {
            top: 40px !important; /* this should be equal to mobile header height */
        }
    }
    

    I adjusted the top-value so the content is below the header, but now the whole content moved down on the site so the content is not displayed fully at the bottom. I also tried to change the bottom padding in WPBakery Row Settings. 

    I noticed that the display problem starts when sizing down the window - as soon as the left menu disappears. 

  •  1,488
    Qode replied

    Hello, 

    The padding should be added to the bottom of content. Please use the following custom CSS instead and see if it helps: 

    @media screen and (max-width: 1000px) {
        header {
            position: fixed !important;
            left: 0px !important;
            top: 0px !important;
        }
        .content {
            top: 40px !important; /* this should be equal to mobile header height */
            padding-bottom: 40px !important;
        }
    }
    

    Best regards, 

    Ian


    Customer Support

    Sign up for our newsletter :)

  • airion replied

    Thanks for your help! It works now!

    5 stars! 

    All the best 

  •  1,488
    Qode replied

    We are glad to hear it, thank you for your feedbacksmile.png

    All the best, 

    Qode


    Customer Support

    Sign up for our newsletter :)