- This topic has 15 replies, 2 voices, and was last updated 6 years, 4 months ago by
.
Hi! We’d like to use the Light style for our header but can’t seem to find a way to edit the navigation colours and add a slightly visible black background, is it possible? This is because we like that the header is overlapping revolution slider, but some slides make the now white text in navigation less visible.
Hi @govus,
I hope you are well today and thank you for your question.
You can change header navigation color from theme Styling settings as shown in the attached screenshots.
Best regards,
Shufflehound teamHello. That only affects the sticky header after scrolling.
If you visit the website http://www.govus.fi you can see that the light header has white navigation, whereas sticky header has the colors set by us.
We wish to have the same colours at the very top, also is it possible to have a slightly transparent black background at the top? This is because we like how the light style overlaps revolution slider but some slides interfere with the logo&text visibility.
Also, we’d like the the transitions to be smoother – could this be fixed with css or similar way?
Solution for this topic
If you visit the website http://www.govus.fi you can see that the light header has white navigation, whereas sticky header has the colors set by us.
We wish to have the same colours at the very top,
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container .sh-header-search-close i, #page-container .sh-header .sh-nav > li.menu-item > a, #page-container .sh-header #header-logo-title, #page-container .sh-header .sh-nav > li.menu-item > a > i, #page-container .sh-header-mobile-navigation li.menu-item > a > i, #page-container .sh-header-left-side li.menu-item > a, #page-container .sh-header-left-2 .sh-side-button-search, #page-container .sh-header-left-2 .sh-side-button-cart, #page-container .sh-header-left-2 .sh-side-button-cart .sh-nav-cart i, #page-container .sh-header-left-2 .sh-nav li.menu-item>a.fa:before { color: #b1ed00 !important; } body #page-container .sh-header .sh-nav > .current_page_item > a, body #page-container .sh-header .sh-nav > .current-menu-ancestor > a, body #page-container .sh-header-left-side .sh-nav>.current_page_item>a { color: #eeee22 !important; } body #page-container .sh-header .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a, body #page-container .sh-header .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a > i, body #page-container .sh-header .sh-nav > li.sh-nav-social > a:hover > i, body #page-container .sh-header-mobile-navigation li > a:hover > i, body #page-container .sh-header-left-side li.menu-item>a:hover { color: #ee2 !important; }also is it possible to have a slightly transparent black background at the top? This is because we like how the light style overlaps revolution slider but some slides interfere with the logo&text visibility.
Use below CSS code to achieve this.
#page-container .primary-desktop-light .sh-header:not(.sh-sticky-header-active):not(.sh-header-10) { background-color: rgba(119, 119, 119, 0.5)!important; border-bottom: 1px solid rgba( 255,255,255,0.10 )!important; }Also, we’d like the the transitions to be smoother – could this be fixed with css or similar way?
It is by default smooth which you can see on the demo site here https://jevelin.shufflehound.com/ but on your site it is not due to large logo used in the header.
Please check whether the following CSS code helps you.
.sh-header .header-logo img { transition: .3s height ease-in-out !important; }Thanks! Can I use this thread to ask a follow-up question about logo size transition from normal header to sticky? Is there a way to have the bigger logo shrink smaller, whereas now it switches from one to another? Thanks again.
Is there a way to have the bigger logo shrink smaller, whereas now it switches from one to another?
I can see the bigger logo shrinks to smaller on you site on page scroll as shown in the attached screenshots.
Please advise.
Hello! What I meant was having a visible resizing animation, but that is not important.
Since this thread is about the Light style header, I’d like to ask more regarding it. The above css you provided works great, but what if I want the light version to have black navigation, and the sticky navigation to be white? The css above makes both navigations be the desired color, but what about changing the light navigation only (by default it is white)? Hope I explained this well 🙂 Thanks!
The above css you provided works great, but what if I want the light version to have black navigation, and the sticky navigation to be white?
You can use below CSS code to achieve this.
.sh-header.sh-sticky-header-active { background-color: #fff; }Thanks but by “navigation” I mean the font colour like it is called in the Styling section 🙂
I’d like to have the Light style-header navigation font colour to be black, and the sticky version to have white font (which I can set from Styling). I’m asking this because the light style has white font by default and cannot be changed without css? Thanks!
I’m asking this because the light style has white font by default and cannot be changed without css?
You can change it from theme styling settings as shown in the attached screenshots.
I’d like to have the Light style-header navigation font colour to be black, and the sticky version to have white font (which I can set from Styling).
You can change light style header color from theme styling settings as described above.
To change sticky header navigation font color to white, you can use below CSS code.
body #page-container .sh-header.sh-sticky-header-active .sh-nav > li.menu-item > a { color: #fff !important; }Hello! I’m sorry but that just is not happening for us.
On our front page we are using header style “Light (Header + Titlebar) – Mobile Off”. We have sticky header enabled. Navigation color from your screenshots affects only the sticky header. Top of the page where Light header is active, the navigation font is always white. In this topic you have provided us css-code that changes _both_ the light and sticky navigations, but we’d like to know how to change only the Light header font color.
Please see the demo site linked in private section!
At this moment the header is fine other than we need the navigation font to be black at the top, then turn white when scrolling! Thanks and sorry for the trouble 😛
Solution for this topic
At this moment the header is fine other than we need the navigation font to be black at the top, then turn white when scrolling
Please use below custom CSS code to achieve this.
#page-container .primary-desktop-light .sh-header:not(.sh-sticky-header-active):not(.sh-header-10) .sh-nav > li > a{ color: #000 !important; }Nice thank you!
You are most welcome here 🙂
Thanks for your great support!
Is there a way to make the header background fade in when it is changing from transparent Light style to sticky after scrolling? For example the last link I provided “Absolute dimension”, now the black background appears instantly.
This topic is resolved and to help us keep support thread separates could you please create new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you on your new thread.
