Sticky header on mobile

  • Resolved kheir01

    (@kheir01)


    6 months, 2 weeks ago

    Hi there,

    i am struggling to make the header on mobile version sticky using premium generatepress template . Do you have any idea how i can do it please ?

    in fact, i managed to return it sticky by adding this css code on “Additional CSS” section: 

    @media(min-width :766px){
    .site-header{position: sticky; top: 0; z-index: 99;}
    .main-navigation{
    position: sticky; top:191px; z-index:99;}
    }

    but it doesn’t work on mobile version ! I tried to change “min-width :766px” with “max-width :766px” in the code but still not working ..

    THANK YOU in advance for your help

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Alvind

    (@alvindcaesar)

    Hi there,

    Can you raise your issue on the Premium Support Forum instead? WordPress doesn’t allow us to support paid features in this forum.?

    Thank you for understanding!

    Thread Starter kheir01

    (@kheir01)

    Actually i am not registered in generatepress, the template was offered by youtuber to his 1000 first fans who watched his video and i was among. So i don’t have a direct access to their support.

    Anyway thank you for answering

    Theme Author Tom

    (@edge22)

    Unfortunately we are unable to support the premium version here on www.remarpro.com – it directly violates their rules and can get us in trouble.

    It also sounds like the YouTuber is violating the terms of their license, as sharing it is not allowed. It’s likely that the license you’ve been given will be disabled at some point.

    If you have any questions regarding the free theme provided here at www.remarpro.com, we’ll be happy to help.

    Thanks for understanding!

    Thread Starter kheir01

    (@kheir01)

    i understand and i thank you for this information.

    In that case, can you help me with the piece of code that will make my header sticky on mobile phone using free WordPress template ?

    Theme Author Tom

    (@edge22)

    Hi there,

    It looks like it is already sticky, as you’re using the premium option to make it sticky.

    If you wish to use CSS, you would need to turn that option off, first. You would also need to use the header provided in the free theme (not the premium feature you have turned on).

    Once you do that, you could do something like this:

    @media (max-width: 768px) {
        .site-header {
            position: sticky;
            top: 0;
        }
    }
    Thread Starter kheir01

    (@kheir01)

    Hi Tom,

    It seems working very well. THANK You very much for your help.

    have a good day.

    Theme Author Tom

    (@edge22)

    Thanks, you too!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Sticky header on mobile’ is closed to new replies.