Bootstrap dropdown menu width with right-aligned glyphicons - html

Question

I have a dropdown menu from the navbar and it has right-aligned (css class pull-right) glyphicons. One of the menu items is a bit longer than the others and it runs into the glyphicon, causing it to be moved down a half-line:
I can obviously set the width of this dropdown manually with a CSS class and a hardcoded width, but I'd rather get Bootstrap to incorporate the glyphicon width appropriately. How do I need to structure my HTML or what changes to CSS do I need to make to make this work?
Here's the HTML for the entire navbar:
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<span>
<img id="XXX-brand-logo" alt="Brand" src="/Content/Images/XXX.png" width="20" height="20"></span>
Home
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>
XXX
</li>
<li class="dropdown">
XXX<span class="caret"></span>
<ul class="dropdown-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="dropdown">
XXX<span class="caret"></span>
<ul class="dropdown-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin<span class="caret"></span>
<ul class="dropdown-menu">
<li>Manage Roles</li>
<li>Manage Groups</li>
<li>Manage Users</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> Administrator<span class="caret"></span>
<ul class="dropdown-menu">
<li>Settings <span class="glyphicon glyphicon-wrench pull-right"></span></li>
<li>Change Password <span class="glyphicon glyphicon-lock pull-right"></span></li>
<li role="separator" class="divider"></li>
<li>Logout <span class="glyphicon glyphicon-log-out pull-right"></span></li>
</ul>
</li>
</ul>
</div>
</div>
And here's any CSS that could possible modify this page:
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.glyphicon-hover {
border-radius: 25px;
border: 1px solid transparent;
padding: 2px;
}
.glyphicon-hover:hover, .glyphicon:focus {
border-radius: 5px;
border: 1px solid black;
color: red;
}
I'm using jquery-ui.css (version 1.11.4 via jQuery.UI.Combined in Nuget) and bootstrap.css (version 3.3.6.1 via Nuget).

Answer 1

Rearranging your markup to place the icon before the anchor text (this will circumvent the "step-down" effect), then wrapping the anchor text in another nested tag that you can target to apply further styling will help in resolving the issue at hand.
HTML
<ul class="dropdown-menu ">
<li><span class="glyphicon glyphicon-wrench pull-right "></span><span class="dropdown-link-text ">Settings</span>
</li>
<li><span class="glyphicon glyphicon-lock pull-right "></span><span class="dropdown-link-text ">Change Password</span>
</li>
<li role="separator " class="divider "></li>
<li><span class="glyphicon glyphicon-log-out pull-right "></span><span class="dropdown-link-text ">Logout</span>
</li>
</ul>
CSS
.dropdown-link-text {
display: inline-block;
margin-right: 20px;
}
Working example: http://www.bootply.com/wMD9IaHs4R
Alternatively, you could also try adding the icons in as pseudo elements of the link tag itself, then position them absolute and adjust the top, right values accordingly.

Answer 2

I've used this CSS instead of the .pull-right class:
#media (min-width: 768px) {
.navbar-right .dropdown-menu > li > a {
padding-right: 46px;
position: relative;
}
.navbar-right .dropdown-menu > li > a > .glyphicon {
display: block;
position: absolute;
right: 20px;
top: 5px;
}
}
Please check the result. Is it what you want to achieve?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.glyphicon-hover {
border-radius: 25px;
border: 1px solid transparent;
padding: 2px;
}
.glyphicon-hover:hover, .glyphicon:focus {
border-radius: 5px;
border: 1px solid black;
color: red;
}
#media (min-width: 768px) {
.navbar-right .dropdown-menu > li > a {
padding-right: 46px;
position: relative;
}
.navbar-right .dropdown-menu > li > a > .glyphicon {
display: block;
position: absolute;
right: 20px;
top: 5px;
}
}
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<span>
<img id="XXX-brand-logo" alt="Brand" src="/Content/Images/XXX.png" width="20" height="20"></span>
Home
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>
XXX
</li>
<li class="dropdown">
XXX<span class="caret"></span>
<ul class="dropdown-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="dropdown">
XXX<span class="caret"></span>
<ul class="dropdown-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin<span class="caret"></span>
<ul class="dropdown-menu">
<li>Manage Roles</li>
<li>Manage Groups</li>
<li>Manage Users</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> Administrator<span class="caret"></span>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-wrench"></span>Settings</li>
<li><span class="glyphicon glyphicon-lock"></span>Change Password</li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-log-out"></span>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 3

The simplest solution is to line break the text
Change<br>Password
This leaves all elements and the menu the same size horizontally. The second simple solution is to change the width
.glyphicon {
padding-left: 10px;
}