How to show hamburger menu starting from 1024px in Zerif

Go to Appearance->Customize->Additional CSS and add the following:

@media (min-width: 320px) {
 .navbar-header {
    float: none;
 }
 .navbar-left,.navbar-right {
    float: none !important;
 }
 .navbar-toggle {
    display: block;
 }
 .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
 }
 .navbar-collapse.collapse {
    display: none!important;
 }
 .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
 }
 .navbar-nav>li {
    float: none;
 }
 .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
 }
 .collapse.in{
    display:block !important;
 }
 .navbar-inverse .navbar-nav {
    padding-left: 10px;
    line-height: normal;
    text-align: center;
 }
 .navbar-inverse .navbar-nav>li {
    display: inline-block;
    margin-bottom: 0;
 }
 .navbar-inverse .navbar-nav > li {
    width: 100%;
    border-bottom: 1px solid #EDEDED;
    position: relative;
    margin: 8px 0 0 0;
    padding: 0 0 8px 0;
 }
 .navbar-inverse .navbar-nav > li  a {
    text-align: left;
 }
 .navbar-inverse .navbar-nav ul.sub-menu {
    display: none !important;
    position: relative;
    top: 0;
    box-shadow: none;
    width: 100%;
 }
 .navbar-inverse .navbar-nav li.this-open > ul {
    display: block !important;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li {
    width: 100%;
    float: left;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li a {
    width: 100%;
    float: left;
    padding: 8px 25px 8px 0;
    border-bottom: 1px solid #EDEDED;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li:last-child a {
    border-bottom: none;
 }
 .navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu {
    position: relative;
    left: 0;
    top: 0;
 }
 #main-nav {
    overflow: visible;
 }
 #main-nav, #main-nav.fixed {
    position: relative;
 }
 .navbar-collapse {
    max-height: 100%;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li {
    padding-left: 20px;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li {
    padding-bottom: 0;
    padding-top: 0;
 }
 .dropdownmenu {
    display: block;
    position: absolute;
    z-index: 9;
    right: 0;
    top: 5px;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    background: url(images/menu-icon.png) center center no-repeat #e96656;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li{
    margin-right: 0;
    padding-right: 0;
 }
 .navbar-inverse .navbar-nav > li > a:hover {
    color: #404040 !important;
 }
 .this-open > a {
    color: #e96656 !important;
 }
 ul.nav > li.current_page_item > a:before {
    content: "";
    left: 0px;
    width: 50px;
 }
 #site-navigation {
    width: 100%;
 }
 .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    float: left !important;
 }
 #main-nav {
    overflow: hidden !important;
 }
}

For the Spanish version of this documentation you can check out this link: http://caribdis.com.ar/2016/02/07/zerif-lite-como-mostrar-siempre-el-icono-hamburguesa-para-el-menu/.