Machen 3 Linien Menü für große Bildschirme

Question

Es gibt 4 Links, die angezeigt werden würde, wenn jemand auf 3 line Menü-Taste in der gegebenen Bild klickt. Mein Problem ist, dass dieses Menü für einen kleinen Bildschirm funktioniert. Ich möchte diese Funktion außer Kraft setzen, indem ich sie auf einem großen Bildschirm wie 767px usw. anzeige. Ich bin verwirrt, wo ich welchen Code in meiner CSS-Datei finden sollte. Hilf mir!

Css_File

@charset "utf-8"; 
/* CSS Document */ 

.navbar-default[role="transparent_navbar"] 
{ 

    background-color: white; 
    border-color: white; 
} 
.navbar-default { 
    background-color: #787878; 
    border-color: #5e5b60; 
} 
.navbar-default .navbar-brand { 
    color: #6ecd6e; 
} 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: #ffb600; 
} 
.navbar-default .navbar-text { 
    color: #6ecd6e; 
} 
.navbar-default .navbar-nav > li > a { 
    color: #6ecd6e; 
} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: #ffb600; 
} 
.navbar-default .navbar-nav > li > .dropdown-menu { 
    background-color: #787878; 
} 
.navbar-default .navbar-nav > li > .dropdown-menu > li > a { 
    color: #6ecd6e; 
} 
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, 
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus { 
    color: #ffb600; 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider { 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, 
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, 
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
    color: #ffb600; 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #ffb600; 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus { 
    color: #ffb600; 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-toggle { 
    border-color: #5e5b60; 
} 
.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-toggle .icon-bar { 
    background-color: #6ecd6e; 
} 
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form { 
    border-color: #6ecd6e; 
} 
.navbar-default .navbar-link { 
    color: #6ecd6e; 
} 
.navbar-default .navbar-link:hover { 
    color: #ffb600; 
} 

@media (max-width: 767px) { 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
    color: #6ecd6e; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
    color: #ffb600; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
    color: #ffb600; 
    background-color: #5e5b60; 
    } 
} 

Answer 1

Fügen Sie den folgenden CSS:

• Anzeige die volle navbar auf Bildschirmen mit einer Breite von 767px oder mehr.

• Anzeige der drei Linien auf Bildschirme mit einer Breite unter 767px.

  @media (min-width: 767px) 
      // add style for full navbar 
  
  @media (max-width: 767px) 
      // add style for 3-line navbar 
  

Answer 2

Aus der Antwort eines anderen question, die folgende Art in Ihrer benutzerdefinierten CSS schreiben, ohne Medienabfrage zu verwenden. Dieser Code überschreibt die Medienabfrage und zeigt die 3-zeilige Menüschaltfläche in allen Bildschirmgrößen an.

.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-collapse.collapse.in{ 
    display:block !important; 
} 

Answer 3

Vielen Dank für Ihre wertvolle Zeit. fand ich die richtige Antwort aus den unten stehenden Link

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

ich den unten CSS-Code implementiert und fand die Lösung genau das, was ich suchte.

-Code

@media (max-width: 1000px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .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; 
    } 
} 

Answer 4

Sie können diese durch diesen Link gefolgt Jasny Plugin versuchen: - Jasny Plugin For Offcanvas Bootstrap Menu