1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
HOT Divi.Help Pro One-Page Layouts - Beautifully crafted Divi layouts for you to kick start Divi sites.
View All Pro One-Page Layouts
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.
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.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.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 - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  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 Divi Block Pro - Premade team carousel design for your Divi site without using any plugins:View Demo
  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 - Premade rolling text design for your Divi site without using any plugins: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 Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile: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.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  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 Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect: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 dynamic background hover 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 'Industrial' 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 Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  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