Joe Scotto Joe Scotto - 1 month ago 9
CSS Question

Bootstrap left brand list strange positioning when navigation collapses

I'm trying to get my website to have 2 buttons next to the

navbar-brand
that will remain there no matter what size the screen is. I have the collapsible elements from the right setup to collapse when the screen is mobile sized. The issue I'm having is that when the nav collapses the positioning of the list is messed up. I've tried changing margins, widths, and padding for the ul on the right but it does not seem to fix the issue.

I intend for the navbar to look like this when the collapse is active, not only while it's open.enter image description here

This is what happens once the navbar collapses, I've inspected the elements and it seems that the left buttons have a width that is 100% but upon changing that I get stuck with a margin that I cannot change.
enter image description here

Codepen Link

Any help would be great. Thanks.

GvM GvM
Answer

Check this Jsfiddle Link

<ul class="nav navbar-nav icons">
<li><a href="#"><span class="glyphicon glyphicon-wrench"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span></a></li>
</ul>

I moved the ul with icons after the navbar-brand