Header text and background colour change

Hi,

could anyone tell me how to change the colour of header background from transparent into white and text from white to black when I scroll the page. The proper css code for background I found here https://athemes.com/forums/topic/placing-a-white-banner-behind-logo/ but I can’t find a solution for text. (I run stansard version of Sydney)

Thanks in advance !

Hello Excel,

Can you please provide a link to your website to let me inspect it?

Kind Regards, Roman.

Hi Roman,

http://excelraport.pl/

Roman,

do you think this change is possible ?

Hello Excel,

Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (min-width: 1025px) {
    header.site-header.fixed.float-header {
        background-color: transparent;
    }

    header.site-header.fixed.float-header .site-title a,
    header.site-header.fixed.float-header .site-title a:hover,
    header.site-header.fixed.float-header .site-description,
    header.site-header.fixed.float-header #mainnav > div > ul > li > a {
        color: black;
    }
}

Kind Regards, Roman.

Roman,

you are fantastic ! Works exactly as I want.

Many thanks !

Can I ask you one more question ?

Is it possible to add one more feature, I mean a smooth grey line under the header background ?

The line should appear when the header become white

/* Enter Your Custom CSS Here */
.page header.entry-header {
  display: none;
}

@media only screen and (min-width: 1025px) {
    header.site-header.fixed {
        background-color: white !important;
    }

    header.site-header.fixed.float-header .site-title a,
    header.site-header.fixed.float-header .site-title a:hover,
    header.site-header.fixed.float-header .site-description,
    header.site-header.fixed.float-header #mainnav > div > ul > li > a {
        color: black;
    }
}

Roman,

I don’t know why this css code works when I 'm in wordpress admin mode, but it doesn’t when I open the page on browser. I mean the background is all time white not transparent at the top of the page.

@media only screen and (min-width: 1025px) {
    header.site-header.fixed.float-header {
        background-color: white !important;
    }

    header.site-header.fixed.float-header .site-title a,
    header.site-header.fixed.float-header .site-title a:hover,
    header.site-header.fixed.float-header .site-description,
    header.site-header.fixed.float-header #mainnav > div > ul > li > a {
        color: black;
    }
}

ok now it works I miss .float-header. Sorry !

Roman,

to summarise I would be very grateful if you add this 2 features:

  1. a border smooth grey line in the bottom of header when it becomes white

  2. a mouseover effect for menu items (it works proper when the header is not white)

Regards,

Paul

Hello Paul,

1. It looks like you have already added lightgrey bottom border below header.

2. Please try to use this custom CSS code instead of previous in order to add hover color:

@media only screen and (min-width: 1025px) {
    header.site-header.fixed.float-header {
        background-color: transparent;
    }

    header.site-header.fixed.float-header .site-title a,
    header.site-header.fixed.float-header .site-description,
    header.site-header.fixed.float-header #mainnav > div > ul > li > a {
        color: black;
    }

    header.site-header.fixed.float-header .site-title a:hover,
    header.site-header.fixed.float-header #mainnav > div > ul > li > a:hover {
        color: #d65050;
    }
}

Kind Regards, Roman.

Roman,

now is perfect. Thank you once again !!!

You are welcome Paul! :slight_smile:

Kind Regards, Roman.