Home Forums Fusion Create a sticky header that is hidden on load and shows only when scrolling

This topic contains 7 replies, has 2 voices, and was last updated by  urbanista 2 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #48068

    urbanista
    Participant

    Hi, two questions regarding the header:
    1) Is it easily possible to create a sticky header for a landing page that is hidden on load and shows only when the page is scrolled down, hiding again when the page is scrolled to top?
    2) I would like the site info in the header to show in one line, not in two. Where would I place a css to enlarge the site info div in the header globally?

    Thanks and best
    Julian

    #48069

    Joshua
    Keymaster

    Hi Julian,

    Sure, but may need your site link to help out with this.

    1. You’ll want to add the following JavaScript and CSS respectively:

    jQuery(window).on('scroll', function() {
        if (jQuery(this).scrollTop() < 400) {
             jQuery('.navbar').css('display', 'none');
        } else {
             jQuery('.navbar').css('display', 'flex');
        }
    });
    .navbar {
      display: none;
    }

    You can adjust the number 400 to the distance you’d like this to start. If you only want this to happen on a single page, then you should only add the above to that page.

    2. When you say site info, are you referring to your logo in text format? Do you have a link to your site where we can see this?

    • This reply was modified 1 week, 4 days ago by  Joshua.
    • This reply was modified 1 week, 4 days ago by  Joshua.
    #48070

    urbanista
    Participant

    Thanks for your answer!
    Where would I add the script?
    Here is the site i’ve started: http://root.urbanista.de/urbanista2018/

    • This reply was modified 1 week, 4 days ago by  urbanista.
    #48072

    urbanista
    Participant

    I found out I can place the js in the customizer. But when paste the code, the navbar is not showing …

    • This reply was modified 1 week, 4 days ago by  urbanista.
    #48075

    Joshua
    Keymaster

    You may need to copy and paste the above again. It looks like your script may have been copied to a text editor before it was pasted into the customizer, which corrupted the script.

    #48076

    urbanista
    Participant

    Perfect, thanks. One more thing: When I add the css un the customizer, the navbar layout does not render properly … maybe i have to preload the css somewhere?

    #48078

    Joshua
    Keymaster

    I just modified the above code in #1 again which will fix the layout for the navbar, but this will also restore the site logo and site description to their original positions, which I think may be what you wanted to change in #2.

    If you want to add the logo and site description on top of each other, you can copy the contents of fusion/template-parts/header/branding.php to your child theme’s folder:

    your-child-theme/template-parts/header/branding.php

    And at the beginning of the file add:

    <div class="brand-wrapper">

    And at the end of the file add:

    </div>

    #48079

    urbanista
    Participant

    Perfect! This now works fine! Thanks a lot for your help!
    Julian

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

You must be logged in to reply to this topic.