We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Header transition glitch

Featured Lock Resolved Issue
I am trying to get a transparent header menu to smoothly fade (transition) to an opaque color when scrolling down the page (like the template Giver)

I have it basically working, but the effect is not smooth. When scrolling begins, a white header/menu pops up for a fraction of a second which ruins the effect...then disappears for the transition. I don't know code so my attempts to solve this is beyond my knowledge.

I've seen a lot of transparent examples offered, but can't find the one that completely replicates the menu like Giver. Any help would be much appreciated. Here is my code I've cobbled together:

#sp-header {background: transparent;
position: absolute;
transition: 2s;
#sp-header + section .sp-page-builder .page-content #section-id-1533301688406 {
padding-top: 110px !important;
#sp-header.header-sticky {
background: #3333cc;
#sp-header.header-sticky .logo-image {
background: #8282822e;

2 Answers

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Could you please share your site URL? So that I can check.
-Best Regards


More than a month ago #Permalink
Thanks for responding, here's the site:

There are no replies made for this post yet.
Be one of the first to reply to this post!




Community Users


Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us