Mobil için Html Navbar menüsü

Tarayıcımı mobil boyutuna getirdiğimde ve bağlantıların görünmesini sağlamak için düğmeyi tıklattığımda, bağlantıların sağ tarafında logolar görünür. Birçok web sitesine baktım ama asla bir cevap bulamadım.Mobil için Html Navbar menüsü

Kodum:

Sen plnkr bakın .navbar-header

bir sınıf ile bir div logo ve toggle sarmak gerekir

<!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>

kaynak

2016-04-13 Marcus Lönnqvist

İstediğiniz yapmak görünmek için? –

- 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>

kaynak

2016-04-13 13:29:20 KieranDotCo

Cevabınız için teşekkürler, ama şimdi web sitem ne olması gerektiği gibi görünüyor, benim bağlantılar şimdi masaüstü modunda navbarda logomun altındadır :-( –

@ MarcusLönnqvist benim kötü! Şimdi cevabı güncelledim, umarım Bu sefer yardımcı olur ve çalışır! – KieranDotCo

Bu harikaydı, yardımlarınız için teşekkürler, şimdi çalışıyor! –

Mobil için Html Navbar menüsü

cevap

İlgili konular