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

Mobile Style 11

Discussion in 'Basic Support Forum' started by Ron Divi Man, Nov 30, 2020.

  1. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I'd like to use the mobile style of this header "https://header-demo.diviultimate.com/style-11/"
    with some of the other styles on the Divi Ultimate Header library as it looks very nice and I think I would use it a lot. How do I copy this over to the other header styles?
     
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Digital Marketing' Divi layout for all Pro members:View Demo
  2. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    To be clear, I'd like to use the mobile style of this header "https://header-demo.diviultimate.com/style-11/" with the desktop style of this header: "https://header-demo.diviultimate.com/style-8/"
     
  3. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You just have to use custom header style 11 & load style 8 in it. Then set the style 11 sections to be hidden in desktop.

    Also you need to set this: Theme Customizer > Divi Ultimate Header Plugin > Vertical Navigation > Always hide vertical navigation & show hamburger menu

    That's all.
     
    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
  4. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Your instructions were clear. Didn't work. Had a combination of both menus. Goal is to have only style 8 show on desktop and style 11 mobile hamburger menu show on tablet and phone with that cool slide in. Also, weird stuff going on as I choose sections to hide on phone but they don't disappear.
     
  5. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    To be clear, I had both menus showing on the desktop. The regular menu of style 8 and the hamburger menu with white header bar showing of style 11.
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  6. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Do note that if you have Divi Static CSS File Generation enabled, you will need to clear the cache after you make the changes: WP Admin > Divi > Theme Options > Builder > Advanced > Static CSS File Generation > Clear

    As for the white header bar (style 11) section, you just need to set it to be hidden on desktop. See screenshot below:

    upload_2020-12-2_17-44-5.png
     
  7. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I'm very proficient in DIVI but not sure why I can't get this to work. Any chance you can show me a working example since it will only take you a few minutes?
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  8. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Attached is the .json file. Just import it in Divi Library, named: Mixture of style 8 and 11
     

    Attached Files:

  9. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Perfect. Will you do one more for me? I need the mobile style 12 mixed in for the desktop style 8. Basically the same thing you just did for me using mobile menu 12 instead of 11.

    In addition, I wanted to experiment with the divi builder so I could have different menus for certain pages. The first thing I did was choose "None" for the navigation style on the customizor for your Divi Ultimate Header Plugin so duplicate menus won't show on every page. Then I imported your json file to the builder and changed the menu from primary to a new test menu. The desktop showed the change but the mobile menu seems to be locked on the primary menu. I cleared the static CSS file. Is the mobile menu of this hard coded? How can I achieve this?

    I'd also like to know what parts to copy so I could use your mobile menu with other navigation menus that I create that are not using your templates. For example, I would like to use your mobile menu 10 and 11 on a bunch of existing sites that I like my regular menu but have generic divi mobile menu layouts. Thanks for your help. I really love the mobile slide in menu used this way.
     
    1. PRO MEMBER PERKS Divi.Help Header AI Generator - Try the power of AI to generate a custom Divi header for you:Try Now
  10. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I recorded a video to show you how it's done: https://recordit.co/XcnWh7YhGa
    By default in mobile, it will revert to use the default Divi mobile header, so that you can have slide in / fullscreen menu in mobile. But it will always use the primary menu.

    Unless if you are using our style 11 / 12 mobile menu, you can choose the menu you want to show in mobile.
     
  11. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Thanks for the video. The layout correctly pulls style 8 for the desktop and style 12 for the mobile now. Still having issues showing a different menu in mobile slide out. No matter what I choose, it always shows the primary menu in the mobile slide out. See attached images..
     
    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  12. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You should change this menu module:

    upload_2020-12-5_16-7-17.png
     
  13. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    There it is :) Thanks. So what's involved if I want to use only the mobile slide outs of style 11 and 12 with other headers I may build or purchase? Typically they only use the plain Divi mobile menu that isn't fancy at all.
     
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  14. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Just use the same method as the previous video that I recorded. But make sure that you're using our header plugin to load the custom header.

    To make your custom Divi Library item selectable in our header plugin, you just need to add the Divi Library item to the category Header & Navigation:

    upload_2020-12-5_16-27-20.png
     
  15. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Perfect. I will try that and let you know how it comes out. Thanks again for all your help.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  16. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I purchased the Ultimate Header & Footer 2 weeks ago. Plugin is having too much trouble with Divi and the recent WordPress update. How do I request a refund for both products?
     
  17. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    We have just released a fix for the header plugin sticky issue with Wordpress 5.6: https://divi.help/threads/divi-ultimate-header-plugin-v3-0-2.7135/#post-22885

    Try to install it & see if it works.

    As for the footer plugin, it seems to work fine to me. If you're still facing any other issue, let us know & we will look into it. Thanks.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  18. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Is there a way to make a menu in the divi builder and have it trigger your demo style 12 menu for mobile.
     
  19. Ron Divi Man

    Ron Divi Man New Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I am trying to replicate this menu in desktop mode: https://www.redwhiteblueapparel.com/ and use your mobile slide in from demo style 12.
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  20. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You just need to add this CSS Class to your module: free-vertical-navigation-trigger