Menu
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;
}
577
asked Dec 12 '25 14:12
You need to remove the padding on the link containing the image with:
.navbar-brand {
padding:0;
}
bootply example
165
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
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
