Bootstrap Navbar mit eigenem CSS anpassen

Bootstrap Navbar mit eigenem CSS anpassen

Bootstrap Navbar ein wenig mit CSS abändern!\r\nMit etwas CSS kann man diese Navbar schnell an seine eigenen Wünsche anpassen!\r\nHier nur ein kleines Beispiel:\r\n\r\nDie Hintergrundfarbe und den Rahmen mal auf Schwarz sezten:\r\n

.navbar-default {\r\n    background-color: #000;\r\n    border-color: #000;\r\n}\r\n\r\n.navbar-default .navbar-collapse, .navbar-default .navbar-form {\r\n    border-color: #000;\r\n}\r\n\r\n

\r\nDie min-height etwas verringern da dieses für mich etwas zu hoch ist und margin-bottom auf 0 setzen! Wichtig ist hier das man die Werte nicht einfach löscht sondern überschreibt! Radius brauchen wir derweil auch keinen darum auch diesen auf 0 setzen!\r\n

\r\n  .navbar {\r\n position: relative;\r\n min-height: 20px;\r\n margin-bottom: 0px;\r\n border: 0px solid transparent;\r\n border-radius: 0px;\r\n }

\r\nFarben der Links bei Active und Hover …\r\n

.navbar-default .navbar-nav>li>a {\r\n    color: #fff;\r\n    text-decoration: none;\r\n}\r\n.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover,\r\n.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {\r\n    color: #2e3339;\r\n    background-color: #fff;\r\n}\r\n\r\n.navbar-default .navbar-toggle .icon-bar {\r\n    background-color: #fff;\r\n}\r\n\r\n.navbar-toggle .icon-bar {\r\n    display: block;\r\n    width: 44px;\r\n    height: 3px;\r\n    border-radius: 1px;\r\n}\r\n.navbar-toggle .icon-bar+.icon-bar {\r\n    margin-top: 6px;\r\n}\r\n\r\n.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {\r\n    background-color: #4d4e52;\r\n}\r\n

\r\nAm Ende habe ich noch die Tooglebox für die Mobile Ausgabe etwas verändert … für mein Gefühl ist es besser die Box etwas breiter zu machen! Darum von 22px auf 44px geändert best online casino slots!

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.