Solved Templates

I need the header to be transparent in its first visualization

Asked by Mauricio Valdez 3 years ago Last activity 1 year ago

Hi

In the Wimble template I need the header to be transparent in its first visualization and once it is lowered with the mouse down, the header is blank, (the latter already does and good)...

I am attaching two images of this and in the first image it is presented in a gray fade which I do not need, what I require is that it be transparent, as it is when originally installed.

https://1drv.ms/u/s!ArQUV051UxWYgaGtVNfx566FXpX0VOs?e=ZeXEdc
https://1drv.ms/u/s!ArQUV051UxWYgaGtVNfx566FXpX0VOs?e=GAgUl2

If you send me a custom code for me to include it, it would help me a lot!...

Thanks...

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
3 years ago

Hi

Thanks for contacting us. Use this custom CSS

body.default-home #sp-header.transparent-header{
    background-image: none !important;
    background-color: transparent !important;
}
body.default-home #sp-header.transparent-header.header-sticky{
    background-color:white !important;
}

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.

-Regards.

14 more replies

Oldest first Newest first Most helpful
Mauricio Valdez Asked this
3 years ago

Thanks so much!.... it works!...

Mehtaz Afsana Borsha Staff
3 years ago

You are most welcome.

Mauricio Valdez Asked this
1 year ago

Hello Mehtaz Afsana

I'm using the WIMBLE template again, and I'm experiencing the problem again: the top menu area isn't transparent.

I already applied the CSS code you provided me two years ago. I also applied it to this new template in Joomla 5.3.1, and it doesn't work.

Is there new code you could provide me, please, to customize that template?

Mehtaz Afsana Borsha Staff
1 year ago

Hi

You can use this CSS in your custom.css file

#sp-header {
    position: absolute !important;
    background: rgba(0, 0, 0, 0.1) !important;
}
Mauricio Valdez Asked this
1 year ago

Thanks so much!.... it works!... you saveme Mehtaz Afsana!!... Thanks...

Mehtaz Afsana Borsha Staff
1 year ago

Glad to know that and you are most welcome.

Mauricio Valdez Asked this
1 year ago

Hi Mehtaz Afsana

The code you gave me helped me a lot, but since I'm not very familiar with the configuration of CSS files, I've now lost the ability to make the top bar, where the menu is, stay fixed while scrolling down, and the letters have turned black (I don't want to change the color customization because I've previously made some adjustments and they haven't turned out quite right).

I'm attaching three images of what I'm telling you.

That's why I ask you to please add the lines of code to the code you kindly gave me that keep the top bar fixed while scrolling and make the letters transparent.

![https://1drv.ms/f/s!ArQUV051UxWYgrfBDe_Djj_0R9V6wfo?e=ad3keD]
(https://1drv.ms/f/s!ArQUV051UxWYgrfBDe_Djj_0R9V6wfo?e=ad3keD)

Mehtaz Afsana Borsha Staff
1 year ago · edited

If you want to fixed the header then you have to remove the position absolute from the header. 

#sp-header {
    position: absolute !important;

}

You have to remove this portion of code but if you remove position absolute then the header will not be transparent, you can use opacity on them. Because when header is in Relative position or fixed position, therefore you can see body background color through Header. So this is the case.

Mauricio Valdez Asked this
1 year ago

Thank you so much for the information, Mehtaz Afsana.

It's really helpful. The transparency where the menu is located was already achieved with the codes you sent me, and I was able to manipulate the transparency a bit, as you mentioned.

There are only two things I can't seem to do: pin the menu to the top and make the text white.

It's clear to me that these are minimal details, and I kept looking until I got them. I don't want to waste your time with minor details.

The last question is, do you know if you have the original code, just as the template comes once it's installed? The template works perfectly once installed.

Due to design manipulation and for reasons unknown to me, the top bar where the menu is located was changed, or I changed it myself due to a lack of knowledge (there's no doubt about that), and it no longer displays as it originally did once the template was installed.

Is there original code I could copy and paste into the CSS customization to make it work like the original template?

If not, I'll understand, and I'd be very grateful for the help, Mehtaz Afsana.

Thanks, realy Thanks.

Mehtaz Afsana Borsha Staff
1 year ago

Hi

Do you want this effect?

https://prnt.sc/qjOBYoCqbbet

You can then try this CSS in your custom.css file

#sp-header {
    position: fixed !important;
    background: rgba(0, 0, 0, 0.2) !important;
}
.sp-megamenu-parent>li>a {
    color: #fff !important;
}
Log in to reply.