![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
May 6, 2021 at 3:06 am #1298705
Hi Support,
thanks for the nice last work – enfold is getting better all the time!
We like the solution to change the header on every page and use the function “header is invisible and appears as soon as the user scrolls down.”.
On our website we would like to achieve the opposite. How can we change this accordingly? we looking for a way to get: “Hide header when scrolling down, show when scrolling up”Thanks for your help!
Best regards
Tobias
-
This topic was modified 3 years, 4 months ago by
Tobias.
May 8, 2021 at 4:32 pm #1299118Hey Tobias,
Thank you for your patience, please see this solution from Guenni007 I have tested it on this demo test and it seems to still work well.Best regards,
MikeMay 9, 2021 at 11:09 pm #1299192Hi Mike,
thanks for your answer! I try it on our site but with over Header with overlapping logo does not seem to work.
what do you think the problem is?
Thanks for your help!
May 10, 2021 at 1:17 pm #1299358Hi,
Thank you for the login, I didn’t find the css that goes with the jQuery solution linked above on your site, but I disabled the jQuery in your child theme functions.php so I could test via browser injection and found that your header css in the WordPress > Customize > Additional CSS field sets the header and other elements to “flex” so this script would not work. Luckly Guenni007 had posted an Alternative Method a little further down in the same thread and with a little modification it works for your site, except that your header css makes the header transparent so when it shows further down the page it is still transparent, what color do you want the header when it is not at the top of the page? Is this to only work on the homepage? I notice that the topbar and menu text is different colors on your other pages but still using transparency so these would also have to be accounted for?Best regards,
MikeMay 10, 2021 at 2:12 pm #1299368may i see your site?
____________
if you have a shrinking header – and an overlapping logo – you can use these two classes added on the header id. ( header-scrolled and header-scrolled-full)
See for example that page here: https://webers-testseite.de/header-im-off/
My header is set to a custom height of 140px – the relative height of the logo is the guarantee that the logo will follow the shrink amount.
my logo on that page is set to :#top.page-id-39906 .logo a { max-height: 210px !important; height: 150%; } #top.page-id-39906 .logo, #top.page-id-39906 .logo a { overflow: visible; }
so it is overlapping the header with 50% of its height
on normal shrink factor of 1/2 the logo will end on a height of 105px – my header_meta is set to scroll away – that will cause a margin-top of -33.5px
when this point is reached the class : header-scrolled-full is added.
From now on the header had to get a margin of 105+33.5 = 138.5px – so my solution is:#top.page-id-39906 #header.header-scrolled-full { margin-top: -138.5px !important; transition: margin-top 1s ease; } #top.page-id-39906 #header.header-scrolled { transition: margin-top 1s ease !important; }
May 10, 2021 at 6:46 pm #1299476if you like to have that only in dependency of the scroll direction – Mikes Demo will do the job ( only some responsive adjustments had to be done )
May 11, 2021 at 1:42 pm #1299674May 11, 2021 at 1:47 pm #1299675@guenni007: thanks for your great help!
@Mike: thank you for the hintGreat – it work´s!
Thank you very much!
Tobias
May 11, 2021 at 3:59 pm #1299720Hi,
Did you need additional help with this topic or shall we close?
Best regards,
Jordan Shannon -
This topic was modified 3 years, 4 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.