I have a nav stacked list with checks in it like below. Is there any way I can move the checks to the right or left of the items so when the items are active they don't cover up the check?
Here is my fiddle
<ul class="nav nav-pills">
<li role="presentation" class="active">Home <i class="glyphicon glyphicon-ok pull-right"></i>
</li>
<li role="presentation">Profile <i class="glyphicon glyphicon-ok pull-right"></i>
</li>
<li role="presentation">Messages <i class="glyphicon glyphicon-ok pull-right"></i>
</li>
</ul>
Change the markup a bit, move it outside the anchor.
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">
Home
<i class="glyphicon glyphicon-ok pull-right"></i>
</li>
<li role="presentation">
Other
<i class="glyphicon glyphicon-ok pull-right"></i>
</li>
</ul>
.nav .active {
overflow: hidden;
}
.nav .active a {
width: 80%;
float: left;
}
.nav i {display:none;}
.nav .active i {
margin: 12px 14px 0 0;
display: block;
}
EDIT: Fiddle
You could alternatively add a white (or different colored) background to the checkmark when it's active by adding the following CSS:
.nav-pills>li.active>a i {
color: green;
background: #fff;
padding: 0.25rem;
border-radius: 0.5rem;
}
https://jsfiddle.net/karolbrennan/uc5xfsso/
Related
I have created a list in which I have used glyphicons, when I hover my mouse, glyphicons become black, and I want the icons to appear white. I am using bootstrap also.
List:
<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
<li><i class="glyphicon glyphicon-user"></i></li>
<li><i class="glyphicon glyphicon-bell"></i></li>
<li><i class="glyphicon glyphicon-search"></i></li>
<li><i class="glyphicon glyphicon-log-out"></i></li>
<li><i class="glyphicon glyphicon-menu-hamburger"></i></li>
a.glyIcon{
color:gray !important;
}
a.glyIcon:hover{
color:orange !important;
}
<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-user"></i>List 1</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-bell"></i>List 2</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-search"></i>List 3</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-log-out"></i>List 4</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-menu-hamburger"></i>List 5</a></li>
</ul>
Add the class name for your <a> tag
html
<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-user"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-bell"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-search"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-log-out"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-menu-hamburger"></i></a></li>
</ul>
CSS
a.glyIcon{
color:black !important;
}
a.glyIcon:hover{
color:white !important;
}
As you can see your white color is overwritten as the bootstrap selector is more specific than yours.
.navbar a:hover{ color:white; }
Furthermore, your html does not contain the class navbar and thus this selector does not work, perhaps try changing the class name in the CSS to to .navbar-nav instead.
You need to add style on hover of that particular target element.
.navbar-nav li a.glyphicon i {
color: green;
}
.navbar-nav li:hover a.glyphicon {
color: blue;
}
.navbar-nav li:hover a.glyphicon i {
color: red;
}
<ul class="navbar-nav">
<li>
<a class="glyphicon">
Anchor Tag
<i class="glyphicons">sample</i>
</a>
</li>
</ul>
ul li {
color: #000000;
list-style: none;
transition: all 0.5s linear;
}
ul li:hover {
color: #ffffff;
}
<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
<li><i class="glyphicon glyphicon-user"></i>text1</li>
<li><i class="glyphicon glyphicon-bell"></i>text2</li>
<li><i class="glyphicon glyphicon-search"></i>text3</li>
<li><i class="glyphicon glyphicon-log-out"></i>text4</li>
<li><i class="glyphicon glyphicon-menu-hamburger"></i>text5</li>
</ul>
Check this one.
Demo app you is here: App
Nav looks as I want on small screen, only 'Home' link and toggle button on the right.
Toggle button works, but it is showing elements inline, I would like to display elements one belove other
#media screen and (max-width: 600px) {
/*.topnav li:not(:first-child) {display:none;}*/
.topnav li:not(:nth-child(2)) {display:none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav li {
display: inline-block;
}
}
<nav id="main">
<div class="topnav" id="myTopnav">
<ul>
<li class="logo">HOME.</li>
<li>HOME</li>
{{#if user.admin }}
<li class="active"><a class="accordion-toggle btn-block text-warning" href="/admin"><i class="fa fa-cogs" aria-hidden="true"></i> Administration</a></li>
{{/if}}
<li>
<a href="/shopping-cart">
<i class="fa fa-shopping-basket" aria-hidden="true"></i> Shopping Cart
<span class="badge">{{ session.cart.totalQty }}</span>
</a>
</li>
<li>
<i class="fa fa-envelope-o" aria-hidden="true"></i></i> Contact Us
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> User <span class="caret"></span>
<ul class="dropdown-menu">
{{# if login }}
<li>User Account</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
{{ else }}
<li>Sing in</li>
<li role="separator" class="divider"></li>
<li>Sing up</li>
{{/if}}
</ul>
</li>
☰
</ul>
</div>
</nav>
<script type="text/javascript" src="javascripts/navbar.js"></script>
Add display:block to nav ul when below 600px:
#media screen and (max-width: 600px) {
/*.topnav li:not(:first-child) {display:none;}*/
.topnav li:not(:nth-child(2)) {display:none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav li {
display: inline-block;
}
/*Add the following*/
nav ul{
display:block;
}
}
How can I add vertical divider after the li element on the main menu?
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> <span class="sr-only">(current)</span></li>
<li><a href="#" > نبذه عنا </a></li>
<li> اكادمية بوذيب للفروسيه </li>
<li> اسطابلات بوذيب </li>
<li> المركز الاعلامي </li>
<li> اتصل بنا </li>
<li> اكثر <i class="fa fa-bars"></i> </li>
<li> </li>
</ul>
This is the site I want to fix: the site
And this is the image I want the main menu to be like: the image
Can any one help me?
Although you could try this by giving border to sides, but nav items have more height than vertical line that you want to give, then you can try <pseudo:before> to achive this
.navbar-default .navbar-nav>li>a:after {
content: '';
display: inline-block;
position: absolute;
width: 1px;
background: #fff;
height: 30px;
right: 0;
top: calc(50% - 15px);
}
.navbar-default .navbar-nav>li:last-child>a:after,
.navbar-default .navbar-nav>li:first-child>a:after{
display:none;
}
Try this one
ul li{
float:left;
list-style:none;
padding:0 8px;
border-right:2px solid gray;
}
ul li:last-child{
border:none;
}
a{
text-decoration:none;
}
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> <span class="sr-only">(current)</span></li>
<li><a href="#" > نبذه عنا </a></li>
<li> اكادمية بوذيب للفروسيه </li>
<li> اسطابلات بوذيب </li>
<li> المركز الاعلامي </li>
<li> اتصل بنا </li>
<li> اكثر <i class="fa fa-bars"></i> </li>
</ul>
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).
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.
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>
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;
}
I have a bootstrap nav and I need to avoid stacking of it on smaller viewports so that it stays horizontal and does not stack.
Here is a example
HTML:
<div class="menuBar">
<ul class="nav nav-justified">
<li>
<a href="#" class="menuItem">
<i class="glyphicon glyphicon-asterisk"></i>
</a>
</li>
<li>
<a href="#" class="menuItem">
<i class="glyphicon glyphicon-asterisk"></i>
</a>
</li>
<li>
<a href="#" class="menuItem">
<i class="glyphicon glyphicon-asterisk"></i>
</a>
</li>
</ul>
</div>
CSS:
.menuBar ul {
text-align: justify;
}
.menuBar ul li a {
display: inline-block;
}
.menuItem {
font-size: 24px;
}
Extended version: http://jsfiddle.net/m5k93rwo/
What is the best way to do that? I suspect some play with data-toggle but, unfortunately, I'm not experienced enough to be sure how make it working well
Add this css after all your other css:
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
margin-bottom: 0;
}