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 Website layout and mobile menu is not like the demo

Discussion in 'Basic Support Forum' started by Kevin Nguyen, Feb 18, 2021.

  1. Kevin Nguyen

    Kevin Nguyen Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hello,

    I'd like to design our homepage like your demo, however, there's something wrong with my setting and I need help:
    1. My website layout is not like the demo of the Magazine, it also aligned left instead of center
    2. The desktop menu of style 10 is not full with like the demo
    3. I'd like to use the style 12 for mobile menu but it doesn't appear although I've tried to add it to the the style 10 without overwrite and check to not visible on desktop.
    My website URL: https://thongtinhanquoc.com/
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    The left empty space is due to the usage of style 12 (vertical navigation style).

    To fix it, just go to Theme Customizer > Divi Ultimate > Vertical Navigation > Always hide vertical navigation & show hamburger menu > enable it & save it.
     
    Kevin Nguyen likes this.
  3. Kevin Nguyen

    Kevin Nguyen Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    The style 12 doesn't appear on mobile, how can I fix it?
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade before / after image slider for your Divi site without using any plugins:View Demo
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Seem like you deleted the hamburger menu section as well:
    **You will need to keep the hamburger menu section & set it to be hidden on desktop only.

    upload_2021-2-19_0-11-39.png
     
    Kevin Nguyen likes this.
  5. Kevin Nguyen

    Kevin Nguyen Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Really? What should I do then?
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  6. Kevin Nguyen

    Kevin Nguyen Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    If you're using Divi Ultimate Child Theme, then you don't have to install the standalone plugins (header, footer, blog, archive), or else you will have overlap features. Divi Ultimate Child Theme already has all the features built-in. Those standalone plugins are meant to be used on Divi sites that doesn't use our child theme.

    Once you disabled all those standalone plugins (header, footer, blog, archive), then it should work properly.
    To force it on top, you may try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    Kevin Nguyen likes this.
    1. PRO MEMBER PERKS Divi.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
  8. Kevin Nguyen

    Kevin Nguyen Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Wow, problems solved. Thank you so much for helping us ~ Just one more question, is there a way to make a top level menu clickable instead of expanding the child menu?
     
  9. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You can change that in Theme Customizer > Divi Ultimate > Vertical Navigation > Only trigger collapsible menu upon clicking on arrow icon
     
    Kevin Nguyen likes this.
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  10. Kevin Nguyen

    Kevin Nguyen Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Wonderful ~ Thank you so much for the helping
     
    Divi.Help Pro Support likes this.
  11. Kevin Nguyen

    Kevin Nguyen Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hello,

    I have a problem with mobile menu on our site, the vertical menu is always push down to a space if there's Google auto banner on the top. How can I pull it back to the top? I did add the following CSS code but it doesn't work: .free-vertical-navigation-wrapper {top: 0!important;}
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  12. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    That should be the right CSS code to force it to the top: .free-vertical-navigation-wrapper { top: 0!important; }

    I tried to view your site, but I couldn't see the Google top ad banner. I also see that you doesn't have the above CSS loaded.
     
  13. Kevin Nguyen

    Kevin Nguyen Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    The CSS code doesn't work :( The Google banner's display is very randomly, whenever it is at the bottom then there's no problem with the vertical menu. It only happens when the Google's banner is at the top. How can I show you then?

    BTW: there's no banner at the homepage, please try with every blog post under it :)
     
    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
  14. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I tested quite a few pages & all showing this top inline ad banner:

    upload_2021-4-9_13-21-21.png

    By the way, have you added the CSS to your site: .free-vertical-navigation-wrapper { top: 0!important; }

    I still couldn't see the CSS on your site.
     
    Kevin Nguyen likes this.
  15. Kevin Nguyen

    Kevin Nguyen Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Nevermind, I got it ~ Thank you so much :)
     
    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