- This topic has 7 replies, 2 voices, and was last updated 4 years, 5 months ago by
.
Hello, I have a single page application and I would like to have my header gone when page is first loaded and does only show when the user scrolls down the page.
Hi @evgenizero,
I hope you are well today and thank you for your question.
Could you please share your site URL where the header is displaying so that I can help you?
Best regards,
Shufflehound teamI kinda made it work, but I had to hide the logo in the header 🙁 I want to show the logo together with the menu ( the menu shows now when you start scrolling, not sure how I did it )
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 -> Jevelin -> Theme Settings -> Custom CSS/JS -> CSS Code
.sh-header.sh-sticky-header { display: none; } .sh-header.sh-sticky-header.sh-sticky-header-active { display: block; }Unfortunately that doesn’t work. Now once the page is loaded the menu is shown by default, then on scroll it blinks. I want to have it invisible in the beginning then on scroll to show.
Could you please use the shared CSS code on your website and remove any other related code so that I can test it?
Absolutely, however how do I get all the CSS code?
Please use the below custom CSS code.
header#header-section, .sh-header.sh-sticky-header { display: none; } header#header-section.ut-hero-passed, .sh-header.sh-sticky-header.sh-sticky-header-active { display: block; }
