I was able to use this code to make the header starting navigation hidden and checked "Use Transparent Header When Applicable?" in the Salient settings.
Don't know if it's the best way to do it, but it worked for me! Essentially, I added: "visibility: hidden;" to all the CSS properties for body#header-outer[data-transparent-header="true"] except for the part I put inside a comment below, which for whatever reason messed up the theme.
@media only screen and (min-width: 1001px) {
body #header-outer[data-transparent-header="true"], body #header-outer[data-transparent-header="true"] .cart-menu {
transition: background-color 0.40s ease, box-shadow 0.40s ease;
-moz-transition: background-color 0.40s ease, box-shadow 0.40s ease;
-webkit-transition: background-color 0.40s ease, box-shadow 0.40s ease;
}
/* Do not use visibility:hidden here */
body #header-outer[data-transparent-header="true"].transparent, body #header-outer[data-transparent-header="true"].transparent .cart-menu,
.ascend #header-outer.transparent[data-transparent-header="true"][data-full-width="true"] header#top nav ul #search-btn a {
transition: border-color 0.40s ease;
-moz-transition: border-color 0.40s ease;
-webkit-transition: border-color 0.40s ease;
}
/* End do not use visibility:hidden */
body #header-outer[data-transparent-header="true"].transparent .cart-menu {
background-color: transparent;
border-left: 1px solid rgba(255,255,255,0.25);
visibility: hidden;
}
body:not(.ascend) #boxed #header-outer[data-transparent-header="true"].transparent .cart-menu {
border: none!important;
}
body #header-outer[data-transparent-header="true"] .cart-outer .cart-notification, body #header-outer[data-transparent-header="true"] .cart-outer .widget_shopping_cart {
margin-top: 1px;
}
body #header-outer[data-transparent-header="true"].transparent {
background-color: transparent!important;
visibility: hidden;
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.25)!important;
}
#boxed #header-outer[data-transparent-header="true"].transparent {
border-bottom: 1px solid rgba(255,255,255,0.25)!important;
visibility: hidden;
}
body #header-outer[data-transparent-header="true"].transparent nav > ul > li > a { margin-bottom: -1px; visibility: hidden;}
body #header-outer[data-transparent-header="true"] header#top nav ul #search-btn > div {
border-left: 1px solid rgba(0,0,0,0.1); visibility: hidden;
}
body #header-outer[data-transparent-header="true"].transparent header#top nav ul #search-btn > div { visibility: hidden;
border-left: 1px solid rgba(255,255,255,0.25);
}
body #header-outer[data-transparent-header="true"] .ns-loading-cover {
background-color: #393939;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
}
#header-outer[data-transparent-header="true"].transparent #logo img, #header-outer[data-transparent-header="true"] #logo .starting-logo {
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
visibility: hidden;
}
#header-outer[data-transparent-header="true"].transparent #logo .starting-logo {
opacity: 1;
-ms-filter: 'alpha(opacity=100)';
visibility: hidden;
}
}
Hi, how do I hide the main Header Starting Navigation altogether when the site loads? The navigation is interfering with the starting image.
Hey Nigel!
I am afraid it cant be hidden on page load though you can try turning on Ajax page transitions in version 4.5.2 .
Thanks
ThemeNectar Support Team
I was able to use this code to make the header starting navigation hidden and checked "Use Transparent Header When Applicable?" in the Salient settings.
Don't know if it's the best way to do it, but it worked for me! Essentially, I added: "visibility: hidden;" to all the CSS properties for body#header-outer[data-transparent-header="true"] except for the part I put inside a comment below, which for whatever reason messed up the theme.