Reputation: 31282
I am using bootstrap 3. Here is my html:
As you can see, the star
and BookMarks
texts are not in line with other nav-bars.
how to fix this?
Here is my code
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/mybookmarks/">
<span class="glyphicon glyphicon-star" id="starry"></span>
BookMarks
</a>
</li>
<li>
<a href="/search/create/">
<span class="glyphicon glyphicon-plus"></span>
New Search
</a>
</li>
<li>
<a href="/dashboard/">
<span class="glyphicon glyphicon-th"></span>
Searches
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-stats"></span>
Reports <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="implement this">Raw Data</a>
</li>
<li>
<a href="implement this">Graphs</a>
</li>
<li class="divider"></li>
<li>
<a href="implement this">Email Report</a>
</li>
</ul>
</li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
demo <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="/accounts/settings/">Account Settings</a>
</li>
<li>
<a href="/accounts/password/change/">Change Password</a>
</li>
<li class="divider"></li>
<li>
<a href="help">Help</a>
</li>
<li class="divider"></li>
<li>
<a href="/logout/">Log Out</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse --> </div>
<!-- /.container --> </nav>
and one custom css which is for the span element of star glyphicon
#starry {
color: #B939A0;
font-size: 20px;
}
Upvotes: 0
Views: 2483
Reputation: 8338
The problem is being caused by the increase in font-size of that one icon.
One way to resolve this would be:
#starry {
color: #B939A0;
font-size: 20px;
float: left;
margin: -2px 3px 0 0;
}
The float takes it out of the document flow, allowing the text to realign. Then the margin repositions the icon.
Upvotes: 1