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;
}
Related
I have a ul li list placed horizontal.
These li items in turn contain a tag and img tag within each li.
These are ideally icons-menus.
Here is what I want - In desktop and tablet the li list all li items should be horizontal.
When viewed in phone, one of the li items - the 1st item should be placed in top right corner, and rest of the remaining li as horizontal.
This should be responsive across all the phone screens.
How to achieve this.
I have used top and right style to this particular li which should be shown in top right corner but in some screens it goes out, and placement is not proper, how to achieve this ?
Below is the code.
.navbar-nav {
display: flex;
justify-content: space-between;
}
#media (max-width: 767px) {
.mobView {
top: -8vh;
right: -40vh;
}
}
<ul class="navbar-nav navbar-right">
<!-- **This li needs to be at the top right corner when viewed in phone screen** -->
<li class="dropdown mobView">
<a href="javascript:void(0);">
<img src="1.svg" class="imgicon">
<span class="username">li 1</span>
</a>
</li>
<li class="dropdown" id="li2">
<a href="javascript:WindowLocation('/123');">
<img src="2.svg" class="imgicon">
<span class="hidden-xs">li 2</span>
</a>
</li>
<li class="dropdown" id="li3">
<a href="javascript:WindowLocation('/123');">
<img src="3.svg" class="imgicon">
<span class="hidden-xs">li 3</span>
</a>
</li>
<li class="dropdown" id="li4">
<a href="javascript:WindowLocation('/123');">
<img src="4.svg" class="imgicon">
<span class="hidden-xs">li 4</span>
</a>
</li>
</ul>
In desktop
In mobile wanted like this :
I hope I have been helpful
.navbar-nav {
display: flex;
justify-content: space-between;
}
#media (max-width: 767px) {
.navbar-nav li {
position: absolute;
list-style: none;
}
.navbar-nav li:nth-child(1) {
top: 50px;
left: 10px;
}
.navbar-nav li:nth-child(2) {
top: 10px;
right: 10px;
}
.navbar-nav li:nth-child(3) {
top: 50px;
right: 80px;
}
.navbar-nav li:nth-child(4) {
top: 50px;
right: 10px;
}
}
<ul class="navbar-nav navbar-right">
<!-- **This li needs to be at the top right corner when viewed in phone screen** -->
<li class="dropdown mobView">
<a href="javascript:void(0);">
<img src="1.svg" class="imgicon">
<span class="username">li 1</span>
</a>
</li>
<li class="dropdown" id="li2">
<a href="javascript:WindowLocation('/123');">
<img src="2.svg" class="imgicon">
<span class="hidden-xs">li 2</span>
</a>
</li>
<li class="dropdown" id="li3">
<a href="javascript:WindowLocation('/123');">
<img src="3.svg" class="imgicon">
<span class="hidden-xs">li 3</span>
</a>
</li>
<li class="dropdown" id="li4">
<a href="javascript:WindowLocation('/123');">
<img src="4.svg" class="imgicon">
<span class="hidden-xs">li 4</span>
</a>
</li>
</ul>
I have a vertical navbar menu with 2 blocks.
First is nav with icons, second is text of menu.
They have a different background colors. How i can make one background color for two active nav blocks?
design of menu
<div class="menu__icons">
<ul class="menu__list">
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item" href="#">First</a></li>
<li><a class="menu__item" href="#">Second</a></li>
<li><a class="menu__item" href="#">Third</a></li>
<li><a class="menu__item" href="#">Fourth</a></li>
</ul>
</div>
</div>
https://jsfiddle.net/levan563/1g5ucmwq/2/
Well basically if you want to toggle .active and you don't want two separate markup of list.
Notice that font-awesome is for demonstration purposes only.
.menu__item {
width: 250px;
height: 50px;
text-align: left;
}
.menu__item.active {
background-color: #e9ebfd;
}
.menu__item.active .menu__icon {
background-color: #e9ebfd;
border-left: 4px solid #2c39ec;
}
.menu__item.active .menu__title {
background-color: #e9ebfd;
}
.menu__item a:hover {
text-decoration: none;
}
.menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fafafa;
color: #2c39ec;
}
.menu__title {
display: inline-block;
padding-left: 20px;
color: #777777;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
<ul class="menu__list list-unstyled">
<li class="menu__item active">
<a href="#">
<div class="menu__icon">
<i class="fa fa-tachometer-alt"></i>
</div>
<div class="menu__title">Main Dashboard</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-user"></i>
</div>
<div class="menu__title">Profile</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-bell"></i>
</div>
<div class="menu__title">Finances</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-calendar"></i>
</div>
<div class="menu__title">Titles</div>
</a>
</li>
</ul>
</nav>
Related Fiddle https://jsfiddle.net/mhrabiee/dojL9get/28/
As I understand take active class for both block's li and try to use font, svg icon or transparent background images instead of block images
.menu__list .active {
background-color: red;
}
<div class="menu__icons">
<ul class="menu__list">
<li><a class="menu__item active" href="#">
<img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
</a></li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item active" href="#">First</a></li>
</ul>
</div>
Its doable using jQuery.
Assuming you have same number of list items in both blocks,
$(function(){
$('.menu__list li').on('click', function() {
var idx = $(this).index();
$('.menu__list li').removeClass('active');
$('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});
also add .active class in css and give needed style to li items also
.active{
/**your style**/
}
.active > a{
}
.active img{
}
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;
}
}
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/
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>