Raum zwischen navbar und den Inhalt

Question

Ich möchte zwischen dem Inhalt und meine navbar loswerden Raum zu bekommen, wie ich es tun kann? Gib mir eine Idee, wie dies zu tun ist, bitte im neuen CSS und HTML. Ich habe es auch versucht, um die WordPress auf Bild Slider gibt es Platz zwischen der Navbar und dem Bild Slider, wie Caan ich es loswerden? Vielen Dank im Voraus.

Hier ist mein HTML-Code für Navbar und den Inhalt.

<nav class="navbar navbar-default navbar-top"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
      <span class="icon-bar" ></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <img class="img-responsive" src="images/brandz.png" > 
    </div> 

<div class="collapse navbar-collapse" id="nav-collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">Students</a></li> 
     <li><a href="#">Faculty</a></li> 
     <li><a href="#">Contact us</a></li> 

    </ul> 

    <ul class="nav navbar-nav navbar-right"> 
       <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
       <!-- 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> 
          </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> 
    </ul> 
    </div> 
    </div> 
    </nav> 
    <div class="content"> 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames  ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
    </div> 

hier ist mein css

.navbar-default .navbar-nav > li > a { 
font-weight: 590; 
color: #949494; 
display: block; 
padding: 5px 35px 2px 45px; 
border-bottom: 3px solid transparent; 
line-height: 97px; 
text-decoration: none; 
transition: border-bottom-color 0.5s ease-in-out; 
-webkit-transition: border-bottom-color 0.5s ease-in-out; 
    } 
.navbar-default{ 
background-color:#fff; 

} 
    .nav>li>a { 
    position: relative; 
    } 
.navbar-default .navbar-right > li > a { 
padding-left: 70px; 
padding-right: 1px; 
} 
.navbar-default .navbar-toggle .icon-bar { 
background-color: #000000; 
margin:0 0 4px; 
width: 25px; 
height: 5px; 

} 
@media (max-width: 768px) { 
.img-responsive{ 
width: 300px; 
height:50px; 
padding-left:50px; 
} 
} 
@media (max-width: 376px) { 
.img-responsive{ 
width: 220px; 
height:50px; 
padding-left: 20px; 
} 
} 
@media (max-width: 286px) { 
.img-responsive{ 
width: 180px; 
height:50px; 
padding-left: 5px; 
} 
} 
.nav.navbar-nav > li{ 
display: :inline-block; 
    } 
.nav.navbar-nav{ 
    list-style-type:none; 
    } 
    .nav.navbar-nav > li > a:hover{ 
    color:#a92419; 
    border-bottom-color: #a92419; 
    } 

.navbar-default .navbar-toggle .icon-bar { 
background-color:#a92419 ; 
margin:0 0 4px; 
width: 25px; 
height: 5px; 

} 
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover   { 
background: none; 
} 
button.navbar-toggle{ 
background:none; 
border:none; 
color:#000; 

} 

Answer 1

.navbar-default { margin : 0 !important; }

Answer 2

Versuchen Sie, die Marge auf Null auf den Inhalt Klasse.

Answer 3

hat standardmäßig die navbar Klasse einen Bottom-Marge von 20px. Das schafft den Raum unterhalb des Navigationsbereiches. Sie können dies in Ihrem eigenen Stylesheet überschreiben. fügen Sie diese einfach in Ihrem CSS:

.navbar {margin-bottom: 0;} 

Sie auch eine negative Marge auf die Content-Klasse setzen könnte, aber das ist ein bisschen wie ein Hack.

.content {margin-top: -20px;} 

Viel Glück.

Answer 4

Ok, für ANYONE ELSE wer könnte aber auf der Suche nach einer möglichen Antwort. Ich habe nicht unbedingt das Problem genau so, wie löst ich wollte, und ich bin sicher, dass es andere Lösungen, aber für mich ist das, was funktioniert hat:

1) Zur Darstellung> Editor

2) Klicken Sie auf "Theme Funktionen"

3) für die Funktion suchen mbe_wp_head() und finden Linien genannt, die wie unten aussehen:

.'body{ padding-top: 42px !important; }' 

und die Paddi ändern ng-top-Attribut für alles, was zu Ihrem Design passt.

Ich weiß, dies ist vielleicht nicht die beste Lösung und es funktioniert vielleicht nicht für alle (persönlich benutze ich das Bootstrap-Thema), aber es funktionierte für mich und wenn ich ein besseres finde, werde ich es posten .