תפריט מובייל גם במסכים גדולים?

התקדמתי מעט.
בעזרת CSS יש כבר toggle אבל מצב ההתחלה הוא נראה
עד שהתמונה מכסה אותו.
לא הצלחתי להגדיר לו מצב סגור collaped בהתחלה.
אני מצרף את ה CSS שיצרתי – 4 שורות ראשונות מעניינות
כל השאר, ענייני עיצוב אחרים. לטובת התמונה המלאה גם הם כאן

.navbar-toggle {display:block;}
.navbar-collapse.collapse {height:0 !important;}
.navbar-collapse.collapse.in, .navbar-collapse.in {height:360px !important}
.nav-main .navbar-collapse .mobile-menu {margin-top:5px;}
#header .nav-main {border-color:white !important;}
#header .container {width:100%; padding-left:0; padding-right:0;}
.navbar-collapse {padding-left:0; padding-right:0;}
.sf-menu a, .mobile-menu a { text-align:center; font-size: 22px !important;}
.sf-menu a:hover, .mobile-menu a:hover { color: white  !important; background-color: #30bdc7 !important;}
.nav-main .navbar-collapse .mobile-menu > li a {
    line-height: 3.5em !important;
}

.navbar-toggle {margin-right: 55px;}
.bx-wrapper {max-width:100%}

#header .logo {
    text-align: left;
    margin-left:50px;
}

כמעט. איך אני מבטיח שבהתחלה התפריט עולה במצב סגור ולא פתוח?