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 How to use Custom Mobile Menu?

Discussion in 'Basic Support Forum' started by qqwe1, Mar 3, 2019.

Page 1 of 2
  1. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    I have hide desltop menu, but mobile menu still display.
    How to use DU Custom Mobile Menu and hide default mobile menu?
    Hide Header & Footer on Visual Builder
    <style>
    html.et-fb-root-ancestor #main-header, html.et-fb-root-ancestor #top-header, html.et-fb-root-ancestor #main-footer {
    display: none!important;
    }
    </style>
     

    Attached Files:

    #1 qqwe1, Mar 3, 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
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Basically, just go to edit your custom header in Divi > DU Header - Library. Then Add a new section > Load From Library > Custom Mobile Menu & save it. The default Divi mobile menu will then be hidden & the premade Divi Builder menu will be used instead.
     
    #2 Divi.Help Pro Support, Mar 3, 2019
  3. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    I have import Divi-Ultimate-Header-Library.json
    But I don't see "Custom Mobile Menu" in my Library
     

    Attached Files:

    #3 qqwe1, Jul 6, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    The custom mobile menu section is just a normal saved section that appears in WP Admin > Divi > Divi Library.

    It doesn't show up in WP Admin > Divi > DU Header - Library
     
    #4 Divi.Help Pro Support, Jul 6, 2019
  5. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    I have Load From Library > Custom Mobile Menu and save as a "fu-mobile-menu1" in DU Header - Library, and how to let it work?
     
    #5 qqwe1, Jul 6, 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
  6. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Let me explain the usage of Custom Mobile Menu section.

    In any case where you wish to use a Divi Builder mobile menu, instead of the default Divi mobile menu, then you can utilize the premade Custom Mobile Menu section.

    Basically, you just need to:
    1. Go to edit your custom header in Divi > DU Header - Library
    2. Add a new section > Load from Library > Custom Mobile Menu.
    3. Change the image to your own logo.
    4. Save it & done.

    **But do note that with this method, you can only have the default dropdown style for the mobile menu.

    In short, the premade custom mobile menu section is just made up of a logo image module + inline hamburger menu icon that triggers default dropdown menu. Once you added the premade custom mobile menu section, the default Divi header will then be hidden from mobile.

    Though, we do recommend to use the default Divi header in mobile, as you can have more styling choices: default dropdown / slide in / fullscreen menu: https://divi.help/threads/for-mobile-menu-how-to-show-slide-in-or-fullscreen-menu.646/
     
    #6 Divi.Help Pro Support, Jul 6, 2019
  7. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    Yes, I try to add a new template in DU Header - Library, but my website mobile menu still is the Divi default mobile menu.
    Would you please help?
    1. Go to edit your custom header in Divi > DU Header - Library, Then add a new layout template "fu-mobile-menu1"
    2. Add a new section > Load from Library > Custom Mobile Menu.
    3. Change the image to your own logo.
    4. Save it & done.
     

    Attached Files:

    #7 qqwe1, Jul 6, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  8. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I recorded a video to demonstrate what I meant: http://recordit.co/xpE1UrGzCv
    **The video show the usage of Custom Mobile Menu + Header Style 1. Same theory apply for all other header styles.

    Let me know if you still have any other questions.
     
    #8 Divi.Help Pro Support, Jul 7, 2019
  9. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    Thanks!~ I'll try it, and how can I let menu be centered?
     

    Attached Files:

    #9 qqwe1, Jul 7, 2019
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Freelancer' Divi layout for all Pro members:View Demo
  10. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    It's the text alignment settings in the menu module. See screenshot below:

    upload_2019-7-7_15-45-50.png
     
    #10 Divi.Help Pro Support, Jul 7, 2019
  11. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    Thanks! It's work now.
    And how could I let mobile menu toggle icon in left?
     

    Attached Files:

    #11 qqwe1, Jul 7, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  12. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    1. First go to the wireframe mode to easily open the settings:

    upload_2019-7-7_16-6-23.png

    2. Look for the custom mobile menu section:

    upload_2019-7-7_16-7-22.png

    3. Then, go to the logo image module settings > Advanced > Custom CSS > Main Element & add the below:
    Code:
    Log In or Sign Up to view this code.
    4. Lastly, go to the menu module settings > Advanced > Custom CSS > Main Element & change text-align: right!important; to text-align: left!important;
     
    #12 Divi.Help Pro Support, Jul 7, 2019
  13. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    Good job!
    Amazon! It's all OK now~
    Thanks for your support~
    Love DIVI ULTIMATE HEADER so much!!!!
     
    #13 qqwe1, Jul 7, 2019
    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  14. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    And when I click mobile menu how can it change toggle icon?
    Thanks
     

    Attached Files:

    #14 qqwe1, Jul 14, 2019
  15. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #15 Divi.Help Pro Support, Jul 14, 2019
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  16. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    Thanks! You are always my salvation!!!
     
    #16 qqwe1, Jul 14, 2019
  17. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    And how can I modify the DU Regular Menu hover color? it's always gray...
     

    Attached Files:

    #17 qqwe1, Jul 20, 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
  18. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You can change the hover text color in Theme Customizer > Divi Ultimate Header Plugin > Header & Navigation Styling > Menu Hover Text Color
    **See screenshot below:

    upload_2019-7-21_17-23-34.png
     
    #18 Divi.Help Pro Support, Jul 21, 2019
  19. qqwe1

    qqwe1 New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    Hi
    When I upgrade to Divi 4.0
    My DU Regular menu change to inline menu!!!
    Would you please help me?
     

    Attached Files:

    #19 qqwe1, Oct 17, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  20. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    #20 Divi.Help Pro Support, Oct 17, 2019
(You must log in or sign up to post here.)
Page 1 of 2