1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, 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

Mobile Menu

Discussion in 'Basic Support Forum' started by aya, Nov 29, 2019.

  1. aya

    aya New Member

    Hello , how come the mobile menu is showing an old default menu not the customized menu (header 8)I customized that works on the computer. Am I doing something wrong?
     
    #1 aya, Nov 29, 2019
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  2. aya

    aya New Member

    Ok After I read alot, I added something to remove the default old header and added visibility for the section to show on mobile but it still doesn't.
     
    #2 aya, Nov 29, 2019
  3. aya

    aya New Member

    #3 aya, Nov 29, 2019
    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
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Let me guide you on this.

    1. Upon checking your issue, I found a bug in our menu module in mobile. And thus updated v3.0.1 to include the fix. So the first step to do is to re-download & re-install v3.0.1: https://divi.help/threads/divi-ultimate-header-plugin-v3-0-1.3426/#post-11177

    2. Next, I see that you already added the CSS code to hide the default Divi header in mobile. The reason we revert back to use default Divi header in mobile is for you to have slide in / fullscreen menu in mobile. Anyway, now let me explain why the Divi Builder section isn't showing in mobile.
    • Sticky section is set to be hidden in mobile & tablet by default. To make it show in mobile, you need to go to the Section Settings > Advanced > CSS Class & add free-sticky-mobile-show
    • What if you wish to show the sticky section in mobile, but disable the sticky feature? You just need to go to the Section Settings > Advanced > CSS Class & add free-sticky-mobile-disable
    • Here's the sticky feature documentation: https://divi.help/threads/sticky-feature-documentation.2294/
    • And now, it's the Visibility option issue. You need to go to the Section Settings > Advanced > Visibility & untick Phone and Tablet. You need to do that for the Menu Module Settings as well.
    3. Now, you should see the Divi Builder header section in mobile. But you will see that your mobile hamburger dropdown menu background color is transparent. You can set the color in: Menu Module Settings > Design > Dropdown Menu > Mobile Menu Background Color.

    4. And one last issue that I see from your site. When you hover the menu module in desktop, you will see a scroll beside it. This is due to the overflow settings that you set for the menu module. To solve it, you just need to set this: Menu Module Settings > Advanced > Visibility > Vertical Overflow > Default.

    Let me know if you still have any other questions.
     
    #4 Divi.Help Pro Support, Nov 29, 2019
  5. hungrytradingcompany

    hungrytradingcompany New Member

    Hello :)

    Thanks for the help. I have also been trying to figure this out. for some reason, i cant get the header on mobile to stick ... any ideas? I have followed all the steps above ...

    here is the site: https://cacaosculpt.com/

    Also, how do you change the colour of the blue line between the burger and the drop down?

    Thanks :)
     
    #5 hungrytradingcompany, Dec 1, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  6. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    In the mobile menu section settings, you need to add free-sticky CSS Class as well.

    As for the blue line color, try to change it at Menu module settings > Design > Dropdown Menu > Dropdown Menu Line Color.
     
    #6 Divi.Help Pro Support, Dec 1, 2019
  7. aya

    aya New Member

    Thank you for your assistance... It's now appearing but I have a few concerns, the page on mobile doesn't look right... How can I edit the location of the burger lines and the logo on mobile menu.... It's too big for mobile, right?
     
    #7 aya, Dec 1, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  8. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    To make the burger menu smaller, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    As for the color adjusting, you can do that in the menu module settings or the below CSS:
    Code:
    Log In or Sign Up to view this code.
    Let me know if you have any other questions.
     
    #8 Divi.Help Pro Support, Dec 1, 2019
  9. aya

    aya New Member

    Final Problem (I hope)....This picture sums up all my problems....

    -Hamburger menu color I want it white
    - The logo and hamburger not on the same line? I want them same row like desktop
    - The menu text can it be aligned in the center?

    Thank you!
     

    Attached Files:

    #9 aya, Dec 3, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  10. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    If that's how you want it to be, why not you just use the default Divi mobile menu? It's similar to what you want to achieve (logo & hamburger on the same line) & you can even choose the mobile menu to be slide down (default) / slide in / fullscreen menu.

    As for the default Divi menu hamburger color, you can change it in Theme Customizer > General Settings > Layout Settings > Theme Accent Color
     
    #10 Divi.Help Pro Support, Dec 3, 2019
  11. aya

    aya New Member

    I’m sorry I was out of town...
    Ok how can I get back only the mobile menu to default? But the desktop my customized one.
     
    #11 aya, Dec 11, 2019
    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

    First, go to WP Admin > Divi > Theme Options > Custom CSS & find the below CSS & delete it:
    Code:
    Log In or Sign Up to view this code.
    **You can then style it in Theme Customizer > Header & Navigation

    Lastly, you need to go to WP Admin > Divi > DU Header - Library to edit your custom header & go to your Section Settings > Advanced > Visibility & set it to be hidden in Tablet and Phone.
     
    #12 Divi.Help Pro Support, Dec 11, 2019
(You must log in or sign up to post here.)