Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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 4 months, 2 weeks ago by  Tobias.
    #1299118

    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

    #1299192

    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!

    #1299358

    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

    #1299368

    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;
    }
    #1299476

    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 )

    #1299674

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1299675

    @guenni007: thanks for your great help!
    @mike: thank you for the hint

    Great – it work´s!

    Thank you very much!

    Tobias

    #1299720

    Hi,

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

    Best regards,
    Jordan Shannon

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.