Navbar Ausrichtung mit Klick?

Ich habe Probleme, mein Bild an der Navbar korrekt zur Seite auszurichten. Ich versuche es so einzurichten, dass es zusammen mit der Navigationsleiste im weißen Bereich passt. Wenn Sie auf das Bild klicken, erscheint die Navigationsleiste darunter.Navbar Ausrichtung mit Klick?

body { 
 
    font-family: 'Arimo', sans-serif; 
 
    padding-top: 50px; 
 
} 
 

 
.menu-bar { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 50%; 
 
    height: 14px; 
 
    margin-left: -10px; 
 
} 
 

 
.logo { 
 

 
    width: 100px; 
 
    height: 50px; 
 

 

 
} 
 
.menu { 
 
    display: none; 
 
    width: 100%; 
 
    padding: 30px 10px 50px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    background-color: #fff; 
 
} 
 
.menu ul { 
 
    margin-bottom: 0; 
 
} 
 
.menu a { 
 
    color: #333; 
 
    text-transform: uppercase; 
 
    opacity: 0.8; 
 
} 
 
.menu a:hover { 
 
    text-decoration: none; 
 
    opacity: 1; 
 
} 
 
/*deviders*/ 
 
.home{ 
 
    height: 100%; 
 
    padding-top: 150px; 
 
    text-align: center; 
 
    background: #423840; 
 
} 
 

 
.about { 
 
    height: 100%; 
 
    padding-top: 150px; 
 
    text-align: center; 
 
    background: #8dd8f8; 
 
} 
 

 
.service { 
 
    height: 100%; 
 
    padding-top: 150px; 
 
    text-align: center; 
 
    background: #9D714F; 
 
} 
 

 
.info{ 
 
    height: 100%; 
 
    padding-top: 150px; 
 
    text-align: center; 
 
    background: #eee; 
 
} 
 

 
.contact { 
 
    height: 100%; 
 
    padding-top: 150px; 
 
    text-align: center; 
 
    background: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<head> 
 
    <meta content="width=device-width, initial-scale=1" name="viewport"> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="css/style.css" rel="stylesheet"> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
 
<script src="js/custom.js"></script> 
 
</head> 
 
    <body class="scroll-area" data-spy="scroll" data-offset="0"> 
 
    <a class="menu-bar" data-toggle="collapse" href="#menu"> 
 
       <img src="http://i.imgur.com/Bu0B6O8.png" alt="Logo" class = "logo"> 
 
      </a> 
 
     \t <div class="collapse menu" id="menu"> 
 

 
       <ul class="list-inline"> 
 

 
        <li><a href="#home">Home</a></li> 
 
        <li><a href="#about">About</a></li> 
 
        <li><a href="#service">Services</a></li> 
 
        <li><a href="#info">Works</a></li> 
 
        <li><a href="#contact">Contact</a></li> 
 
       </ul> 
 
     \t </div> 
 

 

 

 
<section id="home" class="home"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <h1>Home</h1> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 

 
<section id="about" class="about"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <h1>Profolio</h1> 
 
       <!-- Trigger the modal with a button --> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 

 
<section id="service" class="service"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <h1>Service</h1> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 

 
<!-- Contact Section --> 
 
<section id="info" class="info"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <h1>Info</h1> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 

 

 
<section id="contact" class="contact"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <h1>Contact us</h1> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 
</body>

Quelle

2016-07-07 Garison Andrers

die Bootstrap Klasse .img-Reaktion auf Ihre image.set margin-top benutzen, was auch immer Sie wollen. – user3386779

@ user3386779 ist immer noch nicht mit der Navbar ausgerichtet. –

möchten Sie das Logo in weißer Farbe div Rite kleben? – user3386779

Sie benötigen wenig Veränderung in Ihrem CSS zu machen, ersetzen Sie einfach den unten CSS-Code. Ich hoffe es funktioniert für dich.

.menu-bar { 
top: 20px; 
margin: 0 auto; 
display: table;}

Quelle

2016-07-07 10:24:26

Ja, es funktioniert gut, aber jetzt ist es zu viel Leerraum an der Spitze. –

Entfernen Sie Padding-Top in Body-Tag, oder passen Sie als Ihre Anforderung. –

Danke super! –

Navbar Ausrichtung mit Klick?

Antwort

Verwandte Themen