Transparent header not working with sticky position

  • I have made my website transparent in appearance->customize and i am having problems making the header sticky and opaque on scroll. When i add additional CSS below, the header takes a white background and does not even stick. Sticky header works fine if i choose “minimal” header instead of transparent. How do i leave my transparent header setting and also enable sticky header with white background on scroll?

    #site-header{
position: sticky;
align-items: center;
top:-30px;
height:80px;
Z-index:1;
background-color: #FFFFFF;
}
#site-header-inner{
height:70px;
position: sticky;
top: 0;
padding-right: -300px;
padding-left: 0px;
}

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

Viewing 1 replies (of 1 total)

  • Hello @choicehomes,

    Thanks for using OceanWP.

    Unfortunately, this is a personalized feature request we’re not in the position to help you with. Our premium version includes a sticky header option which you can customize completely and effortlessly without any custom codes involved.

    You can still use the Ocean Stick Anything plugin to make your header sticky, but you will not be able to add any other customization through this plugin, nor effects: https://www.ads-software.com/plugins/ocean-stick-anything/.

    Hope this helps, and have fun building your website.
    Best Regards

Viewing 1 replies (of 1 total)
  • The topic ‘Transparent header not working with sticky position’ is closed to new replies.