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 Make sticky menu change into different menu when scrolled?

Discussion in 'Basic Support Forum' started by Clickprophets, Sep 30, 2018.

  1. Clickprophets

    Clickprophets New Member
    Divi Ultimate Header Plugin

    Hello,

    New to the Divi Ultimate Header Plugin, I would like to know if there is a way to change the section with the menu into a different section or layout when you scroll down. I am trying to implement what they have done on this website https://www.customink.com/ if you look you can see it has one layout starting out then after scrolling switches to a different compact layout. Any way of making this happen with the Divi ultimate Header Plugin.

    If there is no way to natively do this with the plugin. Is there a way I could unhide the diving header for desktop so when I scroll it appears in its fixed form?

    Thank You in advanced.
     

    Attached Files:

    #1 Clickprophets, Sep 30, 2018
    Last edited: Sep 30, 2018
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You can't have two different custom sticky & non-sticky sections.

    But, you can choose to show default Divi header as fixed menu, by utilizing the "Hide Navigation Until Scroll" option.

    upload_2018-9-30_23-34-59.png

    To achieve that, you first need to enable that option. Then, you need to edit the custom header to remove the free-sticky CSS class for the section. And lastly, just add the below custom css to show the default header on scroll:
    Code:
    Log In or Sign Up to view this code.
     
    #2 Divi.Help Pro Support, Sep 30, 2018
  3. Clickprophets

    Clickprophets New Member
    Divi Ultimate Header Plugin

    First of all, Thank You for replying so fast. I appreciate it.

    I did everything you said hide nav until scroll, remove free-sticky on menu in divi library layout and inserted the css into the style.css.
    I also purged the cache however, I don't see the menu appear after scrolling.

    Here is the site https://clickprophets.com/esi/

    I looked more and it seems like there is css for #main-header {display: none !important;} which is conflicting with the block !important;
     
    #3 Clickprophets, Sep 30, 2018
    Last edited: Sep 30, 2018
    1. PRO MEMBER PERKS Divi.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    #4 Divi.Help Pro Support, Sep 30, 2018
  5. Clickprophets

    Clickprophets New Member
    Divi Ultimate Header Plugin

    Thank You you are a Lifesaver, works perfectly. Now I can edit the default menu to look how i want.
    Appreciate the time spent.
     
    #5 Clickprophets, Sep 30, 2018
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
  6. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Updated the CSS. The previous one will cause some hover issue.
    Code:
    Log In or Sign Up to view this code.
     
    #6 Divi.Help Pro Support, Sep 30, 2018
    Clickprophets likes this.
  7. Adzlan Syazni

    Adzlan Syazni New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hi, Divi.Help support team.

    I'm using Divi Ultimate header plugin on my website http://prettysuci.braderdesign.com/ and I'm having problems with the code you provide. It doesn't work on short content page, for example on page Cart when no product is added, the code causes the default Divi menu to show on the page.

    When a product is added to the cart, the default Divi menu disappear and the page will only display the default Divi fixed navigation menu when scrolled down (which is what we want). However, if no product is in the cart, the page becomes shorter and suddenly the default Divi menu is shown on top of Divi Ultimate Header.

    Refer attached screenshot or go to this url to see the issue - http://prettysuci.braderdesign.com/cart/

    [​IMG]

    Can you please help me fix this?
     
    #7 Adzlan Syazni, Jan 7, 2019
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  8. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try this CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #8 Divi.Help Pro Support, Jan 7, 2019
  9. Adzlan Syazni

    Adzlan Syazni New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Alright the code works, now the problem is fixed! Thank you so much!
     
    #9 Adzlan Syazni, Jan 7, 2019
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
  10. Adzlan Syazni

    Adzlan Syazni New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hi. Sorry it's me again. I just noticed there's a problem on the ultimate header, whereby an unwanted spacing appeared at the top (refer attached screenshot and url https://www.prettysuci.com/ . Can you please help me fix this?

    [​IMG]
     

    Attached Files:

    #10 Adzlan Syazni, Jan 8, 2019
  11. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    #11 Divi.Help Pro Support, Jan 8, 2019
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Digital Marketing' Divi layout for all Pro members:View Demo
  12. Adzlan Syazni

    Adzlan Syazni New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hi. Can i give u the login so u can check?
     
    #12 Adzlan Syazni, Jan 8, 2019
  13. Adzlan Syazni

    Adzlan Syazni New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    #13 Adzlan Syazni, Jan 8, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  14. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Kindly check your PM.
     
    #14 Divi.Help Pro Support, Jan 8, 2019
  15. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    It's your html issue for the menu item. You didn't put closing bracket:

    upload_2019-1-9_11-40-53.png

    Added it for you & it works fine now.
     
    #15 Divi.Help Pro Support, Jan 8, 2019
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  16. Adzlan Syazni

    Adzlan Syazni New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Oh sorry! Alright all ok now, thank u so much for your help!
     
    #16 Adzlan Syazni, Jan 8, 2019
  17. Adzlan Syazni

    Adzlan Syazni New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hey, Divi.Help support team. Sorry there's one more issue with the code - it causes the default Divi menu to be displayed in mobile view. Refer attached screenshot.

    [​IMG]

    Can you please help me fix that?
     
    #17 Adzlan Syazni, Jan 10, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade team carousel design for your Divi site without using any plugins:View Demo
  18. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    By default, we uses the default Divi header in mobile + Ultimate header elements below it. But for your case, you wish to completely use Ultimate header elements in mobile. So, try this custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #18 Divi.Help Pro Support, Jan 10, 2019
  19. Adzlan Syazni

    Adzlan Syazni New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Great thank u so much! The code works perfect!
     
    #19 Adzlan Syazni, Jan 11, 2019
    1. PRO MEMBER PERKS Divi Login Customizer Plugin - Instantly beautify your Wordpress login page with 6 premade designs:Learn More
(You must log in or sign up to post here.)