How to make my header sticky on scroll using SKT Golf theme

Home Forums All Other Themes How to make my header sticky on scroll using SKT Golf theme

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #125004
    nahumpfrancisnahumpfrancis
    Participant
    • Topics: 31
    • Replies: 67
    • Total: 98
    Member since: August 30, 2018

    Dear Support,

    Will you help me make my header sticky on scroll please? I am suing SKT Golf theme and my website link is https://kevinorieux.com/.

    I have used myStickymenu plugin to make it working. However, I prefer some css code so I can learn how it works well and avoid an additional plugin on my website.

    Thanks

    #125006
    nahumpfrancisnahumpfrancis
    Participant
    • Topics: 31
    • Replies: 67
    • Total: 98
    Member since: August 30, 2018

    On scroll, the section headings are visible and look weird when I use a plugin so I would like to use some sort of css code to fix this issue.

    Please refer to the image.

    https://imgur.com/o7YkPqO

    #125057
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30977
    • Total: 30977
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    .header { z-index:99999999 !important;}

    Regards,
    Chris

    #125078
    nahumpfrancisnahumpfrancis
    Participant
    • Topics: 31
    • Replies: 67
    • Total: 98
    Member since: August 30, 2018

    Hi Chris,

    It doesn’t work somehow. I want my header to be sticky on scroll, please.

    Thanks

    #125108
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30977
    • Total: 30977
    Member since: August 16, 2013

    Hi,

    Kindly use this one

    .header { position:fixed !important;}
    #slidera { margin-top:65px !important;}

    Regards,
    Chris

    #125139
    nahumpfrancisnahumpfrancis
    Participant
    • Topics: 31
    • Replies: 67
    • Total: 98
    Member since: August 30, 2018

    Thank you very much Chris,

    However, it is having the same issue I had with the plugin. It seems like the home top bar is transparent in most cases.

    https://kevinorieux.com/

    Thanks

    #125140
    nahumpfrancisnahumpfrancis
    Participant
    • Topics: 31
    • Replies: 67
    • Total: 98
    Member since: August 30, 2018

    https://imgur.com/o7YkPqO

    #125210
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30977
    • Total: 30977
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    .header { z-index:99999999 !important;}

    Regards,
    Chris

    #125300
    nahumpfrancisnahumpfrancis
    Participant
    • Topics: 31
    • Replies: 67
    • Total: 98
    Member since: August 30, 2018

    Thanks Chris. It worked. I really appreciate your help!

    #125318
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30977
    • Total: 30977
    Member since: August 16, 2013

    Hi nahumpfrancis,

    If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/22/

    Regards,
    Chris

    #125634
    nahumpfrancisnahumpfrancis
    Participant
    • Topics: 31
    • Replies: 67
    • Total: 98
    Member since: August 30, 2018

    Hello Chris,

    I have noticed one issue when I use this code. My slider wont show proper way if I use sticky header. Can you help me solve the issue please. Thanks.

    Please refer the both images. First one without sticky header and second one with sticky header.

    without sticky header
    https://imgur.com/F2OeFHl

    with sticky header
    https://imgur.com/jLVlnqh

    Please help me fix this!
    Thanks

    F.Y.I : I have reviewed your theme already, thats why I did not respond to the message.

    #125676
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30977
    • Total: 30977
    Member since: August 16, 2013

    Hi,

    Kindly use this one

    @media screen and (max-width:479px) {
    .slider-wrapper { margin-top:80px;}
    }

    Regards,
    Chris

    #125695
    nahumpfrancisnahumpfrancis
    Participant
    • Topics: 31
    • Replies: 67
    • Total: 98
    Member since: August 30, 2018

    Thanks Chris. It worked. I really appreciate your help….

    #125768
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30977
    • Total: 30977
    Member since: August 16, 2013

    🙂

    #126117
    nahumpfrancisnahumpfrancis
    Participant
    • Topics: 31
    • Replies: 67
    • Total: 98
    Member since: August 30, 2018

    Hello Chris,

    I have tried the above codes on another site and the slider is not showing well. In another words, the slider show gray extra space on the slider below on iPads…

    https://imgur.com/OSs9WR2..

    Please help me fix this. I tried to play around with the px values and still having the issue…

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