Log in to support

Replicating the demo “Naked Header” example

Replicating the demo “Naked Header” example
November 20, 2013 Swift Ideas - Ed

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

Comments (0)

Leave a reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.