Change header button color on scroll

How To
1

Hi all, I’m trying to get a button inside of my sticky header to change colour on scroll. Can’t seem to find any good ways to do this. I’ve tried the following code from a similar-ish forum post, but it doesn’t work in my case.

#brx-header.scrolling .brxe-buttonid {
color: #ffffff;
background-color: #24365c;
}

In the screen shot you can see my issue. The CTA button looks good on the hero section, but needs to swap text and background colours on scroll.

Any help would be amazing!

Screenshot 2567-09-18 at 21.56.16
Screenshot 2567-09-18 at 21.56.161772×1360 121 KB

2

Hi!

Can you share a link?

It is easy to do, but you may have some sort of targeting error in your CSS.

Inspecting your HTML structure would help a lot!

There have to be something wrong with the “.brxe-buttonid”:

#brx-header.scrolling .brxe-buttonid {
color: #ffffff;
background-color: #24365c;
}

Are you sure this is a class? Or is the id of the button? If it is an id, then you need to target it with #, not a dot.

In fact, if the button is part of the main navigation, it should be an <li> in the main nav <ul>.

The structure, although that simplified, should be something like this:

<header id="brxe-header">
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__list-item"><a href="#">Menu item</a></li>
<li class="main-nav__list-item"><a href="#">Menu item</a></li>
<li class="main-nav__list-item btn--primary"><a href="#">Menu item</a></li>
</ul></nav>
</header>

So, you would target the button in your CSS like this:

#brxe-header.scrolling .main-nav .btn-primary {
color: #ffffff;
background-color: #24365c;
}

Hope this helps clear this up :slight_smile:

3

Thank you so much!

I’ve had a go at this method, but can’t seem to get it right.

Here’s the URL: CPG Bunkering – Bunkering Services in Maputo & Nacala

4

Hey there! Can you tell me how you were able to get the menu text to change to a darker color on scroll?