X-Pro Hero Header with transparent sticky top bar

[stuartmurphy]

Having issues with sorting out a transparent top bar changing to solid background on scoll (and also making it slow when it works),

The challenge is that it appears as working in Pro but not in a browser (safari or firefox)

Setup as follows:
Bar 1: container (logo element left, inline nav element right)
sticky bar on.
Bar 2 - bar contains background hero image.

CSS only used on page:

Bar 1: classes used are topbarSM and topbarSMblue
Bar 2: (CustHeroImg is hero image)

.CustHeroImg {
margin-top: 0px;
}

.topbarSM {
background-color: transparent;
border: 0;
box-shadow: none;
position: fixed;
width: 100%;
}

.topbarSMblue {
background-color: black;
transition: all 0.3s ease 0s;
}

Why does this work within the header area (like it should) bur even when cached in Safari and Chrome, there is no dark navbar -

[stuartmurphy]

@stuartmurphy

.CustHeroImg {
margin-top: 0px;
}

Please ignore the reference to .CustHeroImg {
margin-top: 0px;
}

This is only present to adjust the hero background image once I get this working correctly. Thanks.

[rad]

Hi @stuartmurphy,

Thanks for reaching out.

I couldn’t find the site that has this issue. I assume you’re working on two separate header due to class name. Is it trigger by custom javascript? Please provide a sample URL where we can test it.

Thanks!

[stuartmurphy]

Hi,

I sent a PM around 5-days ago. Any update please?

[thai]

Hi @stuartmurphy,

Next time, you should use the Secure Note button:

The other staffs couldn’t see the private message you sent to Rad.

Thank you.

[thai]

Hi @stuartmurphy,

I could see that both topbarSM and topbarSMblue classes have been assigned to your bar on loading, so it shouldn’t work as intended.

To change the solid background when scroll down, please also add this custom CSS:

.topbarSM.x-bar-fixed {
    background: rgba(0, 0, 0, 0.75) !important;
}

Let us know how it goes!

[stuartmurphy]

Thanks. That works first time and really helpful. Even better with delay/ease in too! Thanks.

What does appending “.x-bar-fixed” directly to the class do?

[friech]

Hi @stuartmurphy,

That means the given CSS will only trigger when both .topbarSM and .x-bar-fixed class is present to the div. Which only happen when you scroll.

Cheers,

[stuartmurphy]

Thanks. Perfect and very impressed!

[rad]

You’re most welcome!