Html Navbar Menü für Handy

Meine Navbar funktioniert nicht wie ich will, wenn ich meinen Browser auf eine mobile Bildschirmgröße Größe und klicken Sie auf die Schaltfläche, um die Links erscheinen zu lassen, erscheinen die Links auf der rechten Seite des Logos. Ich habe auf vielen Websites nachgeschaut, aber nie eine Antwort gefunden.Html Navbar Menü für Handy

Mein Code:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Timmage</title> 
     <meta charset="Utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href="css/styles.css" rel="stylesheet"> 
    </head> 
    <body> 

     <div class="navbar navbar-inverse navbar-static-top"> 
      <div class="container"> 
       <a href="index.html" class="navbar-brand"><img class="logga" src="images/Timmage.png" alt="logga"></a> 
       <button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <div class="collapse navbar-collapse navHeaderCollapse"> 
        <ul class="nav navbar-nav navbar-left"> 
         <li class="dropdown"> 
          <a href = "#" class="dropdown-toggle" data-toggle = "dropdown">Menu<b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href = "#">Profile</a></li> 
           <li><a href = "#">Uploads</a></li> 
           <li><a href = "#">Setting</a></li> 
           <li><a href = "#">Log out</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Settings</a></li> 
         <li><a href="#">My Profile</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <h1>Welcome to Timmage!</h1> 
     <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
     <script src = "js/bootstrap.js"></script> 

    </body> 
</html>

Quelle

2016-04-13 Marcus Lönnqvist

, wo Sie wollen sie erscheinen? –

Sie müssen Ihr Logo und den Knebel in einem div mit einer Klasse von .navbar-header

Siehe plnkr einzuwickeln - https://plnkr.co/edit/sb7vJ5mMDMpO2VMPmelL?p=preview

<div class="container"> 
    <div class="navbar-header"> 
    <a href="index.html" class="navbar-brand"> 
    <img class="logga" src="images/Timmage.png" alt="logga" /> 
    </a> 
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button>  
    </div> 

    <div class="collapse navbar-collapse navHeaderCollapse"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu                <b class="caret"></b> 
      </a> 
     <ul class="dropdown-menu"> 
      <li> 
      <a href="#">Profile</a> 
      </li> 
      <li> 
      <a href="#">Uploads</a> 
      </li> 
      <li> 
      <a href="#">Setting</a> 
      </li> 
      <li> 
      <a href="#">Log out</a> 
      </li> 
     </ul> 
     </li> 
     <li> 
     <a href="#">Settings</a> 
     </li> 
     <li> 
     <a href="#">My Profile</a> 
     </li> 
     <li></li> 
    </ul> 
    </div> 
</div>

Quelle

2016-04-13 13:29:20 KieranDotCo

Danke für die Antwort, aber jetzt meine Website sieht irgendwie aus, was es sollte, meine Links sind jetzt unter meinem Logo in der Navigationsleiste im Desktop-Modus :-( –

@ MarcusLönnqvist mein schlecht! Ich habe die Antwort jetzt aktualisiert, hoffe dies hilft und arbeitet diesmal! – KieranDotCo

Das war super, danke für deine Hilfe, es funktioniert jetzt! –

Html Navbar Menü für Handy

Antwort

Verwandte Themen