Bootstrap V3 - Navbar probleme beim Zusammenschieben

[Marie]

Hallo,

ich bin kein Designer und habe auch eher rudimentäre Kenntnisse von HTML,CSS und Bootstrap ist mir vollkommen neu.

Aber ich habe trotzdem die Aufgabe bekommen unsere VereinsHP neu zu gestallten mit Mobildesign. Nach einen Dokumentationen habe ich mich für eine Bootstrap verwandte Bootwatch entschieden.

In HTML habe ich das Design auch ganz gut zusammengebaut. Ich habe nur ein Problem beim Zusammenschieben schiebt sich in der NAVBAR die Suche nach unten.

Über Google habe ich keine Hilfe gefunden, aber viele Webseiten die das gleiche Problem haben z.B. Linkbeschreibung .

Unsere Vereinshomepage ist noch nicht online der Kopf sieht aber aus wie bei Tatort Fans:

<div class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
<button data-target=".navbar-responsive-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand logo"></a> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li><a title="Tatort - Startseite" href="/">Home</a></li> <li><a title="Tatort heute Abend" href="tatort-heute-abend/">Tatort heute Abend</a></li> <li><a title="Tatort Kommissare" href="tatort-kommisare/">Kommissare</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" title="Tatort DVD" href="tatort-dvd/">Tatort DVD <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a title="Kommissar DVD Sammlung" href="tatort-dvd/#tatort-kommissar-dvd">Kommissar DVD Sammlung</a></li> <li><a title="Tatort Städtebox" href="tatort-dvd/#tatort-ort-dvd">Tatort Städteboxen</a></li> <li><a title="Themen Spezial" href="tatort-dvd/#tatort-themen-dvd">Themen Spezial</a></li> <li><a title="Jahrzent DVD Boxen" href="tatort-dvd/#tatort-jahrzehnt-dvd">Jahrzent DVD Boxen</a></li> <li><a title="Einzelfolgen" href="tatort-dvd/#tatort-einzel-dvd">Einzelfolgen</a></li> </ul> </li> <li><a title="Tatort Verein" href="tatort-verein/">Verein</a></li> </ul> <form action="/" method="get" id="searchform" class="navbar-form form-inline pull-right"> <input type="text" placeholder="durchsuchen..." id="s" name="s" class="form-control"> <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button> </form> </div> </div> </div>

[MrMurphy1]

Hallo

Bei Bootstrap soll für eigene CSS-Anweisungen eine zusätzliche CSS-Datei eingebunden werden, die nach den Bootstrap CSS-Dateien geladen wird.

Zum Testen kannst du die CSS-Anweisungen auch in den head-Bereich der Seite innerhalb des style-Elements schreiben.

Ursache des Problems: Bis zum Umschalten auf das Hamburger-Menü reicht der Platz für alle Menüpunkte in einer Zeile nicht aus. Deshalb muss der Platz etwas vergrößert und die Schrift gleichzeitig etwas verkleinert werden. Das kann zum Beispiel folgendermaßen geschehen:

      @media (min-width: 768px) and (max-width: 1000px) {
         .navbar .container {
            width: 100%;
            padding: 0;
         }
         .navbar .container .nav li {
            font-size: 14px;
         }
      }

Gruss

MrMurphy