1. HOT Divi Ultimate Header Plugin - Design Divi custom header globally in Divi Builder: https://header.diviultimate.com/

Solved Change all Breakpoints // Mobile view

Discussion in 'Get Help On Divi Wordpress' started by Felix08, Jul 7, 2019.

  1. Felix08

    Felix08 New Member

    Hello!
    I dont know if its possible, but I want my website (www.felixputzenlechner.com) change to the mobile mode earlier! I think the default is 981px! I tried it many times but is there any way I can change everything to 1200px? I have change all breakpoints I put in my css myself but It just a mess.

    Best Wishes,
    Felix
     
    #1 Felix08, Jul 7, 2019
    Last edited: Jul 7, 2019
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    This is a tough one. Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    @media screen and (max-width: 1220px) {
        .et_vertical_nav #page-container #main-header {
            width: 100%!important;
            height: auto!important;
            padding: 0!important;
        }
        #logo {
            height: 40px!important;
            max-height: 40px!important;
            width: 40px!important;
            max-width: 40px!important;
        }
        #page-container #et-main-area {
            margin-left: 0!important;
        }
        #top-menu-nav {
            display: none!important;
        }
        #et_mobile_nav_menu {
            display: block!important;
        }
        #et-top-navigation {
            margin-top: 20px!important;
        }
        .et_vertical_nav.et_header_style_left .logo_container {
            position: absolute!important;
            height: 100%!important;
        }
        span.mobile_menu_bar.mobile_menu_bar_toggle.et_divi_100_custom_hamburger_menu__icon {
            margin-bottom: 26px!important;
        }
        #mobile_menu {
            display: block!important;
            min-height: 100vh;
            height: 100%;
            top: 0;
            right: 0;
            position: fixed;
            z-index: 9998;
            overflow: scroll;
            border-top: none;
            padding-top: 60px!important;
        }
        .mobile_nav.opened #mobile_menu {
            -moz-background-size: cover;
            -o-background-size: cover;
            -webkit-background-size: cover;
            position: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0);
            -webkit-overflow-scrolling: touch;
            -webkit-transition: -webkit-transform 0.4s 0s;
            -moz-transition: -moz-transform 0.4s 0s;
            transition: transform 0.4s 0s;
            z-index: -5;
        }
        .mobile_nav.closed #mobile_menu {
            -moz-background-size: cover;
            -o-background-size: cover;
            -webkit-background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-transform: translateX(100%);
            -moz-transform: translateX(100%);
            -ms-transform: translateX(100%);
            -o-transform: translateX(100%);
            transform: translateX(100%);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: -webkit-transform 0.4s 0s;
            -moz-transition: -moz-transform 0.4s 0s;
            transition: transform 0.4s 0s;
            z-index: -5;
        }
        .et_mobile_menu li a {
            color: #fff!important;
            width: 100%;
            float: left;
            border: none!important;
            text-align: left;
            margin: 5px 10px;
            transition: .4s 0s;
            text-transform: uppercase;
            font-size: 1.4em!important;
        }
        .mobile_nav.opened #mobile_menu .sm-icon-1, .mobile_nav.opened #mobile_menu .sm-icon-2 {
            display: none!important;
        }
    }
     
    Felix08 likes this.
  3. Felix08

    Felix08 New Member

    Thanks! Worked perfectly! Can I give you a rating for your reply?
     
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Glad it works for you! And nope, there's no rating on our site. We are just third party developers providing free advice to fellow Divi community.

    If you wish to show us some support, take a look around our premium Divi products. ;)
     
    Felix08 likes this.

Recommended Divi Hosting