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.

.navbar .brand {
position: absolute;
left: 0px;
top: 0px;
width: 50px;
background: #f00;
margin-left: 0px;
padding: 0px;

height: 40px;


<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=""></a>
<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>


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

height: 40px;
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