Transparent header and scrolling - Forum | JoomShaper
Solved Helix Framework

Transparent header and scrolling

Asked by Edze de Boer 3 years ago Last activity 3 years ago

http://109.71.54.97/~certaina/

To avoid conflicts, at the moment this website does not use a custom.css file in /templates/shaper_helixultimate/css/

I am trying to imitate the WordPress website www.certainanimals.nl in a Joomla 4 website:
http://109.71.54.97/~certaina/

You already helped me to place this code in Template Options - Custom Code - Custom CSS :

#sp-top-bar {
    position: absolute !important;
    background: rgba(0,0,0,0.0) !important;
}

#sp-header {
    position: absolute !important;
    background: rgba(0,0,0,0.0) !important;
   box-shadow: unset !important;
}

In Template Options - Basic - Header the Sticky header is active.
However, when scrolling down the main menu disappears at the top.
It should be visible because of the chosen Sticky Header.

What do I do to correct this?

Kind regards,
Edze de Boer

Accepted answer

Marked as the solution
Pavel

Here is

#sp-header.header-sticky {
    background-color: #000;
}

5 more replies

Pavel
3 years ago · edited

Hi. Delete !important

Never use !important if this is not necessary or you don’t know exactly for what.

Always at the start use the code without !important and only if you are sure of the correct code and it still does not work, add !important

Edze de Boer Asked this

Hi Pavel,

Thank you for your answer!
To make it even more perfect, is it possible to make the header background not-transparent when starting to scroll down?

Now the text on the pages is "blending" with the main menu items.

https://www.screencast.com/t/OWaC2wa5U

Kind regards,
Edze

Edze de Boer Asked this

Hi Pavel,

Wonderful!
I will have to make a list of all your (and your colleague's) tips and tricks...

Kind regards,
Edze

Pavel

Glad was to help.

(and your colleague's)

I'm not Joomshaper team member :)

Mehtaz Afsana Borsha Staff

Hi

Sorry for the delay but thanks Pavel for helping him.

-Regards.

Log in to reply.