I am trying to get the transparant header to work, but when I enable the transparent header it seems to hide the menu, until I scroll a bit and it also seems to not get transparent as the white background is still white instead of transparent... 😅
Do you know what causes this? And how can we fix this?
I don't see that option in the page header settings... See the attachment. I have now enabled the transparent header, see https://www.lantack.com. The nav bar is just blank and when you scroll the menu appears... kinda strange, so I can't really put my finger on it.
The option was in the 'Header Navigation' section above WPBakery, that's why it is not there. The option was already enabled, when I disable the option the menu shows itself again... but the navbar is not transparent. When I force the transparency from the salient options it get's transparent, but the menu disappears again... 😅
This is the issue... The navbar is empty when you force it to be transparent and I can't find why it is doing that. I also want the navbar to get normal once you start scrolling, so that it is only transparent at the top of the page. But that is not working. 😅
This is how far I've come, but if you revisit the site (lantack.com) you'll see that the menu is not showing up until you scroll... I want to have the menu items in the transparent bar as well, but for some reason that's not working.
#header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current-menu-item > a, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current_page_item > a,
#header-outer.transparent #top nav > ul > li > a, #header-outer.transparent #top nav > .sf-menu > li > a {
color: white !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, #header-outer.transparent .nectar-mobile-only.mobile-header li:not([class*="menu-item-btn-style"]) a { color: #ffffff!important; }
Hi,
I am trying to get the transparant header to work, but when I enable the transparent header it seems to hide the menu, until I scroll a bit and it also seems to not get transparent as the white background is still white instead of transparent... 😅
Do you know what causes this? And how can we fix this?
Hey Again,
Try using the Force Transparency Option in "Page Header Settings" Metabox . See screenshot : http://prntscr.com/gjnyit .
Best
ThemeNectar Support Team
I don't see that option in the page header settings... See the attachment. I have now enabled the transparent header, see https://www.lantack.com. The nav bar is just blank and when you scroll the menu appears... kinda strange, so I can't really put my finger on it.
The option was in the 'Header Navigation' section above WPBakery, that's why it is not there. The option was already enabled, when I disable the option the menu shows itself again... but the navbar is not transparent. When I force the transparency from the salient options it get's transparent, but the menu disappears again... 😅
Really strange...
Hi Brian,
Please send in your admin login credentials so that we can check this out.
Thanks.
Hi Brian,
On the backend page settings please enable transparency from here:
Thanks.
Hi Judith, have you read my response to Tahir? That is not working... Please read my reply first... ☹️
This is the issue... The navbar is empty when you force it to be transparent and I can't find why it is doing that. I also want the navbar to get normal once you start scrolling, so that it is only transparent at the top of the page. But that is not working. 😅
Just turned this off:
Please deactivate the Optimization plugin and check now. Also try switching to the Parent Theme as the Child Theme could be causing this as well.
Thanks
ThemeNectar Support Team
Hi Tahir,
This is how far I've come, but if you revisit the site (lantack.com) you'll see that the menu is not showing up until you scroll... I want to have the menu items in the transparent bar as well, but for some reason that's not working.
Can you check this?
Hey Again,
This Custom CSS was hiding it:
Thanks
ThemeNectar Support Team
Oops... Must have overlooked that one. Thank you!
Is it possible to change the color of the text to white when the bar is transparent?
Hello Brian,
Use the following CSS.
#header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current-menu-item > a, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current_page_item > a, #header-outer.transparent #top nav > ul > li > a, #header-outer.transparent #top nav > .sf-menu > li > a { color: white !important; }Regards,
Hi Brian,
Please try this css:
#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, #header-outer.transparent .nectar-mobile-only.mobile-header li:not([class*="menu-item-btn-style"]) a {
color: #ffffff!important;
}
Thanks.