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

Solved Menu - 2 lines on small laptop

Discussion in 'Support Forum' started by Jamesdaley38, Dec 12, 2024.

  1. Jamesdaley38

    Jamesdaley38 Member
    Divi Block Pro

    Hiya - what would you suggest to get around the menu breaking to 2 lines on a small laptop? For example, changing the breakpoint or allowing more space for the menu module (in the centre row). The website is: https://jamesd232.sg-host.com/

    Thanks
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    If you wish to just target that specific size, you may try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
  3. Jamesdaley38

    Jamesdaley38 Member
    Divi Block Pro

    Thanks - but that doesn't seem to work (mobile still kicks in at 980px)?
     
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    If you want the mobile menu to kick in earlier, try the below CSS:
    Code:
    Log In or Sign Up to view this code.
     
  5. Jamesdaley38

    Jamesdaley38 Member
    Divi Block Pro

    Thanks - we're getting closer :) The only issue now is that at 1330px the hamburger appears in the centre of the row & we still have the contact button...so it's not the proper mobile menu kicking in. See attached & thanks again.
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  6. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I see what you meant. For the desktop menu section, go to the Section Settings > Advanced > Custom CSS > Free-Form CSS & add:
    Code:
    Log In or Sign Up to view this code.
    As for the mobile menu section, go to the Section Settings > Advanced > Custom CSS > Free-Form CSS & add:
    Code:
    Log In or Sign Up to view this code.
     
  7. Jamesdaley38

    Jamesdaley38 Member
    Divi Block Pro

    Thanks very much. Just to double-check...is that in addition to the code you sent earlier (or instead of):

    @Media screen and (max-width: 1330px) and (min-width: 981px) {
    .et_pb_menu .et_pb_menu__menu {
    display:none!important;
    }

    #page-container .et_mobile_nav_menu {
    float: none;
    margin: 0 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
    .et_mobile_nav_menu {
    padding: 22px !important;
    }
    }
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  8. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Instead of. You don’t need the previous css.
     
  9. Jamesdaley38

    Jamesdaley38 Member
    Divi Block Pro

    Hi - thanks for this. While site was in staging, I thought this was ok. However...I've just set it live on https://demoncampers.com/ and I have 2 issues:
    • both menus are flashing, before settling on the correct one for the screen size, which looks really bad. I've recorded this loading & have attached a screen shot. I've cleared caches, turned off caching plugin and have static CSS file generation enabled...but nothing improves this
    • I'm not sure if this is related, but when my client tries to amend a project in the visual builder on his 13" MacBook, the two menus appear (from the theme builder) and only give him about 1cm to work with.
    Any suggestions on how we fix this please? Thanks again.
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
  10. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Enable Static CSS File Generation & disable Output Styles Inline. See screenshot below:
    **The first visit will generate the CSS file. You will not see the flashing for the subsequent visits.

    upload_2020-5-20_23-32-54 (5).png
    Since it's just part of the Theme Builder, it should work just like normal Divi site would do.

    Perhaps it's a cache issue. You may try to edit that page yourself & see if you face the same issue.
     
  11. Jamesdaley38

    Jamesdaley38 Member
    Divi Block Pro

    Sorry - that doesn't work. I already enabled static CSS file generation & output styles inline were already disabled. Go to the home page (see issue), visit another page & come back to home page...issue is still there, I'm happy to send a video if you like.
     
    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

    Another way is to use our empty preloader to show white screen until the css are loaded completely.

    Go to Divi Block & look for the preloader section & export the first one with white screen preloader.

    Then go to your Divi Theme Builder & edit your global header & import the preloader json file & switch to wireframe mode to move all the preloader sections to the top.
     
  13. Jamesdaley38

    Jamesdaley38 Member
    Divi Block Pro

    Thanks for your efforts, but I've just binned it & started again
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo