NOTE: This functionality is now built in as a page meta option in Dante as of v2.70
If you’d like to replicate the naked header example on your site for one page, rather than across the whole site, you can re-purpose the following custom css, by adding it to the custom css box within Theme Options > Custom CSS/JS.
You’ll need to edit all instances of “.page-id-15” to be the page id of the page you’d like to use it on. You’ll also need to change the logo background css declaration to your logo URL (ideally retina).
.page-id-15 #top-bar, .page-id-15 #top-header {
display: none;
}
.page-id-15 #header-section:before {
background: transparent;
}
.page-id-15 .header-wrap {
width: 100%;
position: absolute;
top: 40px;
left: 0;
z-index: 7;
}
.page-id-15.header-overlay .header-wrap {
left: 50%;
}
.page-id-15 #header-section, .page-id-15 #header-section:before, .page-id-15 #header .is-sticky .sticky-header, .page-id-15 .is-sticky #header.sticky-header {
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
background: transparent!important;
}
.page-id-15 #header .is-sticky .sticky-header, .page-id-15 .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-15 #logo img {
display: none!important;
}
.page-id-15 #logo {
background: transparent url('http://dante.swiftideas.net/wp-content/uploads/2013/10/[email protected]') no-repeat center left;
background-size: 92px 21px;
width: 92px;
}
.page-id-15 #logo a {
height: 40px;
color: #fff;
}
.page-id-15 nav .menu > li a {
color: #fff;
}
.page-id-15 .is-sticky #header-section::before, .page-id-15 #header .is-sticky .sticky-header.sticky-header-resized, .page-id-15 .is-sticky #header.sticky-header.sticky-header-resized {
background: #fff!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,.05)!important;
}
.page-id-15 .sticky-header-resized #logo img.retina {
display: block!important;
}
.page-id-15 .sticky-header-resized #logo h1 {
color: #222!important;
}
.page-id-15 .sticky-header-resized #logo a {
color: #333;
}
.page-id-15 .sticky-header-resized #logo {
background-image: none;
}
.page-id-15 .sticky-header-resized nav .menu > li a {
color: #252525;
}
.page-id-15 .inner-page-wrap {
padding-top: 0!important;
margin-top: 0;
}
@media only screen and (max-width: 991px) {
.page-id-15 #logo {
width: 90%;
margin: 0 5%;
}
}
@media only screen and (max-width: 767px) {
.page-id-15 .header-wrap {
top: 0;
}
.page-id-15.header-overlay .header-wrap {
left: 0;
}
}Hope that helps!
– Ed