Bootstrap-Navigationsleiste beim Einklappen schwingender Effekt

Question

Ich habe ein Problem mit meiner Navigationsleiste, wenn sie zusammenbricht, weil meine Liste einen seltsamen schwingenden Effekt hat, wenn sie angezeigt wird, wenn ich auf meine Hamburger-Schaltfläche klicke.

Hier ist es der CSS-Code:

.navbar-header{float:none} 
a.navbar-brand{float:none} 
img.brand{display:block;margin-left:auto;margin-right:auto;text-align:center;width:47%} 
.collapse.navbar-collapse{float: none;text-align: center;padding-left:4%;padding-right: 4%} 
.collapse.navbar-collapse ul{float: none;display: inline-block} 

und wenn jemand einen Blick haben will, hier ist der Link:

http://chickapea.larchedigitalmedia.com/

Vielen Dank im Voraus

Answer 1

Sie haben All Ihre benutzerdefinierten Stile für die nativen Bootstrap-Klassen. Dies wird dazu führen, dass Dinge zu brechen. Ich denke, dass Ihr "Schwingen" von der Tatsache ist, dass Ihre text-align: center; Klasse auf Ihrer .collapse Klasse ist. Die Klasse .collapse verschwindet, wenn Sie auf den Hamburger-Button klicken, damit alle Eigenschaften Ihrer Klasse .collapse ebenfalls verschwinden.

Erstellen Sie benutzerdefinierte Klassen für die Elemente, und wenden Sie das CSS auf die benutzerdefinierten Klassen im Vergleich zu den Bootstrap-Klassen an.