Header transparency to opaque on scroll

Support
#1

I’m trying to create a “Transparent Fixed Header, Non Transparent on scroll”.

I’ve added the code referenced here - but nothing is happening - please advise

#2

Hello There,

Thanks for writing in! The code in the given thread may not be applicable in your site. Could you please provide us the url of your site so that we can take a closer look? Please provide access if you may have set your site in under construction mode.

Thank you in advance.

#3

Thx for the response - here’s the site URL
https://johnroach4life.com/
the site is live -

#4

Hello There,

Thanks for providing the url of your site. Since you are using custom header, please set the initial position of the bar as absolute and turn on the sticky bar option.

And then in the css section, please insert this code:

.x-bar.x-bar-absolute{
    background-color: hsla(276, 6%, 63%, 0.15) !important;
    transition: background 0.5s ease;
}

.x-bar.x-bar-fixed{
    background-color: hsla(276, 6%, 63%, 1) !important;
}

Please let us know if this works out for you.

#5

Hello - thx for the guidance :slight_smile:

the added the custom css and applied the absolute/sticky options - but it’s not working.

I noticed the text is missing - and on scroll appears though.

What I would like is the text to be white initially and to always be there - and on scroll - the background moved from transparent to solid.

please advise - thx again

#6

Hello There,

Thanks for updating in! Please make use of this code instead:

.x-bar.x-bar-absolute{
    background-color: hsla(276, 6%, 63%, 0.15) !important;
    transition: background 0.5s ease;
}

.x-bar.x-bar-fixed{
    background-color: hsla(276, 6%, 63%, 1) !important;
}

.x-bar [class^="x-bg"] {
    background-color: transparent !important;
}

.x-bar.x-bar-absolute .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
    color: #fff;
}

.x-bar.x-bar-fixed .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
    color: #000;
}

Hope this helps. Please let us know how it goes.

#7

thanks again for the insight - we’re almost there -but there’s a delay for the text to appear - it should all load at the same time.

Thx you!

#8

Hi,

Can you provide us your wordpress admin login in Secure Note so we can check your header settings.

Thanks

#9

Here you go - thx!

#10

Hello There,

Thanks for providing the information. The delay is because of the transition added in the code transition: background 0.5s ease;. You can remove it or set it to zero or none.

.x-bar.x-bar-absolute{
    background-color: hsla(276, 6%, 63%, 0.15) !important;
    transition: none !important;
}

.x-bar.x-bar-fixed{
    background-color: hsla(276, 6%, 63%, 1) !important;
}

.x-bar [class^="x-bg"] {
    background-color: transparent !important;
}

.x-bar.x-bar-absolute .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
    color: #fff;
}

.x-bar.x-bar-fixed .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
    color: #000;
}

Please let us know how it goes.

#11

thx for the response;)

i made the changes - but there is still a delay - thoughts?

thx again

#12

Hello There,

Thanks for updating in! We will add more transitions to the code. Use this code instead:

.x-bar.x-bar-absolute{
    background-color: hsla(276, 6%, 63%, 0.15) !important;
    transition: none !important;
}

.x-bar.x-bar-fixed{
    background-color: hsla(276, 6%, 63%, 1) !important;
}

.x-bar [class^="x-bg"] {
    background-color: transparent !important;
}

.x-bar.x-bar-absolute .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
    color: #fff;
    transition: none !important;
}

.x-bar.x-bar-fixed .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
    color: #000;
    transition: none !important;
}

Hope this helps. Please let us know how it goes.

#13

thanks again for the support - there is still a delay even with the new code = please advise - thx!

#14

Hi again,

Can you please try adding the following code as well:

.x-anchor, .x-anchor-text-primary, .x-anchor-text-secondary, .x-anchor-graphic-icon, .x-anchor-graphic-image, .x-anchor-graphic-toggle, .x-anchor-sub-indicator {
    transition-duration: 0s !important;
    transition: none !important;
}

Let us know how this goes!

#15

Still no go;(

Thanks for your patience - could it be something with the overall text? all the text on the page has the delay - thoughts?

#16

Hello There,

Thanks for updating in! If I am not mistaken, I am no longer seeing any slight delay. The color of the text changes from white to black as soon as you scroll the page.

Hope this helps.

#17

thanks again for the support - heres a screencast - still delay:
screencast

#18

Hi again,

The delay is being added by the TypeKit extension. I see an error related to TypeKit, make sure you’ve setup the extension correctly, for reference please see https://theme.co/apex/forum/t/extension-typekit/88 Your TypeKit ID looks invalid since no kit information is seen below. Either disable the extension or enter a valid ID.

Hope this helps!

#19

YES!!! It worked!!!

thank you!

#20

You’re welcome! :slight_smile: