Header Transparency - Question | JoomShaper

Header Transparency

DS

DMG Support

Template 4 years ago

New Site http://www.haweddingplanner.com/dev/

I had you adjust that header so the logo could be bigger. Now customer has chosen to do an opening video and the header for transparency and color is off. Can you advise? I assume when opening it is grey because the background of the video is white?? Perhaps I can just make it black but then it is not transparent on scroll down. Help please. Thanks

http://i.prnt.sc/cScPUSFKQ9mZGYY7WPM3pA.jpg http://i.prnt.sc/HBZhCDWkSn_A4yLlAKpVkQ.jpg

Sorry for all the questions. I am learning your sp page builder and templates so hopefully I won't ask too many more.

0
14 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #26788

Hi,

Glad that you have sorted it out.

I thought you want the header fully transparent while scrolled. So that I have given you that CSS, which turns the header background transperant and then the menu items also seems dimmed as they are white colored:)

No issues:)

You may accept the most useful answer to close the post.

Best Regards

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #26705

Hi there!

No issues at all.

We are happy to help:)

Let me have a look...

0
DS
DMG Support
Accepted Answer
4 years ago #26706

I don't think lighshot is working because the attachments to give you a pic isn't allowing me now. Just open the site however and you can see how the color is off.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #26708

You want the header as transperant while scrolled, right?

0
DS
DMG Support
Accepted Answer
4 years ago #26709

Yes would prefer that if possible.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #26711

Hi,

You can use the following code in your custom.css file to get the sticky header background as transperant:

#sp-header.header-sticky {
    background-color: rgba(14, 17, 22, 0);
}

Please let me know if it suits you. You would need to change the menu colors too then as they are white now!

Best Regards

0
DS
DMG Support
Accepted Answer
4 years ago #26714

I can do that but the issue I have is as the video plays and you get past that first white wedding one then the top is gray and the bottom is black and transparent as it should be. I can't get lightshot to open now or I could give you a screen shot. I don't know how to fix the very top that is grey

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #26715

You can use other online tools too as imgur.

Here is the link:

https://imgur.com/upload

0
DS
DMG Support
Accepted Answer
4 years ago #26716

[https://imgur.com/LmysZBz]

Ok so I just moved that video down so it is not under it. All pages are good except home page still pulling that grey color??

0
DS
DMG Support
Accepted Answer
4 years ago #26717

It is only the home page, the rest of the pages pull fine. Since I moved the video down some and not under it can we fix that header now? https://imgur.com/w29LfKg

Just the home page and make it black the transparency still works great when you scroll down. Am I making any sense here lol??

0
DS
DMG Support
Accepted Answer
4 years ago #26720

I am able to get to it here from the inspect, change the color and the opacity but no idea of where these settings are in the css https://imgur.com/wG1hJOG

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #26721

Hi,

I have given you the CSS already before.

Did you try that, please?

If you are unsure I will try to put that for you.

And one more thing, the websites looks different and fine at my end.

Please check the screenshots:

Header before scroll: http://i.prntscr.com/uXneiXqbTN6K-sdYDZ6Zcg.png

Header after scroll: http://i.prntscr.com/sSJbmSVLRqKPe2u37D3Mhw.png

Best Regards

0
DS
DMG Support
Accepted Answer
4 years ago #26723

Yes I did your css and that turned it white, I don't want it white I want it black. I will try and figure it out.

0
DS
DMG Support
Accepted Answer
4 years ago #26724

I got it. All I needed to do was change the style color in the header. Wow, I should have looked there first. Thanks for your help.

0