1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Hide Nav Before Scroll

Discussion in 'Basic Support Forum' started by Stef Michalski, Mar 28, 2019.

Page 1 of 2
  1. Stef Michalski

    Stef Michalski New Member

    Hi,

    I just bought the Ultimate Header Plugin and I'm trying to get the Nav to be hidden before scrolling on my home page.

    The standard Divi header does this, but the DU Header won't work. Is there a workaround for this - I want the header on the homepage to be exactly the same as on the other pages - so I can't use the standard Divi header for home page and the DU header for other pages, as has been suggested in other threads?

    Thanks!
     
    #1 Stef Michalski, Mar 28, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Yup. You can only do that (hide before scrolling) with the default Divi header.

    Or kindly share your URL & I'll see if there's any other alternative to achieve what you want.
     
    #2 Divi.Help Pro Support, Mar 28, 2019
  3. Stef Michalski

    Stef Michalski New Member

    Hi - it’s www.testing.futra.co.uk - just started putting the site together. It must be possible some how - as the Superfly Mhmm plug-in - allows you to do it?
     
    #3 Stef Michalski, Mar 29, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You will need some jQuery + CSS to achieve that. Let me guide you through.

    First, go to Divi > Theme Options > Integration > Body Code & paste the below jQuery:
    Code:
    Log In or Sign Up to view this code.
    **Remember to Enable body code.
    **Adjust the 300 to your liking. That's where the sticky nav appear after scrolling certain distance.

    Next, go to Divi > Theme Options > Custom CSS & paste the below CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #4 Divi.Help Pro Support, Mar 29, 2019
    DorkaDivi likes this.
  5. Stef Michalski

    Stef Michalski New Member

    You absolute star - works perfectly! Thanks for your help
     
    #5 Stef Michalski, Mar 29, 2019
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  6. DorkaDivi

    DorkaDivi New Member

    Was looking for the same thing, thank you for this code!
    The appearance of the header is not too smooth though, do you have any suggestion on how to soften it? Thanks
    https://a-42.hu/
     
    #6 DorkaDivi, Jul 11, 2019
  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    From my side, I see that the header already has a fading effect.
     
    #7 Divi.Help Pro Support, Jul 11, 2019
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
  8. DorkaDivi

    DorkaDivi New Member

    If you mean the Divi 'hide navigation until scroll', I have now turned it off and still the same phenomenon.
    But thank you for the answer I might start another thread later as this one is solved. :)
     
    #8 DorkaDivi, Jul 12, 2019
  9. DorkaDivi

    DorkaDivi New Member

    Hi!

    I applied these codes on a site that I am currently building, but it seems to do nothing.
    I can imagine that this is because of some other plugins, could you please check it?

    Thanks http://wineitup.hu/10-2/
     
    #9 DorkaDivi, Sep 30, 2019
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  10. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You will need to go to WP Admin > Divi > DU Header - Library & edit your custom header > go to the Section settings > Advanced > CSS Class & add free-sticky
     
    #10 Divi.Help Pro Support, Sep 30, 2019
  11. ANKH.

    ANKH. New Member

    Hello - I've tried this and it works. Only problem is has stopped the hamburger from working. Any ideas? http://liamd8.sg-host.com/
     
    #11 ANKH., Sep 4, 2020
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  12. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try to remove the below CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #12 Divi.Help Pro Support, Sep 4, 2020
  13. ANKH.

    ANKH. New Member

    Brilliant : )
     
    #13 ANKH., Sep 4, 2020
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  14. Vicky Bazoula

    Vicky Bazoula New Member

    I want to make a header like this: http://www.testing.futra.co.uk/
    But the fullwidth header be a video. I have followed the above instructions and added NO.8 template, customized to my needs. But when added the above script then the video became a fullwidth plain colour background and only when scrolling starts the video becomes active. Any idea how to fix this?
     
    #14 Vicky Bazoula, Apr 21, 2021
  15. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    The code shouldn't be interfering with the video background. Have you tried to remove the code & see if the issue still persist or not?
     
    #15 Divi.Help Pro Support, Apr 21, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  16. Vicky Bazoula

    Vicky Bazoula New Member

    Yes, when code is removed, my header works fine but then the menu bar remains visible on top
     
    #16 Vicky Bazoula, Apr 21, 2021
  17. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Kindly share your URL.
     
    #17 Divi.Help Pro Support, Apr 21, 2021
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Freelancer' Divi layout for all Pro members:View Demo
  18. Vicky Bazoula

    Vicky Bazoula New Member

    #18 Vicky Bazoula, Apr 21, 2021
  19. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    #19 Divi.Help Pro Support, Apr 21, 2021
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  20. Vicky Bazoula

    Vicky Bazoula New Member

    done! And i wonder why the header menu is dublicated.
     
    #20 Vicky Bazoula, Apr 21, 2021
(You must log in or sign up to post here.)
Page 1 of 2