Header Colour

Hi,

May i know How to make my other pages to become header with back colour(with transparency) rather than only appear when i roll down as same like my website homepage. Due to the white background will make my menu and logo not appear. Any code of for me to customise it?

http://theideashark.com

Thank you

Bryan Chin

Hi,

You can make your site-header’s color to the same color as the sticky menu ( black transparent ) with this Custom CSS:

.site-header {
    background-color: rgba(0,0,0,0.8) !important;
}

if you want to keep the homepage’s menu background transparent, then add this Custom CSS too:

.home .site-header {
    background-color: transparent !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

it has solved my issue. Thank you so much.

Bryan Chin

Hi Csaba,

I want to make the homepage like this
when i scroll down there is a black transparent header appear to make my menu clearer. only for homepage.

Can you advice some custom code?

Thank you

Bryan Chin

Hi Csaba,

I want to make the homepage like this
when i scroll down there is a black transparent header appear to make my menu clearer. only for homepage.

Can you advice some custom code?

Thank you

Bryan Chin

Hi Csaba,

sorry, i just duplicate my posts because i want to attached the demo link as below:

I want to make the homepage like this http://demo.athemes.com/sydney/

when i scroll down there is a black transparent header appear to make my menu clearer. only for homepage.

Can you advice me some custom code?

Thank you

Bryan Chin

Hi,

You have that background on your homepage or it disappears after applying the Custom CSS? If it have disappeared after applying the Custom CSS then I suggest to apply the Custom CSS then let me know, so I can check / give you a solution for that too.

Best Regards,
Csaba

Hi Caaba,

The header background is disappear or transparent after I applied the custome CSS.

It is okay the header background is disappear or transparent as I wish. But just the header background appear again when I scroll down as athemes demo- http://demo.athemes.com/sydney/

theideashark.com

Please help to take a look on my site and provide me the custome CSS.

Thank you so much.

Bryan Chin

Hi,

Please apply the Custom CSS I gave you previously, so I can check what caused that on homepage to make the background transparent ( as you described ), without seeing it, I can’t help, so please let me know after the previous Custom CSS was applied, so I can check the issue generated by that.

Best Regards,
Csaba

Hi Csaba,

I have applied the previous custom css code you give me previously and never deleted as images attached.

http://theideashark.com/screen-shot-2017-03-27-at-5-14-38-pm/

I want to make my homepage like the Athemes Sydney demo: http://demo.athemes.com/sydney/

The homepage is without header and the header only show when scroll down.

Please advice the custom css code.

Thank you

Bryan Chin

Hi,

Your menu is working exactly the same as on our demo, can you, please post a screenshot comparison between your menu and demo menu where it doesn’t look the same ( maybe I’m looking at a wrong place ).

Best Regards,
Csaba

Hi Csaba,

Please refer to the images link. The homepage is same without header. But when scroll down the Athemes sydney demo will appear a black background header to make the logo and menu clear. Whereas my header is total transparent even scroll down.

http://theideashark.com/screen-shot-2017-03-31-at-11-16-53-am/

http://theideashark.com/screen-shot-2017-03-31-at-11-17-03-am/

Please advice a custom CSS code to make it same like the athemes sydney demo.

Thank you

Bryan Chin

Hi,

Ok, now it’s clear what is the issue, my Custom CSS made the homepage menu transparent too, but you can fix that by adding this Custom CSS too, so it will make the homepage menu the same as it was:

.home .site-header.float-header {
    background-color: rgba(0,0,0,0.8) !important;
}

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

It’s works.

Thank you so much.

Bryan Chin

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba