Menu
I have a logo as shown below.
<nav class="navbar navbar-fixed-top navbar-light bg-primary">
<div class="container-fluid">
<img class="navbar-brand" src="logo.png" alt="logo">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">START</a></li>
...
</ul>
</div>
</nav>
Bootstrap adds a piece of padding on the left resulting in the following offset from the edge.
Since our logo is a cut off circle, we want it to be placed precisely at the edge to create illusion of a real circle but sticking outside of the browser. I've tried to set a negative margin on the left side but it only moved the image, still retaining the weird edge as shown below.
<img class="navbar-brand" src="logo.png" alt="logo" style="margin-left: 0px;">
What can I do about it?
650
Move the brand above the navbar-header and give it the class navbar-right. This puts your brand on right when in desktop views, and it goes left in mobile views, properly keeping the menu button as the rightmost element.
For aligning at the center, we need to use . mx-auto and . d-block classes of bootstrap.
You can use row instead of container-fluid. these two have opposite margins.
https://jsfiddle.net/gsb3ohd2/
<nav class="navbar navbar-fixed-top navbar-light bg-primary">
<div class="row">
<img class="navbar-brand" src="logo.png" alt="logo">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">START</a></li>
...
</ul>
</div>
</nav>
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
