How to let head and footer background-color Transparent.

Dear all

How to let head and footer Transparent?I want put the background-color: rgba(0,0,0,0.5),but sparkling options here can’t to select .

can you advise the solution ?

Thanks

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
well, it can have transparent color but im not sure this is everything you wanted, so, tell me what is your goal :slight_smile:
please add this css code in appearance > customize > additional css:

.navbar.navbar-default {
background-color: #3636366e;
}
#footer-area {
    background-color: rgba(49, 50, 51, 0.5);
}

Thanks!
Colorlib Support Team

Thanks Noda

The code work on head only . the footer no effect.please help

and the Secondary menu also need the effect Transparent.

Thanks

Hi there

i need to see your live website, please provide url and i will take a look :slight_smile:

Hello there,

The following CSS should help:


/*Footer BG color*/
#colophon {
    background-color: rgba(0, 0, 0, 0.5);
}

.dropdown-menu {
    background-color: rgba(0, 0, 0, 0.5);
}

Best Regards,
Support

HI

My site URL:acgpitpot.com
ACG free music tabs

Thanks

HI
The code work in Secondary menu , but footer also no have the effect,please help.

Thanks

Hello there,

Please try using this CSS for the menu tabs:


ul.nav li.dropdown:hover > ul.dropdown-menu {
    background-color: rgba(0, 0, 0, 0.5);
}

Best Regards,
Support

HI

Is working.

Now only Footer no effect.please help

Thanks

Hello there,

I provided the following CSS before:


#colophon {
    background-color: rgba(0, 0, 0, 0.5);
}

Have you tried it out?

Best Regards,
Support

Hello there,

I provided the following CSS before:


#colophon {
    background-color: rgba(0, 0, 0, 0.5);
}

Have you tried it out?

Best Regards,
Support

HI

i already tried it,that no have effect

Thanks

Hello there,

Thanks for telling me.

Please remove the previous CSS that is not working and try using this CSS code:


#footer-area {
    background-color: rgba(0, 0, 0, 0.5);
}

Best Regards,
Support

HI

Same no have the effect

Thanks

Hello there,

Strange, they both worked on the page during testing.

Please try out this set:


#footer-area {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

Best Regards,
Support

HI

I try revise the Style.css footer some code , now the code is working.

Many thanks for your help

Hello there,

Great, please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support