Disable Header background fade in

Hallo everyone,

I use the sydneytheme for my website and it looks really great. I’m tring to disable the header backround from fading away if you scroll to the top.
I hope there is a way to get this to work.

My url is www.alexklusive.de

Thanks alot.

Hi, apply custom css below, you can use simple custom css plugin or place it in style.css of your child theme:

.site-header.fixed {
    background-color: rgba(255, 255, 255, 1.0) !important;
    border-bottom: 1px solid !important;
    padding: 20px !important;
}

Hey dimikjones,

Thank you very much that works. The only thing is that The headerbar is also showing on mobile devices now. Thats fine for the Ipad but for smaller screens the header bar overlaps the header and also the menu icon which is located under the logo in the mobile version.

I tried some plugins which hide divs on a certin size. But it was not working. Is there a way to do that via css?

Thanks very much

Try custom css below:

@media only screen and (max-width: 647px) {
    .text-slider-section {
        top: 65%;
    }
}

Hello,
Thank alot!
I tried this and its good get the text of the slider in the correct position for mobile phones. But the white background of the menu is still showing up on mobile devices.

So which div is the right one to hide the white bar on mobile devices?

To hide white background behind logo and menu on mobile use code below:

@media only screen and (max-width: 647px) {
    .site-header.fixed {
        background-color: rgba(255, 255, 255, 0)
         !important;
    }
}

Thant worked with a little trick. I had to remove the !important from the normal .site-header.fixed css because otherwise the mobile !important gets ignored

Thanks problem solved :wink:

Hi I’m trying to keep the header bar background black rather than fading to transparent when i scroll to the top of the page.
I hope there’s a way to do this.

my url: http://upnunderwatersports.com

Cheers

@nick@bixmanor.co.uk

Hi there,

Please post new topic for your own questions in future since someone will answer more quickly. In order to have background menu color on top apply custom css code below:

.site-header.fixed {
    background-color: rgba(0,0,0,0.9);
}

and result should look like this https://www.screencast.com/t/Kvlms5KYXkJT

Best Regards!