Can't seem to change the color of the off canvas navigation. It remains black?
I tried changing under transparency menu as well as manually within the row itself. I can make it change to "light" yet when "dark" it does not take on the color specified. I also tried to use the customize color option having no such luck.
Would love to have the logo color same color as the of canvas icons in the header.
Thanks so much for your quick response. So I was able to apply this (see attached image). Yet off canvas navigation, three bars and social icons still appear black on light background when my goal it is to make red.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#header-outer.transparent .midnightHeader.dark header#top nav >ul >li:not([class*="button_solid_color"]) >a, #header-outer.transparent .midnightHeader.dark header#top #logo, #header-outer.transparent .midnightHeader.dark header#top nav ul #search-btn a span.icon-salient-search, #header-outer.transparent .midnightHeader.dark nav >ul >li >a >.sf-sub-indicator [class^="icon-"], #header-outer.transparent .midnightHeader.dark nav >ul >li >a >.sf-sub-indicator [class*=" icon-"], #header-outer.transparent .midnightHeader.dark .cart-menu .cart-icon-wrap .icon-salient-cart, .ascend #boxed #header-outer.transparent .midnightHeader.dark .cart-menu .cart-icon-wrap .icon-salient-cart, #header-outer.transparent .midnightHeader.default header#top nav >ul >li:not([class*="button_solid_color"]) >a, #header-outer.transparent .midnightHeader.default header#top #logo, #header-outer.transparent .midnightHeader.default header#top nav ul #search-btn a span.icon-salient-search, #header-outer.transparent .midnightHeader.default nav >ul >li >a >.sf-sub-indicator [class^="icon-"], #header-outer.transparent .midnightHeader.default nav >ul >li >a >.sf-sub-indicator [class*=" icon-"], #header-outer.transparent .midnightHeader.default .cart-menu .cart-icon-wrap .icon-salient-cart, .ascend #boxed #header-outer.transparent .midnightHeader.default .cart-menu .cart-icon-wrap .icon-salient-cart {
color: #fc363b !important
}
#header-outer.transparent .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a i.lines, #header-outer.transparent .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a i.lines:before, #header-outer.transparent .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a i.lines:after, #header-outer.transparent.directional-nav-effect .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i, #header-outer.transparent.directional-nav-effect .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:after, #header-outer.transparent.directional-nav-effect .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:before, #header-outer.transparent .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a i.lines, #header-outer.transparent .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a i.lines:before, #header-outer.transparent .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a i.lines:after, #header-outer.transparent.directional-nav-effect .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i, #header-outer.transparent.directional-nav-effect .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:after, #header-outer.transparent.directional-nav-effect .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:before, #header-outer.transparent .midnightHeader.dark .slide-out-widget-area-toggle[data-icon-animation="simple-transform"] .lines-button:after, #header-outer.transparent .midnightHeader.default .slide-out-widget-area-toggle[data-icon-animation="simple-transform"] .lines-button:after {
background-color: #fc363b !important
}
Can't seem to change the color of the off canvas navigation. It remains black?
I tried changing under transparency menu as well as manually within the row itself. I can make it change to "light" yet when "dark" it does not take on the color specified. I also tried to use the customize color option having no such luck.
Would love to have the logo color same color as the of canvas icons in the header.
http://staging.schiavocreative.com/scg/
Hey there,
Thanks for reaching in,
Please go to Salient > Header Navigation > Logo & General Styling and scroll down to header color scheme. Select custom option.
Regards
Hi Andrew,
Thanks so much for your quick response. So I was able to apply this (see attached image). Yet off canvas navigation, three bars and social icons still appear black on light background when my goal it is to make red.
Hey Again,
Try adjusting these " http://prntscr.com/k5lt4z . Also provide the page url where i can see the issue .
Best
ThemeNectar Support Team
Hi Tahir,
I had also made those adjustments. It's very odd. I did a search in the form and have not found a solution...
site: http://staging.schiavocreative.com/scg/
I added this css to customize yet I tried to delete all and see it effected the menu color... no such luck.
I also attached images that show my settings and the off canvas menu in black.
/* hide portfolio buttons */
.bottom_controls {
display: none !important;
}
/* hide portfolio title */
.project-title .container {
display: none !important;
}
@media only screen and (max-width: 800px) {
h1{
font-size:46px !important;
line-height:40px !important;
}
h5{
font-size:18px !important;
line-height:32px !important;
text-align: center !important;
}
}
div#page-header-wrap {
height: 100px !important;
}
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#header-outer.transparent .midnightHeader.dark header#top nav >ul >li:not([class*="button_solid_color"]) >a, #header-outer.transparent .midnightHeader.dark header#top #logo, #header-outer.transparent .midnightHeader.dark header#top nav ul #search-btn a span.icon-salient-search, #header-outer.transparent .midnightHeader.dark nav >ul >li >a >.sf-sub-indicator [class^="icon-"], #header-outer.transparent .midnightHeader.dark nav >ul >li >a >.sf-sub-indicator [class*=" icon-"], #header-outer.transparent .midnightHeader.dark .cart-menu .cart-icon-wrap .icon-salient-cart, .ascend #boxed #header-outer.transparent .midnightHeader.dark .cart-menu .cart-icon-wrap .icon-salient-cart, #header-outer.transparent .midnightHeader.default header#top nav >ul >li:not([class*="button_solid_color"]) >a, #header-outer.transparent .midnightHeader.default header#top #logo, #header-outer.transparent .midnightHeader.default header#top nav ul #search-btn a span.icon-salient-search, #header-outer.transparent .midnightHeader.default nav >ul >li >a >.sf-sub-indicator [class^="icon-"], #header-outer.transparent .midnightHeader.default nav >ul >li >a >.sf-sub-indicator [class*=" icon-"], #header-outer.transparent .midnightHeader.default .cart-menu .cart-icon-wrap .icon-salient-cart, .ascend #boxed #header-outer.transparent .midnightHeader.default .cart-menu .cart-icon-wrap .icon-salient-cart { color: #fc363b !important } #header-outer.transparent .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a i.lines, #header-outer.transparent .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a i.lines:before, #header-outer.transparent .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a i.lines:after, #header-outer.transparent.directional-nav-effect .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i, #header-outer.transparent.directional-nav-effect .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:after, #header-outer.transparent.directional-nav-effect .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:before, #header-outer.transparent .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a i.lines, #header-outer.transparent .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a i.lines:before, #header-outer.transparent .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a i.lines:after, #header-outer.transparent.directional-nav-effect .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i, #header-outer.transparent.directional-nav-effect .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:after, #header-outer.transparent.directional-nav-effect .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:before, #header-outer.transparent .midnightHeader.dark .slide-out-widget-area-toggle[data-icon-animation="simple-transform"] .lines-button:after, #header-outer.transparent .midnightHeader.default .slide-out-widget-area-toggle[data-icon-animation="simple-transform"] .lines-button:after { background-color: #fc363b !important }Thanks
ThemeNectar Support Team
It works perfectly... Thank you very much. Love you guys!