Solved Templates

Why isn't the WIMBLE template top bar, transparent?

Asked by Nader A. 3 years ago Last activity 3 years ago

Hello - Why is the Wimble top bar not transparent? I recently installed the quick start package for Wimble. Any idea what I need to change to fix this? My login information is in the hidden field. Please check it out and let me know.

http://jondavidsalon.net/screenshots/bannerss1.png

http://jondavidsalon.net/screenshots/bannerss2.png

Thanks,
Nader

Accepted answer

Marked as the solution

Pavel

3 years ago

Then add also this code

#sp-header {
    background-color: transparent;
}
#sp-header.header-sticky {
    background-color: #fff;
}

12 more replies

Mehtaz Afsana Borsha Staff

3 years ago

Thanks for contacting us. Use this custom CSS

#sp-header {
    background: transparent !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.

Nader A. Asked this

3 years ago · edited

Updated: Mehtaz resolved the issue.

Nader A. Asked this

3 years ago

Thanks, Mehtaz. Just saw your reply.

Nader

Mehtaz Afsana Borsha Staff

3 years ago

You are always welcome.

Nader A. Asked this

3 years ago · edited

Hi Mehtaz,

Although it became transparent when at the top of the page, I now cannot get the top banner to show when I scroll. Once I scroll, it should change to a white background and the logo and text should use inverse colors (black). How do I fix this?

http://jondavidsalon.net/screenshots/scroll.png

Thanks,
Nader

Mehtaz Afsana Borsha Staff

3 years ago

Please delte my previous CSS and use this one

#sp-header.transparent-header .sp-megamenu-parent>li>a {
    color: #000 !important;
}

body.default-home #sp-header.transparent-header{
    background-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}

Nader A. Asked this

3 years ago · edited

I did, but now the top header isn't transparent anymore. It works when scrolling now, but is no longer trasparent when at the top of the page. Please log in and check it out.

http://jondavidsalon.net/screenshots/wrong.png

http://jondavidsalon.net/screenshots/right.png

Nader

Nader A. Asked this

3 years ago

Hello? I need help here please. I'm just trying to get the template to operate as advertised. Please see message above. Need a resolution so that I can continue building my site.

Thanks.

Pavel

3 years ago · edited

Hi. I am not a member of the JoomShaper team, so I have no access to your site. But judging by the Wimble Template demo, instead of the whole code that Mehtaz provided, try this code

body.default-home #sp-header.transparent-header {
    background-image: none;
}

Nader A. Asked this

3 years ago · edited

Thanks, Pavel. I tried that, but the background of the top bar when at the top of the page is white when I do this. It's weir and I don't understand why. When I scroll, it's fine and works as expected, but when at the top of the page, it just doesn't work like it shows in the template.

http://jondavidsalon.net/screenshots/topbar.png

Any other ideas?

Nader

In the docs