swiftideas

Forum Replies Created

Viewing 14 posts - 1 through 14 (of 14 total)

Back to forum

Posted in: We hit Power Elite.

March 12, 2014 at 2:19 pm in reply to: Naked menu not fading #56891

jmvdigital

Member

Post count: 14

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

March 11, 2014 at 8:21 pm in reply to: Naked menu not fading #56653

jmvdigital

Member

Post count: 14

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;
}
}

March 11, 2014 at 4:50 pm in reply to: Naked menu not fading #56557

jmvdigital

Member

Post count: 14

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.

March 11, 2014 at 4:38 pm in reply to: Naked menu not fading #56539

jmvdigital

Member

Post count: 14

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.

March 11, 2014 at 3:47 pm in reply to: Naked menu not fading #56497

jmvdigital

Member

Post count: 14

Updated to 2.16. No change. Top header still doesn’t fade properly.

March 7, 2014 at 5:06 pm in reply to: Naked menu not fading #55531