Home › Forums › Space themes support forum › Change color sticky header

Change color sticky header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 5, 2025 at 4:57 pm #643115

    eilandstijl.nl
    Participant

    Hi!

    I choose to use the overlap header for a transparant effect. On scroll a sticky header with a grey background appears, that’s how I want it. However, i want to change the background color of these sticky header to this color: #92967c. How can i do that? When I change the background color in the header settings, the transparent effect is gone. I tried custom CSS but it did not work.

    https://studio-eilandstijl.nl/hotelam/home-3/

    }
    body .whb-sticked .whb-general-header {
    background-color:#92967c;
    }

    March 5, 2025 at 5:24 pm #643128

    Luke Nielsen
    Keymaster

    Hello,

    Please use the custom below instead:

    body .xts-sticked .xts-general-header {
background-color:#92967c;
}

    Kind Regards

    • This reply was modified 5 days, 5 hours ago by Luke Nielsen.
    March 8, 2025 at 7:54 pm #644144

    eilandstijl.nl
    Participant

    Yes, thanks! Looks great.

    Another question: I also want to change the background color of the mobile bottom navigation. Background color #92967c and the text and icon #F3F4EA. I found some custom CSS for the woodmart theme but that one didn’t work for the Mars theme.

    March 10, 2025 at 4:39 pm #644544

    Artem Temos
    Keymaster

    Try to use the following code snippet

    .xts-sticky-navbar {
 background-color: #92967c;
}

.xts-sticky-navbar a {
 color: #F3F4EA;
}

.xts-sticky-navbar a:hover {
 color: #FFFFFF;
}

.xts-cart-count span {
 display: none;
}
  • Author
    Posts

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)