Transparency Of Headers On Templates - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Transparency Of Headers On Templates

Alberto Bonello

Alberto Bonello

Helix Framework 3 years ago

How can I make the header transparent and change opacity when using a sticky header.

0
12 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #62935

Hi

Thanks for contacting us. Youv can use custom CSS for that. If you need any help just ping me here. Dont forget to give me your site URL and also screenshot of that portion.

-Regards.

0
Alberto Bonello
Alberto Bonello
Accepted Answer
3 years ago #63188

Yes, I will like assistance with the custom CSS. Thanks

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #63232

Hi

Use this custom CSS

#sp-header.header-sticky{
    opacity: 0.75;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

0
Alberto Bonello
Alberto Bonello
Accepted Answer
3 years ago #63297

Thank you for the answer, but what I need to do is to have is a tranparent menu like POLITICO. I do not want to have the white color behind the menu.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #63418

Where is POLITICO? Please give me the link.

0
Alberto Bonello
Alberto Bonello
Accepted Answer
3 years ago #63452

I worte the wrong name of the thempalte ia called POLITICAS and is one of the ones you offer in your site. I have tried to make it transparent and even changed templates, but I can't. It is beyond my skills. I am a designer not a coder.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #63661

Hi

Do you wnt it like this?

https://prnt.sc/gcYVxH8x8Wbs

0
Alberto Bonello
Alberto Bonello
Accepted Answer
3 years ago #63683

I have resilved the issue from an article in the internet. Tha only problem I need help is that when the header is transparent I need the menu text to be white. Right know I can not see part of the menu becausethe font is black. see photo below. https://www.dropbox.com/s/fuj7ntcnv2ke54q/Screen%20Shot%202022-03-28%20at%206.54.03%20AM.png?dl=0

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #63804

Ok then use this custom CSS

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a{
    color:white !important;
}
0
Alberto Bonello
Alberto Bonello
Accepted Answer
3 years ago #63806

well it worked to change the color to white, but know the sticky header has white text and you can't see it.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #63861

I think you should change the font color from white to different color otherwise you will get more issues, like your dropdown background color is also white and the header sticky menu color is also white. Your different page is also white. So if you set the menu color white then you have to change so many things. It's better you should change the font color from white to different color.

Hope you understand.

Thanks

0
Alberto Bonello
Alberto Bonello
Accepted Answer
3 years ago #63929

Hello. all I need the website is to work like the demo, and it is not doing that. Your code is changing the font to white and that is why I can't see the text. Please, just make it work like the demo. See pic below. thanks. I have tried the code you sent and it is not working.

https://www.dropbox.com/s/5kgj5qby9dmhj2x/front.png?dl=0

https://www.dropbox.com/s/h8ym5dxjox7cl0p/later.png?dl=0

0