Sticky Header background

[bigbangthinking]

Hi

I would like to make the Sticky Header background 100% transparent. The Theme options only work for the normal header and via the customize.php in WP I can´t do it as well. In the atached image you can see first the sticky header and then the normal header.

Thanks

http://www.bigbangthinking.com

[bigbangthinking]

O yeah !! Also to make the shadow of the sticky header dissapear as well.

🙂

[Swift Ideas – Ed]

Add this custom css:

#header-section:before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header, .ajax-search-wrap {
background: transparent!important;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

Hope that helps!

– Ed

[bigbangthinking]

Hi ED

Thanks! That does the job, but it also meakes the search background transparent.

How can I keep the search background white?

Thanks
Gonzalo

[Mohammad – SUPPORT]

Hi,
Please remove the class .ajax-search-wrap from code provided by Ed:
Current Code-

#header-section:before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header, .ajax-search-wrap {
background: transparent!important;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

Updated code –

#header-section:before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header {
background: transparent!important;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

Thanks 🙂
With Best Regards
Swift Ideas

[bigbangthinking]

Thanks

🙂

[Mohammad – SUPPORT]

Hi,
You most welcome . I’m glad that issue resolved .
Thanks 🙂
With Best Regards
Swift Ideas

[Evelyn]

Hi, I’d like to do the same with the body section, like have all background transparent just to leave the main background, what should i do? 🙂 thanks!

[Mohammad – SUPPORT]

Hi,
If you provide specific page url so i can provide to any possible solution.
Thanks 🙂
With Best Regards
Swift Ideas

[Evelyn]

This is the link:
http://thundernoterecords.com/hell/

Thanks!

[Mohammad – SUPPORT]

Hi,
Please try to use this custom css code :

.boxed-layout {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
 }

Hope that should work and let me know your feedback.

Thanks 🙂
With Best Regards
Swift Ideas

[Evelyn]

It’s not working, i used the code you provided above for the header it works but the content body is still showing the background. Thanks!

[Mohammad – SUPPORT]

Hi,
Please attach a marked screenshot mockup so i can give to you exact code.
Thanks

[Evelyn]

This is what I’m trying to accomplish with the background. Thanks!

[Mohammad – SUPPORT]

Hi,
Please try to put this custom css code :

#main-container,.boxed-layout ,.page-heading{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
 }
#breadcrumbs {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: 1px solid #CCCCCC;
}

Hope that should work and let me know your feedback.

Thanks 🙂
With Best Regards
Swift Ideas