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

break point in menu

Discussion in 'Basic Support Forum' started by Chris Stinson, May 2, 2019.

  1. Chris Stinson

    Chris Stinson New Member

    i am sure it is listed here somewhere but i can find it. I need help with the break point on the menu. I want to show the hamburger menu as soon as the screen is to small and makes my menu go to 2 lines. how can i achieve this with css? or can you just show me how to switch to the hamburger menu when the screen size gets to a certain size? thanks

    https://combinefitness.ca
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS. I added explanation comments on each CSS.
    Code:
    Log In or Sign Up to view this code.
    If during the breakpoint, you wish to show hamburger instead, then additionally add the below CSS:
    Code:
    Log In or Sign Up to view this code.
     
  3. Chad Williams

    Chad Williams Member
    Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I used this to get it to work. Just reset your break point from 1180px to what you want.
    Paste in Divi > Theme Options > Custom CSS




    @media only screen and (max-width: 1180px) {

    /* Hide the first section & the sticky section */
    .free-du-plugin-header .et_pb_section:first-child, .free-sticky-wrapper {
    display: none!important;
    }

    /* Show the default Divi menu */
    #main-header, #top-header {
    display: block!important;
    }

    /* Optional: During the breakpoint, use hamburger menu instead */
    #main-header #top-menu-nav {
    display: none!important;
    }
    #main-header #et_mobile_nav_menu {
    display: block!important;
    }

    }
     
    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