Naked menu not fading

[Kyle – SUPPORT]

It’s because you’ve using an image instead of a color.

– Kyle

[jmvdigital]

I changed out the transparent image to the solid color, just like in your demo: http://support.swiftideas.net/knowledgebase/replicating-the-demo-naked-header-example/

Not fixed.

[Kyle – SUPPORT]

When I inspect your header I can see this custom css (screenshot)

.page-id-41 #header .is-sticky .sticky-header.sticky-header-resized, .page-id-41 .is-sticky #header.sticky-header.sticky-header-resized {
  background: url("/wp-content/uploads/2013/10/background_white_semi7.png") repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) !important;
}

– Kyle

[jmvdigital]

It’s not on my end. Refresh/clear cache. I double checked the custom CSS and inspected the code in my browser. The menu now turns #FFF white when scrolled down.

[Kyle – SUPPORT]

To achieve similar to what you had before you can use this css:

.page-id-41 #header .is-sticky .sticky-header.sticky-header-resized, .page-id-41 .is-sticky #header.sticky-header.sticky-header-resized {
  background: rgba(0, 0, 0, 0.8)!important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) !important;
}

– Kyle

[Kyle – SUPPORT]

For the fade add this custom css:

#header-section.header-6 .is-sticky #header.sticky-header {
  backface-visibility: hidden;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  transition: background 0.5s ease-in-out 0s;
}

– Kyle

[jmvdigital]

I made those changes. The semi-transparent black is back, but it’s still not fading. Here is my custom CSS right now:

#header-section.header-6 .is-sticky #header.sticky-header {
 backface-visibility: hidden;
 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
 width: 100%;
 transition: background 0.5s ease-in-out 0s;
}

.page-id-41 #top-bar, .page-id-41 #top-header {
display: none;
}
.page-id-41 #header-section:before {
background: transparent;
}
.page-id-41 .header-wrap {
width: 100%;
position: absolute;
top: 40px;
z-index: 7;
}
.page-id-41 #header-section, .page-id-41 #header-section:before, .page-id-41 #header .is-sticky .sticky-header, .page-id-41 .is-sticky #header.sticky-header {
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
background: transparent!important;
}
.page-id-41 #header .is-sticky .sticky-header, .page-id-41 .is-sticky #header.sticky-header {
background: transparent;
transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-webkit-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.page-id-41 #logo img {
display: none!important;
}
.page-id-41 #logo {
background: transparent url('/wp-content/uploads/2014/02/[email protected]') no-repeat center left;
background-size: 199px 120px;
width: 199px;
}
.page-id-41 #logo a {
height: 120px;
color: #fff;
}
.page-id-41 nav .menu > li a {
color: #fff;
}

.page-id-41 #header .is-sticky .sticky-header.sticky-header-resized, .page-id-41 .is-sticky #header.sticky-header.sticky-header-resized {
 background: rgba(0, 0, 0, 0.8)!important;
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.05)!important;
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.05)!important;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) !important;
}

.page-id-41 .sticky-header-resized #logo img.retina {
display: block!important;
}
.page-id-41 .sticky-header-resized #logo h1 {
color: #222!important;
}
.page-id-41 .sticky-header-resized #logo a {
color: #333;
}
.page-id-41 .sticky-header-resized #logo {
background-image: none;
}
.page-id-41 .sticky-header-resized nav .menu > li a {
color: #fff;
}
.page-id-41 .inner-page-wrap {
padding-top: 0!important;
margin-top: 0;
}
@media only screen and (max-width: 991px) {
.page-id-41 #logo {
width: 90%;
margin: 0 5%;
}
}
@media only screen and (max-width: 767px) {
.page-id-41 .header-wrap {
top: 0;
}
}

[Kyle – SUPPORT]

Please check now 🙂

– Kyle

[jmvdigital]

Awesome! Thank you. What did you change?

Also, is there anything to be done about the pre-load flashing of the elements? There is a green menu bar that flashes up for a half second and some other weird stuff. The page doesn’t load gracefully.

I attached 2 screenshots mid-load.

Thanks,
-Justin

[Kyle – SUPPORT]

I just moved some css around 🙂

Unfortunately not, it’s just the speed at which your host loads each part of the website. As the custom css is loaded last, the changes will be loaded last.

– Kyle