Please can you tell me which options are selected on the 'Freelance Portfolio' demo to create the mobile header navigation with the background color and also the row padding? I have been using the 'Wellness' demo as my base but want the header to only have a background color on mobile devices and I can't find where I can change the header to display like this only on smaller devices.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1px) and (max-width: 999px) {
body #header-outer[data-transparent-header="true"].transparent {
background-color: #0b6b30 !important;
}
}
This kind of works - thanks. I've changed the color to white but the problem that we have is that because the sections are different colours and I've set the navigation for the main site to show either the light or dark header version depending on the section, it's still doing this on the mobile... so when you're on a 'dark' section on a mobile, the navbar is now white (as requested) but it's displaying a white logo and not the coloured logo as it does on a 'light' section. Does that make sense?
So just on a mobile, I'd like it to display one type of navbar that's transparent with white logo on the first section and then all other sections, no matter what the text color is set to, it displays a solid white navbar with coloured logo and menu text? Is that possible?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1px) and (max-width: 999px) {
.material #header-outer[data-transparent-header="true"][data-mobile-fixed="1"].transparent:not(.fp-section-1) {
background-color:#fff !important;
}
#header-outer[data-transparent-header="true"].transparent >header #logo img.dark-version, #header-outer[data-transparent-header="true"].light-text >header #logo img.dark-version {
opacity: 1 !important;
}
#header-outer[data-transparent-header="true"].transparent #logo .starting-logo, #header-outer[data-transparent-header="true"].light-text #logo .starting-logo {
opacity: 0 !important;
}
#header-outer.transparent[data-permanent-transparent="false"] #top .slide-out-widget-area-toggle.mobile-icon i:before, #header-outer.transparent[data-permanent-transparent="false"] #top .slide-out-widget-area-toggle.mobile-icon i:after, body.material.mobile #header-outer.transparent:not([data-permanent-transparent="1"]) header .slide-out-widget-area-toggle a .close-line, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines-button:after, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines:before, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines:after, #header-outer[data-lhe="animated_underline"].transparent .nectar-header-text-content a:after {
background-color: #006327 !important;
}
#header-outer.transparent #top nav > ul > li > a, #header-outer.transparent #top nav > .sf-menu > li > a, #header-outer.transparent .slide-out-widget-area-toggle a i.label, #header-outer.transparent #top .span_9 > .slide-out-widget-area-toggle a.using-label .label, #header-outer.transparent #top nav ul #search-btn a .icon-salient-search, #header-outer.transparent #top nav ul #nectar-user-account a span, #header-outer.transparent #top nav > ul > li > a > .sf-sub-indicator i, #header-outer.transparent .cart-menu .cart-icon-wrap .icon-salient-cart, .ascend #boxed #header-outer.transparent .cart-menu .cart-icon-wrap .icon-salient-cart, #header-outer.transparent #top .sf-menu > li.nectar-regular-menu-item > a > .nectar-menu-icon, #header-outer.transparent .nectar-header-text-content {
color: #006327 !important;
}
}
Please can you tell me which options are selected on the 'Freelance Portfolio' demo to create the mobile header navigation with the background color and also the row padding? I have been using the 'Wellness' demo as my base but want the header to only have a background color on mobile devices and I can't find where I can change the header to display like this only on smaller devices.
Hi There,
This require css customization. Please send your website url so that we can provide the css for the mobile header background.
Thanks.
Hey Again,
Try Selecting this particular Style:
Also, there is a Custom Header Color Scheme used:
Thanks
ThemeNectar Support Team
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1px) and (max-width: 999px) { body #header-outer[data-transparent-header="true"].transparent { background-color: #0b6b30 !important; } }Thanks
ThemeNectar Support Team
Hi Tahir,
This kind of works - thanks. I've changed the color to white but the problem that we have is that because the sections are different colours and I've set the navigation for the main site to show either the light or dark header version depending on the section, it's still doing this on the mobile... so when you're on a 'dark' section on a mobile, the navbar is now white (as requested) but it's displaying a white logo and not the coloured logo as it does on a 'light' section. Does that make sense?
So just on a mobile, I'd like it to display one type of navbar that's transparent with white logo on the first section and then all other sections, no matter what the text color is set to, it displays a solid white navbar with coloured logo and menu text? Is that possible?
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1px) and (max-width: 999px) { .material #header-outer[data-transparent-header="true"][data-mobile-fixed="1"].transparent:not(.fp-section-1) { background-color:#fff !important; } #header-outer[data-transparent-header="true"].transparent >header #logo img.dark-version, #header-outer[data-transparent-header="true"].light-text >header #logo img.dark-version { opacity: 1 !important; } #header-outer[data-transparent-header="true"].transparent #logo .starting-logo, #header-outer[data-transparent-header="true"].light-text #logo .starting-logo { opacity: 0 !important; } #header-outer.transparent[data-permanent-transparent="false"] #top .slide-out-widget-area-toggle.mobile-icon i:before, #header-outer.transparent[data-permanent-transparent="false"] #top .slide-out-widget-area-toggle.mobile-icon i:after, body.material.mobile #header-outer.transparent:not([data-permanent-transparent="1"]) header .slide-out-widget-area-toggle a .close-line, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines-button:after, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines:before, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines:after, #header-outer[data-lhe="animated_underline"].transparent .nectar-header-text-content a:after { background-color: #006327 !important; } #header-outer.transparent #top nav > ul > li > a, #header-outer.transparent #top nav > .sf-menu > li > a, #header-outer.transparent .slide-out-widget-area-toggle a i.label, #header-outer.transparent #top .span_9 > .slide-out-widget-area-toggle a.using-label .label, #header-outer.transparent #top nav ul #search-btn a .icon-salient-search, #header-outer.transparent #top nav ul #nectar-user-account a span, #header-outer.transparent #top nav > ul > li > a > .sf-sub-indicator i, #header-outer.transparent .cart-menu .cart-icon-wrap .icon-salient-cart, .ascend #boxed #header-outer.transparent .cart-menu .cart-icon-wrap .icon-salient-cart, #header-outer.transparent #top .sf-menu > li.nectar-regular-menu-item > a > .nectar-menu-icon, #header-outer.transparent .nectar-header-text-content { color: #006327 !important; } }Thanks
ThemeNectar Support Team