Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 6, 2021 at 3:06 am #1298705
    Tobias

    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, 6 months ago by Tobias.
    May 8, 2021 at 4:32 pm #1299118
    Mike

    Hey 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,
    Mike

    May 9, 2021 at 11:09 pm #1299192
    Tobias

    Hi 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 #1299358
    Mike

    Hi,
    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,
    Mike

    May 10, 2021 at 2:12 pm #1299368
    Guenni007

    may 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 #1299476
    Guenni007

    if 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 #1299674
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    May 11, 2021 at 1:47 pm #1299675
    Tobias

    @guenni007: thanks for your great help!

    @Mike    : thank you for the hint

    Great – it work´s!

    Thank you very much!

    Tobias

    May 11, 2021 at 3:59 pm #1299720
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.