- This topic has 10 replies, 2 voices, and was last updated 5 years, 12 months ago by
.
I want the social icons to be #f27eb2 all the time rather than white. I’ve found the code to make them change to that when the sticky header becomes active, but not right when the page loads.
Also, for some reason, when the page is scrolled, the revolution slider goes behind the menu, disabling a menu background and making the menu totally unreadable. Is there a way to have the header a fixed height so the page scroll starts below the header area?
Solution for this topic
Hi @uinpink,
I hope you are well today and thank you for your questions.
want the social icons to be #f27eb2 all the time rather than white. I’ve found the code to make them change to that when the sticky header becomes active, but not right when the page loads.
I can see they are displaying with the shared color without scrolling as shown in the attached screenshot.
Have you managed to achieve it?
Also, for some reason, when the page is scrolled, the revolution slider goes behind the menu, disabling a menu background and making the menu totally unreadable. Is there a way to have the header a fixed height so the page scroll starts below the header area?
To avoid this you can just set white background color to menu header 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
.sh-header.sh-sticky-header.sh-sticky-header-active { background-color: #fff !important; }Best regards,
Shufflehound teamYes, I did figure out the css for the social icons.
Your css code for the header background worked like a charm. Thank you!
Where is the non-sticky header background color set as I want the sticky and non-sticky to be a different color than white and for it not to change colors/transparency when it changes to the sticky header.
Solution for this topic
Where is the non-sticky header background color set as I want the sticky and non-sticky to be a different color than white and for it not to change colors/transparency when it changes to the sticky header.
You can change it from theme styling settings as shown in the attached screenshot.
I have my header background color set there already to #494949. However, it still shows as white until the sticky header is activated.
To make it work please update your theme to the following latest version of theme as described here https://support.shufflehound.com/updating-theme/
I have updated the theme but it didn’t change the results.
Solution for this topic
It seems you are using following custom CSS code on your site which is causing this issue.
.sh-header, .sh-header-top-3, .sh-header-top-4, .sh-header-left-side .sh-header-search .line-test, .sh-header-left-2 .sh-nav > li > a { border-bottom: 1px solid rgba( 0,0,0,0.08 ); background-color: rgba(255,255,255,0.0)!important; }To make it work please either remove above custom CSS code or use the below shared CSS code.
#page-container .sh-header.sh-sticky-header { background-color: #494949 !important; }I removed the code and that fixed it. Thank you!
You are always welcome here 🙂
