Hello - thx for the guidance 
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
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.
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!
Hi,
Can you provide us your wordpress admin login in Secure Note so we can check your header settings.
Thanks
Here you go - thx!
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.
thx for the response;)
i made the changes - but there is still a delay - thoughts?
thx again
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.
thanks again for the support - there is still a delay even with the new code = please advise - thx!
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!
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?
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.
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!
YES!!! It worked!!!
thank you!
You’re welcome!
If I need to start a different thread I can and my pre-apologies but I want to accomplish something like this and have googled and searched the forum all night to no luck or being a novice-coder
On desktop I want a transparent header to start and then white on scroll … probably with the option for a variation of the client logo on the transparent header before scroll.
Site I’m developing lives at http://77.104.151.163/~timothyj/
I’m looking for something like the header effect on scroll that lives here https://right3.com/
Thanks!
Hi,
To achieve that you can ad the code below in Theme Options > JS
jQuery(function($) {
$(window).scroll(function (event) {
if( $(window).scrollTop()==0) {
$('.x-navbar').removeClass('x-navbar-fixed-top');
}
});
});
Then add this in Theme Options > CSS
@media(min-width: 980px) {
.home .masthead {
position:absolute;
width:100%;
background-color:transparent !important;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}
.home .x-navbar {
background-color:transparent !important;
}
.home .x-navbar.x-navbar-fixed-top {
background-color:#fff !important;
}
}
Hope that helps
Thanks so much! works great! … If I wanted to deploy a different logo and white header links while transparent and then back to what I have on scroll (kind of like this thread) … is that beyond the scope of help? … if so, thanks either way!
Hi,
Yes, that is outside the scope of support but to give you something to start with, you can change your current logo to make it more visible then add the code below in Theme Options > CSS
.home .x-navbar .desktop .x-nav > li > a {
color: #fff;
}
.home .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
color:#5a5a5a;
}
.home .x-navbar.x-navbar-fixed-to .x-brand.img {
width: 250px;
height: 63px;
background: url(http://77.104.151.163/~timothyj/wp-content/uploads/2018/10/Oconnor-Logo-1.png) top center no-repeat;
background-size: contain;
}
.home .x-navbar.x-navbar-fixed-to .x-brand img {
opacity:0
}
Hope that helps