Just wondering if there's a way to have the secondary header behave the same way in regards to transparency / opacity as the main header (i.e. transparent until user scrolls)?
Not to worry - thanks for confirming. I played around a little and achieved what I had in mind - here\'s some (very train-of-thought) code if anyone\'s ever interested:
-----------------------------------------
#header-outer[data-format=\"centered-menu\"] header#top nav > ul.sf-menu > li ul { margin-top:-1px; }
.ascend #header-outer[data-full-width=\"true\"] header#top nav ul #search-btn a, .ascend #header-outer[data-full-width=\"true\"] header#top nav ul .slide-out-widget-area-toggle a { border-left: 1px solid rgba(0, 0, 0, 0.1); }
Hi guys,
Just wondering if there's a way to have the secondary header behave the same way in regards to transparency / opacity as the main header (i.e. transparent until user scrolls)?
Would be very cool :)
Thanks
Hey,
Sorry not possible as there is no transparent class added to the secondary header div.
Thanks
ThemeNectar Support Team
Not to worry - thanks for confirming. I played around a little and achieved what I had in mind - here\'s some (very train-of-thought) code if anyone\'s ever interested:
-----------------------------------------
#header-outer[data-format=\"centered-menu\"] header#top nav > ul.sf-menu > li ul {
margin-top:-1px;
}
#header-outer[data-using-secondary=\"1\"] {
top: 0px;
height: 140px;
border-bottom: 1px solid rgba(22,22,22,0.2)!important;
}
#header-secondary-outer {
background-color: transparent!important;
border-bottom: 0px;
}
body[data-header-color=\"custom\"] #header-secondary-outer {
border-bottom: 0px solid rgba(0,0,0,0.1);
}
media=\"all\"
@media only screen and (min-width: 1001px)
html body #header-outer[data-transparent-header=\"true\"].transparent {
background-color: transparent!important;
box-shadow: none!important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
border-bottom: 1px solid rgba(255,255,255,0)!important;
}
header#top {
position: relative;
z-index: 9998;
width: 100%;
margin-top: 30px;
}
#header-outer {
box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.22);
-moz-box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.22);
-webkit-box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.22);
}
.ascend #header-outer[data-full-width=\"true\"] header#top nav ul #search-btn a, .ascend #header-outer[data-full-width=\"true\"] header#top nav ul .slide-out-widget-area-toggle a {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
-----------------------------------------