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 Why doesn't my Button Work in Style #10 on a mobile device

Discussion in 'Basic Support Forum' started by laurenbach, Oct 21, 2019.

  1. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

    Hi DIVI Header help-
    Why doesn't my Button Work in Style #10 on a mobile device? Here is a link to my site http://38j.350.myftpupload.com/. There is a button in the upper right corner that is orange that says "Get in Touch" and is a link to dial a phone # but when I go to my cell phone (iphone) it doesn't appear at all? Why and how do I fix that?

    Lauren B.
     
    #1 laurenbach, Oct 21, 2019
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Cause the button is not part of the menu. It's just a button module float to the right side.

    There are 2 ways to display the button:
    1. Display above the social icon (see screenshot below):
    upload_2019-10-22_10-47-51.png

    **For this, you just need to add the button in the first column of the social icon & set it to be hidden in desktop.

    2. But if you wish to show it in the mobile menu, then you have to create another similar menu, but with the 'Get In Touch' menu item. After creating the new menu with 'Get In Touch' menu item, you need to set it as primary menu. As for the menu module in the custom header (WP Admin > Divi > DU Header - Library), you need to set it to use the old menu (without 'Get In Touch' menu item).
     
    #2 Divi.Help Pro Support, Oct 21, 2019
  3. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

     
    #3 laurenbach, Oct 21, 2019
    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
  4. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

    I like the primary Menu system the way it looks on the desktop view but I need to get the button to appear on the mobile menu. Currently the mobile menu is simply using the original logo and I don't think the DU Header at all. I know this because it was showing my old logo on the mobile menu until I added the new logo under Theme < Options and insert the logo. Is there a way to adjust the mobile menu and not touch the Desktop/Tablet view?
     
    #4 laurenbach, Oct 21, 2019
  5. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Yup. By default in mobile, it will revert back to use the default Divi header so that you can have slide in / fullscreen menu in mobile: https://divi.help/threads/for-mobile-menu-how-to-show-slide-in-or-fullscreen-menu.646/
    As stated in previous post:

    But if you wish to show it in the mobile menu, then you have to create another similar menu, but with the 'Get In Touch' menu item. After creating the new menu with 'Get In Touch' menu item, you need to set it as primary menu. As for the menu module in the custom header (WP Admin > Divi > DU Header - Library), you need to set it to use the old menu (without 'Get In Touch' menu item).

    Let me know if you need any further clarification.
     
    #5 Divi.Help Pro Support, Oct 21, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade rolling text design for your Divi site without using any plugins:View Demo
  6. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin


    Hi Ultimate DIVI Header-
    This is confusing to me, I see that the DU Style # selected for the DIVI Theme only applies to the desktop then and not the mobile or tablet view. Is there a manual on how to add the style say style #10 to the mobile menu? I realize that you are saying the Mobile menu is relying on the primary menu system but if that were the case, my social media icons in the grey bar would not appear at the top of my iphone menu so it is looking at my DU Library Style #10 and not just the primary menu system and logo. It is adding some components from Style #10 DU Header Library item. If you have any instruction on how to properly update the mobile menu when applying a DU Header style great. Please send me the link. Also how can I duplicate a Style # say #10 and rename it Style #10A so I don't mess with the original layout. It is not an option in the Theme Customizer Header Style because the Type is not set to Layout like the others. How do I properly copy a Style rename it and set it to be a Layout type so it appears in the dropdown list under Theme Customizer < Header Styles?

    Lauren B.
     
    #6 laurenbach, Oct 22, 2019
  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    By default, in mobile, it will revert back to the original Divi header, but you can still choose to have custom header elements to show in mobile by setting the visibility options. That's why your social icon is still shown below the default Divi mobile menu.

    As to why the desktop sticky menu section is hidden in mobile & tablet, it's because we set sticky elements to be hidden by default in mobile & tablet.

    Thought of a simpler way to achieve the "Get in touch" in mobile menu. I'll explain below step by step:
    1. Go to WP Admin > Appearance > Menus.
    2. Click on 'Screen Options' on the top right side & tick CSS Classes. See screenshot below:
    upload_2019-10-23_11-8-29.png

    3. Proceed to add a custom link menu item for your 'Get In Touch':
    upload_2019-10-23_11-20-32.png

    4. Then add CSS Class du-mobile-only in it:
    upload_2019-10-23_11-22-27.png

    5. Lastly, add the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    And done.
    Check out this post: https://divi.help/threads/duplicate-header.2261/#post-7090

    Let me know if it works for you.
     
    #7 Divi.Help Pro Support, Oct 22, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  8. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}


    HI DU Header Help-

    I followed your instructions to add the “Get in Touch” link so it dials on a mobile device and shows up in the menu. It is not appearing on my phone and I have hit ‘Reload’ multiple times. I followed all your steps below.



    Let me know what went wrong.



    Thank you!
     
    #8 laurenbach, Oct 24, 2019
  9. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

    We went live with the website - here is the link - https://irmcgroup.com/. Let me know as all your steps seemed valid and made sense.

    Lauren B.
     
    #9 laurenbach, Oct 24, 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
  10. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Looks fine to me. Perhaps you just need to clear your browser cache.
     
    #10 Divi.Help Pro Support, Oct 24, 2019
  11. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

    How do you clear a browser cache on an iphone? Are you seeing this button "Get in Touch" in the menu system on your phone - again website is IRMCGroup.com Please advise.
     
    #11 laurenbach, Oct 25, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  12. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

    Wait nevermind I see it thank you!

    Lauren B.
     
    #12 laurenbach, Oct 25, 2019
(You must log in or sign up to post here.)