I'm trying to find a way to hide my website logo in the header after scrolling down.
So when you open the website you see the menu with the custom logo and when you start scrolling the logo should disappear moving to the top border.
I want this because the custom logo should be relatively large when visiting the first time and when you scroll down the sticky header with the large logo is blocking a lot of the main content.
P.S. If that is not what you're looking for, please share your site credentials here, because we need to login to your site and see this issue live. Your information is safe (private) in this thread.
To include your credentials click Insert Credentials button in the editor toolbar. (See how)
"Header type" is number 4 -> Logo centered and menu in next line.
I do not want the logo in the sticky header. When you scroll down it should disappear because the sticky header type 4 with a logo is blocking most of the main content.
I am sorry but we cannot test it on real-time to see if it gets fixed by applying some changes, if you don't want to the ticket to be public then switch on the "Private" option when you reply to make the reply private.
The only option that comes in my mind now for disabling the logo when scrolling is setting this field to 0:
Hi,
I'm trying to find a way to hide my website logo in the header after scrolling down.
So when you open the website you see the menu with the custom logo and when you start scrolling the logo should disappear moving to the top border.
I want this because the custom logo should be relatively large when visiting the first time and when you scroll down the sticky header with the large logo is blocking a lot of the main content.
Best regards
Alex
Hi Alex,
Try adding this CSS to Custom CSS to make the logo disappear:
header.site-header.sticked .header-menu .logo { opacity: 0 !important; }Best regards,
Laborator Team
With your code only the logo visibility changed leaving an "a" element with blank space in the header.
So I've modified your solution to this:
header.site-header.sticked .header-menu .logo a {
opacity: 0 !important;
height: 0 !important;
}
Now the logo disappears instantly and the sticky header has the menu elements like i need them.
But is there a way to make the logo scroll out instead of disappearing instantly?
Hi there,
It would be better if I had your site so I could test it directly, but you can try using this CSS instead:
header.site-header.sticked .header-menu .logo a { opacity: 0 !important; height: 0 !important; transition: opacity 0.3s !important; -webkit-transition: opacity 0.3s !important; }As you can see I have added the transition time, you can modify the milliseconds.
Best regards,
Laborator Team
My logo is centered at top. Then the menu follows.
I just want that when you scroll down the logo is scrolling up and out until the menu remains. When you scroll up again the logo should come back.
This is what I want to reach:
https://www.w3schools.com/howto/howto_js_sticky_header.asp
Hi there,
The option to set a sticky menu is located here:
(view large version)
P.S. If that is not what you're looking for, please share your site credentials here, because we need to login to your site and see this issue live. Your information is safe (private) in this thread.
To include your credentials click Insert Credentials button in the editor toolbar. (See how)
Best regards,
Laborator Team
Sry, but I cannot give access to wordpress.
"Sticky Menu" is already enabled.
"Header type" is number 4 -> Logo centered and menu in next line.
I do not want the logo in the sticky header. When you scroll down it should disappear because the sticky header type 4 with a logo is blocking most of the main content.
Hi there,
I am sorry but we cannot test it on real-time to see if it gets fixed by applying some changes, if you don't want to the ticket to be public then switch on the "Private" option when you reply to make the reply private.
The only option that comes in my mind now for disabling the logo when scrolling is setting this field to 0:
(view large version)
Best regards,
Laborator Team