John Hamlett IV John Hamlett IV - 4 years ago 380
HTML Question

Remove top padding on bootstrap navbar

I am attempting to remove the padding on the top of the navbar image.

I have tried playing around with the padding numbers and cannot seem to get it.

I can get the padding to be removed but then the positioning of the rest of the elements is moved all around.

<style>
.navbar-inner{
position:relative;
padding-left:70px;
}
.navbar .brand {
position: absolute;
left: 0px;
top: 0px;
width: 50px;
background: #f00;
margin-left: 0px;
padding: 0px;
}

#logo{
height: 40px;
}

</style>

<body>
<nav class="navbar navbar-default" style="margin-top: 0">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <img id="logo" src="http://i.imgur.com/McZjymS.png"></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Technology Training Calendar</a></li>
<li><a href="#">Flyers</a></li>
<li><a href="#">Status Reports</a></li>
<li><a href="#">Procedures</a></li>
<li><a href="#">The Upgrade</a></li>
<li><a href="#">Tales from Tech Support</a></li>
</ul>
</div>
</div>
</nav>
</body>

</html>


If I add this to css I can get it to line up but the position is all off

#logo{
height: 40px;
position:absolute;
top: 0;
width: 45px;
}

Answer Source

Adjust by targetting the class holding the image, not the image itself. Like this:

       a.navbar-brand {
          padding: 6px 10px; //adjust this accordingly until you have it centered.
       }

Here is your code solved

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download