1
The Down Arrow that marks the dropdown of the button present in the navbar is uneven in size to the size of the button.
See in the image below (Blue Button)
Navbar code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"><!--------- START Navbar --------->
<div class="container">
<div class="navbar-header"><!-- START Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Meu Site</a>
</div><!-- END Brand and toggle get grouped for better mobile display -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- START Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group navbar-btn">
<button type="button" class="btn btn-info">Bill Gates</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- END Collect the nav links, forms, and other content for toggling -->
</div>
</nav><!--------- END Navbar --------->
Strange, here it worked correctly: http://prntscr.com/5x0gbl OBS: Tested in Chrome and Firefox
– user20038
Really weird and added all the . css and . js so much that it’s all working 100% except this button.
– Ricardo
Owe some other css that is causing conflict on the button. My suggestion is to inspect the element and check if there are no extra rules that cause the problem. Use this fiddle as an example and compare the attributes: http://jsfiddle.net/xcrb4kmp/
– Wakim
I removed the css file I had and the problem persists
– Ricardo
In which browser are you testing? Could you post the full code you were using.
– user20038
Chrome and Firefox both last version, I used the css and js of bootstrap only (I removed an external css but the problem continued) has only this navbar, in the head has the link and script tags for the bootstrap files only, I used this same head on other pages and I didn’t get this problem (I didn’t use dropdown buttons)
– Ricardo