Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › naked menu in different pages
New Landing › How can we help? › Themeforest Theme Support › Dante › naked menu in different pages
- This topic has 7 replies, 2 voices, and was last updated 10 years by Kyle – SUPPORT.
-
Posted in: Dante
-
June 17, 2014 at 2:32 pm #83142
Hello,
I would like to use the home naked layout in different pages of my website, do I have to repeat all the code at custom SCC changing the page id, or there is a shorter way: I imagine something like: .page-id-2; .page-id-4; .page-id-7 etc…
Thank you!
D!!June 17, 2014 at 3:03 pm #83161You would need to duplicate everything in the commas, changing the page id. For e.g. the first bit would be:
.page-id-15 #top-bar, .page-id-17 #top-bar, .page-id-15 #top-header, .page-id-17 #top-header { display: none; }
Let me know if you understand
– Kyle
June 17, 2014 at 5:01 pm #83219Hello,
Thank you for your help. Then maybe is easier to put the whole code like this, no?
.page-id-2 #top-bar, .page-id-2 #top-header {
display: none;
}
.page-id-2 #header-section:before {
background: transparent;
}
.page-id-2 .header-wrap {
width: 100%;
position: absolute;
top: 0px;
left: 0;
z-index: 7;
}
.page-id-2.header-overlay .header-wrap {
left: 50%;
}
.page-id-2 #header-section, .page-id-2 #header-section:before, .page-id-2 #header .is-sticky .sticky-header, .page-id-2 .is-sticky #header.sticky-header {
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
background: transparent!important;
}
.page-id-2 #header .is-sticky .sticky-header, .page-id-2 .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-2 #logo img {
display: none!important;
}
.page-id-2 #logo {
background: transparent url(‘http://craterproducciones.com/wp-content/uploads/2014/06/belen-3.png’) no-repeat center left;
background-size: 240px 28px;
width: 240px;
}
.page-id-2 #logo a {
height: 40px;
color: #fff;
}
.page-id-2 nav .menu > li a {
color: #fff;
}
.page-id-2 #header .is-sticky .sticky-header.sticky-header-resized, .page-id-2 .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-2 .sticky-header-resized #logo img.retina {
display: block!important;
}
.page-id-2 .sticky-header-resized #logo h1 {
color: #222!important;
}
.page-id-2 .sticky-header-resized #logo a {
color: #333;
}
.page-id-2 .sticky-header-resized #logo {
background-image: none;
}
.page-id-2 .sticky-header-resized nav .menu > li a {
color: #252525;
}
.page-id-2 .inner-page-wrap {
padding-top: 0!important;
margin-top: 0;
}
@media only screen and (max-width: 991px) {
.page-id-2 #logo {
width: 90%;
margin: 0 5%;
}
}
@media only screen and (max-width: 767px) {
.page-id-2 .header-wrap {
top: 0;
}
.page-id-2.header-overlay .header-wrap {
left: 0;
}
}
.page-id-52 #top-bar, .page-id-52 #top-header {
display: none;
}
.page-id-52 #header-section:before {
background: transparent;
}
.page-id-52 .header-wrap {
width: 100%;
position: absolute;
top: 0px;
left: 0;
z-index: 7;
}
.page-id-52.header-overlay .header-wrap {
left: 50%;
}
.page-id-52 #header-section, .page-id-52 #header-section:before, .page-id-52 #header .is-sticky .sticky-header, .page-id-52 .is-sticky #header.sticky-header {
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
background: transparent!important;
}
.page-id-52 #header .is-sticky .sticky-header, .page-id-52 .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-52 #logo img {
display: none!important;
}
.page-id-52 #logo {
background: transparent url(‘http://craterproducciones.com/wp-content/uploads/2014/06/belen-3.png’) no-repeat center left;
background-size: 240px 28px;
width: 240px;
}
.page-id-52 #logo a {
height: 40px;
color: #fff;
}
.page-id-52 nav .menu > li a {
color: #fff;
}
.page-id-52 #header .is-sticky .sticky-header.sticky-header-resized, .page-id-52 .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-52 .sticky-header-resized #logo img.retina {
display: block!important;
}
.page-id-52 .sticky-header-resized #logo h1 {
color: #222!important;
}
.page-id-52 .sticky-header-resized #logo a {
color: #333;
}
.page-id-52 .sticky-header-resized #logo {
background-image: none;
}
.page-id-52 .sticky-header-resized nav .menu > li a {
color: #252525;
}
.page-id-52 .inner-page-wrap {
padding-top: 0!important;
margin-top: 0;
}
@media only screen and (max-width: 991px) {
.page-id-52 #logo {
width: 90%;
margin: 0 5%;
}
}
@media only screen and (max-width: 767px) {
.page-id-52 .header-wrap {
top: 0;
}
.page-id-52.header-overlay .header-wrap {
left: 0;
}
}
.page-id-94 #top-bar, .page-id-94 #top-header {
display: none;
}
.page-id-94 #header-section:before {
background: transparent;
}
.page-id-94 .header-wrap {
width: 100%;
position: absolute;
top: 0px;
left: 0;
z-index: 7;
}
.page-id-94.header-overlay .header-wrap {
left: 50%;
}
.page-id-94 #header-section, .page-id-94 #header-section:before, .page-id-94 #header .is-sticky .sticky-header, .page-id-94 .is-sticky #header.sticky-header {
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
background: transparent!important;
}
.page-id-94 #header .is-sticky .sticky-header, .page-id-94 .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-94 #logo img {
display: none!important;
}
.page-id-94 #logo {
background: transparent url(‘http://craterproducciones.com/wp-content/uploads/2014/06/belen-3.png’) no-repeat center left;
background-size: 240px 28px;
width: 240px;
}
.page-id-94 #logo a {
height: 40px;
color: #fff;
}
.page-id-94 nav .menu > li a {
color: #fff;
}
.page-id-94 #header .is-sticky .sticky-header.sticky-header-resized, .page-id-94 .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-94 .sticky-header-resized #logo img.retina {
display: block!important;
}
.page-id-94 .sticky-header-resized #logo h1 {
color: #222!important;
}
.page-id-94 .sticky-header-resized #logo a {
color: #333;
}
.page-id-94 .sticky-header-resized #logo {
background-image: none;
}
.page-id-94 .sticky-header-resized nav .menu > li a {
color: #252525;
}
.page-id-94 .inner-page-wrap {
padding-top: 0!important;
margin-top: 0;
}
@media only screen and (max-width: 991px) {
.page-id-94 #logo {
width: 90%;
margin: 0 5%;
}
}
@media only screen and (max-width: 767px) {
.page-id-94 .header-wrap {
top: 0;
}
.page-id-94.header-overlay .header-wrap {
left: 0;
}June 18, 2014 at 7:42 am #83326No definitely not, the other way you only have to repeat the class, where as this way your just duplicating code which is unnecessary
– Kyle
June 18, 2014 at 8:00 am #83335Thank you Kyle,
I will do that, second and third line would be like this?
}
.page-id-2 #header-section:before, .page-id-5 #header-section:before, .page-id-7 #header-section:before, .page-id-9 #header-section:before{
background: transparent;
}
.page-id-2 .header-wrap, .page-id-5 .header-wrap, .page-id-7 .header-wrap, .page-id-9 .header-wrap {
width: 100%;
position: absolute;
top: 0px;
left: 0;
z-index: 7;
}
.page-id-2.header-overlay .header-wrap {
left: 50%;
}
.page-id-2 #header-section, .page-id-2 #header-section:before, .page-id-2 #header .is-sticky .sticky-header, .page-id-2 .is-sticky #header.sticky-header {June 18, 2014 at 8:20 am #83346Yes
– Kyle
June 18, 2014 at 8:24 am #83350Great. problem solved.
You are wonderful!D!!
June 18, 2014 at 8:28 am #83352Great! No problem 🙂
– Kyle
-
Posted in: Dante
You must be logged in and have valid license to reply to this topic.