Reputation: 969
I have problem with alignment of my logo in my navbar in Bootstrap. I would like to align it with my website content, but it keeps shifting to the left. Any idea why this happens and how I can solve this? I was not able to find the solution.
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img alt="logo" height="13" width="100" src="{% static 'images/logo1.png' %}">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<p class="navbar-text project-title">Part Activity</p>
<ul class="nav navbar-nav">
<li><a href="about">About</a></li>
</ul>
</div>
</div>
</nav>
CSS:
body {
padding-top: 50px;
}
.navbar-brand {
padding: 18px 0;
}
.project-title {
color: #cc0000 !important;
font-weight: bold;
}
.active-row {
background-color: #C6EFCE;
}
Upvotes: 0
Views: 983
Reputation: 46
Use: col-sm-1 in <div class="navbar-hearder col-sm-1">
If you increase the width
of the image, you also need to increase:
col-sm-2..
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header col-sm-1">
<a class="navbar-brand" href="/">
<img alt="logo" height="13" width="100" src="{% static 'images/logo1.png' %}">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<p class="navbar-text project-title">Part Activity</p>
<ul class="nav navbar-nav">
<li><a href="about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Part Activity</h3>
<p>Master rsl</p>
</div>
Upvotes: 2