I wanna use multilevel bootstrap navbar but i wanna add some feature. Everything looks good but i wanna make that menu levels doesn't hide when i move mouse pointer, but i wanna that it closes on the click or maybe when i choise another menu. It's great that i move mouse on menu and it shows automatically but i don't want that menu hides when i move a little bit mouse pointer to the side and it's hides. I need that menu closes only when i click somewhere or choise another dropdown menu. I hope you understand what i need. In other words i wanna that showing be like there is now, but menu hides only on click.
https://jsfiddle.net/x1Lqyhmg/
(function($) {
var defaults={
sm : 540,
md : 720,
lg : 960,
xl : 1140,
navbar_expand: 'lg'
};
$.fn.bootnavbar = function() {
var screen_width = $(document).width();
if(screen_width >= defaults.lg){
$(this).find('.dropdown').hover(function() {
$(this).addClass('show');
$(this).find('.dropdown-menu').first().addClass('show').addClass('animated fadeIn').one('animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd', function () {
$(this).removeClass('animated fadeIn');
});
}, function() {
$(this).removeClass('show');
$(this).find('.dropdown-menu').first().removeClass('show');
});
}
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
};
})(jQuery);
.dropdown-menu {
margin-top: 0;
}
.dropdown-menu .dropdown-toggle::after {
vertical-align: middle;
border-left: 4px solid;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
.dropdown-menu .dropdown .dropdown-menu {
left: 100%;
top: 0%;
margin:0 20px;
border-width: 0;
}
.dropdown-menu > li a:hover,
.dropdown-menu > li.show {
background: #007bff;
color: white;
}
.dropdown-menu > li.show > a{
color: white;
}
#media (min-width: 768px) {
.dropdown-menu .dropdown .dropdown-menu {
margin:0;
border-width: 1px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css">
<link rel="stylesheet" href="css/bootnavbar.css">
<title>Multi level hover dropdown Navbar for bootstrap 4</title>
<meta name="description" content="Multi level hover dropdown Navbar for bootstrap 4">
<meta name="keywords" content="Multi level hover dropdown Navbar for bootstrap 4">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="main_navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<div class="dropdown-divider"></div>
<li></li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<div class="dropdown-divider"></div>
<li></li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<div class="dropdown-divider"></div>
<li></li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/bootnavbar.js" ></script>
<script>
$(function () {
$('#main_navbar').bootnavbar();
})
</script>
</body>
</html>
Related
Hello i am trying to make a navbar in laravel with bootstrap, i am not that good in front-end so i am learning. The navbar in bigger screen shows good but in smaller one the buttons are more to the right side of the screen. This is the code that i have done:
Html:
<div>
<nav id="sidebar" class="active">
<div class="text-start">
<div class="sidebar-header">
<img src="{{ asset('assets/img/cash-flow.png') }}" class="image" alt="logo" class="app-logo">
</div>
<div class="horizontal-menu">
<div class="row">
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-home"></i> Dashboard</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-list"></i>
Veprime</button>
<div class="dropdown-content">
<i class="fas fa-solid fa-plus"></i> Porosite
<i class="fas fa-money-bill-wave"></i> Konfirmo shpenzim
<i class="fas fa-receipt"></i> Konfirmo Arketim
<i class="fas fa-solid fa-user-pen"></i> Veprimet e mia
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-solid fa-check-to-slot"></i> Arka</button>
<div class="dropdown-content">
<i class="fas fa-cash-register"></i> Arka
<i class="fas fa-coins"></i> Konvertim
<i class="fas fa-solid fa-hand-holding-dollar"></i> Monedhat
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-solid fa-screwdriver-wrench"></i> Administrimi</button>
<div class="dropdown-content">
<i class="fas fa-user"></i> Perdoruesit
<i class="fas fa-random"></i> Rolet
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-solid fa-file-invoice"></i> Faturimi</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-regular fa-share-from-square"></i> Shpenzimet e mia</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<a href="#" id="nav2" class="nav-item nav-link dropdown-toggle text-secondary" data-bs-toggle="dropdown" aria-expanded="false"> <button class="dropDownButton">
<i class="fas fa-user"></i> <span>{{ auth()->user()->name }}</span>
</button></a>
<div class="dropdown-profile">
<i class="fas fa-address-card"></i> Profili
<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="dropdown-item">
<i class="fas fa-sign-out-alt">
</i> Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
#include('partials.menu-horizontal')
CSS
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!--Font Awesome-->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts-->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!--MDB-->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.css"
rel="stylesheet"
/>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"
></script>
<style>
.dropDownButton {
background-color: white;
color: #6c757d;
padding: 16px;
font-size: 16px;
border: none;
width:200px;
}
.horizontal-menu{
width:850%;
top:10px;
margin-left: 210%;
}
.dropdown {
width:90px;
margin-top: -55px;
margin-left: 6%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 200%;
z-index: 1;
}
.dropdown-profile {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 220%;
z-index: 1;
}
.dropdown-profile a{
color: black;
padding: 12px 16px;
text-decoration: none;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
a{
color:#6c757d;
}
.dropdown-content a:hover {background-color: #2196f3; color:white;}
.dropdown-item:hover {background-color: #2196f3; color:white;}
.dropdown:hover .dropdown-profile {display: block;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropDownButton {background-color: #2196f3; color:white;}
.image{
width:100px;
height:48px;
margin-left: 150%;
}
</style>
How it looks like in smaller screen:
How it looks in bigger screen:
As you can see the admin is off the screen i need the navbar to stay static to the changes. My css is for sure bad as i said im learning.
This is not the proper way of using navbar of bootstrap.
Check out this method in which the use of css is minimal, and mosly used boostrap class and components
.navbar-logo {
width: 140px;
}
.dropdown-menu{
background-color: #f1f1f1;
}
.dropdown-item > i ,.nav-link > i{margin-right:8px;}
.nav-link{white-space:nowrap}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<nav class="navbar navbar-expand-md fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid navbar-logo" src="https://cashflow.io/wp-content/uploads/2021/03/CashflowLogo.png" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-home"></i>Dashboard</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-list"></i>Veprime
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-plus"></i>Porosite</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-money-bill-wave"></i>Konfirmo shpenzim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-receipt"></i>Konfirmo Arketim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-user-pen"></i>Veprimet e mia</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-solid fa-check-to-slot"></i>Arka
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-cash-register"></i>Arka</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-coins"></i>Konvertim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-hand-holding-dollar"></i>Monedhat</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-solid fa-screwdriver-wrench"></i>Administrimi
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-user"></i>Perdoruesit</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-random"></i>Rolet</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-solid fa-file-invoice"></i>Faturimi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-regular fa-share-from-square"></i>Shpenzimet e mia</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>Admin
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-address-card"></i>Profili</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt">
</i>Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
I fixed my code by using this example in W3SCHOOLS. Code Example
I have this topbar
<div class="container topbar">
<nav class="navbar navbar-expand-sm ">
{{-- With d-none d-lg-block logo hides on screen smaller than lg
--}}
<div class="col-md-3 d-none d-lg-block">
<div id="contain-logo">
<div id="logo">
<a class="rounded" href="{{ url('/') }}">{{ config('app.name', '') }}</a>
</div>
</div>
</div>
<!-- with ml-auto item align on right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ 'Se connecter' }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ 'Créer un compte' }}</a>
</li>
#endif
#else
#can('isAtLeastPhotoprovider')
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Administration
</a>
<div class="dropdown-menu">
#can('isAtLeastWriter')
<a class="dropdown-item" href="{{ route('posts.index') }}">Articles</a>
#endcan
#can('isAtLeastManager')
<a class="dropdown-item" href="{{ route('infoletter.index') }}">Infoletters</a>
<a class="dropdown-item" href="{{ route('adherent.index') }}">Adhérents</a>
#endcan
#can('isAtLeastPhotoprovider')
<a class="dropdown-item" href="{{ route('filemanager.index') }}">Fournir des
photos(contraint)</a>
#endcan
#can('isAdmin')
<a class="dropdown-item" href="{{ route('upload.index') }}">Fournir des
photos(libre)</a>
#endcan
<a class="dropdown-item" href="{{ route('home') }}">Retour à l'accueil</a>
</div>
</li>
#endcan
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop2" data-toggle="dropdown">
Bienvenue {{ Auth::user()->firstname }} {{ Auth::user()->familyname }} !
#can('isAtLeastPhotoprovider')
{{--Vous avez le rôle
{{ Auth::user()->role }}.--}}
#endcan
</a>
<div class="dropdown-menu ">
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ 'Se déconnecter' }}
</a>
</div>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
#csrf
</form>
</li>
#endguest
</ul>
</div>
</div>
</nav>
Hereafter are the changes in css that are in the custom css
.dropdown-menu {
background-color: antiquewhite;
padding: 5px;
}
.dropdown-item {
background-color: #513217;
border-radius: 8px;
color: antiquewhite;
margin-top: 5px;
}
.navbar {
background-color: transparent;
}
.navbar-nav {
background-color: transparent;
}
.nav-link {
color: antiquewhite;
background-color: rgba(110, 98, 89, 1);
border-radius: 5px;
border: 1px solid antiquewhite;
margin-left: 15px;
}
In this top bar there are 2 dropdown menus (Administration and Bienvenue). The trouble appears only when the navbar's dropdown menus become stacked on smaller devices.
The trouble appears only on the last dropdown menu. If Administration is the last it has the trouble and Bienvenue has not. Conversely if Bienvenue is the last it appears only for it.
The trouble is that the area where the mouse pointer has to be to trigger the link reduces to be a very thin strip on the top of the menu item. It is very uncomfortable for the user specially on smart phones.
In addition, the only item in the dropdown menu becomes effectless !
Thank you in advance for any help.
Finally I found that a div was overlapping the menu. Nothing very serious.
<div class="collapse navbar-collapse" id="navbarColor01">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
In cosmo bootswatch [boostrap theme] js for dropdown menu not work!?
as you see in up image, menu only droped down!
I run it on localhost
I see other posts on stack but not worked for me
fixed;
add two script tag in end of layout :
#RenderSection("scripts", required: false)
<script src="https://bootswatch.com/_vendor/popper.js/dist/umd/popper.min.js"></script>
<script src="https://bootswatch.com/_vendor/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
friends!
Is there any opportunity to create nested dropdown(multilevel dropdown) inside of dropdown menu item with bootsrap 3? Here is http://jsfiddle.net/kkqxgfk6/1/ what i'm trying to do. May be I made mistake somewhere in the code, is that so?
Here is the html-code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown">
Dropdown2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li ><a href="#" >Something</a>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
The nested "Dropdown2" menu item cann't be opened like its parent menu item called "Dropdown"
Add all bold content into your code.
<ul class="dropdown-menu" role="menu" **onclick="event.stopPropagation();"**>
<li class="dropdown" **id="test"**>
Dropdown2 <span class="caret"></span>
Add this code into javascript.
$( "#test1" ).click(function() {
$(this).attr("aria-expanded", "true");
$('#test').addClass("open");
});
Reasons for your problem By default when you click inside dropdown it closes.
here we are adding classes dynamically to second dropdown list.
Create one more CSS file and define "Dropdown-submenu" class.
Apply this "Dropdown-submenu" class to your inner "LI" tag as:
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown dropdown-submenu">
Dropdown2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li ><a href="#" >Something</a>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
The CSS file Will define Dropdown-submenu as:
.dropdown-submenu {
position:relative; } .dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu {
display:block; } .dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#333333;
margin-top:5px;
margin-right:-10px; } .dropdown-submenu:hover>a:after {
border-left-color: #999999; } .dropdown-submenu.pull-left {
float:none; } .dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px; }
Is it possible to create navigation bar with image icon at page bottom by using twitter bootstrap, here is sample image of the icon bar,
Here is an example for you :
<div class="nav-bottom">
<ul class="container nav nav-pills">
<li class="col-xs-4 col-sm-2 active">
<a href="#">
<i class="glyphicon glyphicon-comment"></i><br>
Message Board
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-home"></i><br>
Rooms
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-shopping-cart"></i><br>
Shopping List
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-wrench"></i><br>
Home Helpers
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-cog"></i><br>
Settings
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-user"></i><br>
User
</a>
</li>
</ul>
</div>
.nav-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: black;
padding: 5px 0;
}
.nav-bottom li + li {
margin-left: 0px;
}
.nav-bottom li a {
text-align: center;
background: black;
color: #ecf0f1;
}
.nav-bottom li:hover a,
.nav-bottom li:focus a {
background: #2980b9;
color: #ecf0f1;
}
.nav-bottom li.active a {
background: black;
color: #3498db;
}
Bootply