Burger-Taste nicht auf Navigationsleiste zentriert?

Das ist mein Code. Burger-Taste nicht auf Navigationsleiste zentriert?

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
     <title>Personal Portfolio</title> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
      <script src="/js/my.js"></script> 
 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    </head> 
 
    <body data-spy="scroll" data-target=".navbar" data-offset="100"> 
 
     <!- Navbar--> 
 
     <nav class="navbar navbar-toggleable-sm navbar-light" style="background-color:purple;"> 
 
      <button class="navbar-toggler navbar-toggler-right my-sm-0" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
       <span class="navbar-toggler-icon"></span> 
 
      </button> 
 
      <a class="navber-brand" href="#"> 
 
       <img src="qlip.png" style="height:60px;"> 
 
      </a> 
 
      <div class="collapse navbar-collapse" id="mainNav"> 
 
       <ul class="navbar-nav ml-auto"> 
 
        <li class="nav-item"> 
 
         <a class="nav-link" href="#">About</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a class="nav-link" href="#">Portfolio</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a class="nav-link" href="#">Contact</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </nav> 
 
    </body> 
 
</html>

Wenn das Fenster in voller Größe ist, werden alle Links sind Zentrum aligned.But, wenn ich das Fenster zu verkleinern, das Burger-Symbol nicht in die Mitte des navbar nicht ausrichten. Wie kann ich das beheben?

Quelle

2017-12-06 Aakash Dasgupta

Welche Burger Symbol sind über u reden? Und pls aktualisieren Sie Code-Snippet, da es Fehler mit Ihren Bibliotheken gibt. –

Es liegt ein Fehler in Ihrem Snippet vor. Bitte korrigieren Sie es und senden Sie es erneut, damit wir Ihr Problem sehen können. –

Wenn Sie Ihre CSS ändern von:

.navbar-toggler-right { 
right : 2rem

}

zu:

.navbar-toggler-right { 
position: absolute; 
right: 18rem; 
left: 18rem; 
top: 3px;

}

wird es zentriert.

Quelle

2017-12-06 07:03:40

.navbar-toggler-right { 
 
position: absolute; 
 
left: 50% !important; 
 
top: 15px; 
 
transform: translate(-50%,-50%); 
 
}

<html> 
 
     <head> 
 
      <title>Personal Portfolio</title> 
 
       <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
       <script src="/js/my.js"></script> 
 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
     </head> 
 
     <body data-spy="scroll" data-target=".navbar" data-offset="100"> 
 
      <!- Navbar--> 
 
      <nav class="navbar navbar-toggleable-sm navbar-light" style="background-color:purple;"> 
 
       <button class="navbar-toggler navbar-toggler-right my-sm-0" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
        <span class="navbar-toggler-icon"></span> 
 
       </button> 
 
       <a class="navber-brand" href="#"> 
 
        <img src="qlip.png" style="height:60px;"> 
 
       </a> 
 
       <div class="collapse navbar-collapse" id="mainNav"> 
 
        <ul class="navbar-nav ml-auto"> 
 
         <li class="nav-item"> 
 
          <a class="nav-link" href="#">About</a> 
 
         </li> 
 
         <li class="nav-item"> 
 
          <a class="nav-link" href="#">Portfolio</a> 
 
         </li> 
 
         <li class="nav-item"> 
 
          <a class="nav-link" href="#">Contact</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </nav> 
 
     </body> 
 
    </html>

Quelle

2017-12-06 16:26:41

Burger-Taste nicht auf Navigationsleiste zentriert?

Antwort

Verwandte Themen