I currently have a multi layered dropdown that goes up to three lists. I am trying to have all the lists that show up automated by hover. This is because my intention is to have an href link, right now the link only works on the third dropdown list because the click the others before is used to display the next dropdown.
i tried to add :hover in the css of the classes dropdown-menu and dropdown submenu with "display: block;" but this is not functioning and the lists still shows only when clicked.
https://jsfiddle.net/nmv2d41w/1/
DROPDOWN:
<div class="dropdown p-left-15">
<button class="filter-btn filter-btn-default dropdown-toggle" type="button" data-toggle="dropdown">Filter Coupons</button>
<!--Category 1-->
<ul class="dropdown-menu filter-dropdown">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C1-1</a>
<!--Category 2-->
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C2-1</a>
<!--Category 3-->
<ul class="dropdown-menu">
<li>C3-1</li>
<li>C3-2</li>
<li>C3-3</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" value="" href="#">C1-2</a>
<!--Category 2-->
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C2-a</a>
<!--Category 3-->
<ul class="dropdown-menu">
<li>C3-a</li>
<li>C3-b</li>
<li>C3-c</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu:hover {
position: relative;
display: block;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.filter-btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.filter-btn.focus, .filter-btn:focus, .filter-btn:hover {
color: #333;
text-decoration: none;
}
.filter-btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.filter-btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}
.filter-dropdown li {
padding: 0px 8px;
font-size: 14px;
}
.filter-dropdown li:hover {
background-color: #e6e6e6;
}
.filter-dropdown li a {
color: black;
text-decoration: none;
}
you can try like this
html
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card my-3">
<div class="card-header">
Bootstrap 4 Multilevel Dropdown Hover
<div class="options float-right">
<a class="settings"><i class="fa fa-cog"></i></a>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-refresh"></i>
<i class=" fa fa-expand"></i>
<i class="fa fa-times"></i>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<div class="btn-group">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
href="">
Dropdown
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a class="dropdown-item" href="#">level 1</a></li>
<li><a class="dropdown-item" href="#">level 1</a></li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">
level 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" tabindex="-1" href="#">level 2</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">
level 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">3rd level</a></li>
<li><a class="dropdown-item" href="#">3rd level</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">level 2</a></li>
<li><a class="dropdown-item" href="#">level 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css
.dropdown-submenu {
position: relative;
}
.dropdown-submenu> a:after {
content: ">";
float: right;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 0px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
js
$(".btn-group, .dropdown").hover(
function () {
$('>.dropdown-menu', this).stop(true, true).fadeIn("fast");
$(this).addClass('open');
},
function () {
$('>.dropdown-menu', this).stop(true, true).fadeOut("fast");
$(this).removeClass('open');
});
working demo
Let me know if you have any doubt.
try something like this...
.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;
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: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.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;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-item">Some action</li>
<li class="dropdown-item">Some other action</li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Even More..</a>
<ul class="dropdown-menu">
<li class="dropdown-item">3rd level</li>
<li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a>
<ul class="dropdown-menu">
<li class="dropdown-item">4th level</li>
<li class="dropdown-item">4th level</li>
<li class="dropdown-item">4th level</li>
</ul>
</li>
<li class="dropdown-item">3rd level</li>
</ul>
</li>
<li class="dropdown-item">Second level</li>
<li class="dropdown-item">Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Related
I have a bootstrap dropdown that I want to make the same width as the navbar. Instead of it going 100% the width of the navbar, it's going 100% the width of the screen. I've tried everything I can think of and I can't get it to be the width of the navbar. Any help would be greatly appreciated. Thanks!
<ul class="nav nav-tabs" id="billet-management-tabs" role="tablist">
<li class="nav-item" id="dashboard-nav-item" role="presentation">
<button id="dashboard-tab" data-bs-toggle="tab" data-bs-target="#dashboard-content" class="nav-link" type="button" role="tab">Dashboard</button>
</li>
<li class="dropdown-start">
<div class="dropdown ">
<div class="nav-item" id="positions-nav-item" role="presentation" data-bs-toggle="dropdown">
<button id="positions-tab" data-bs-toggle="tab" class="nav-link dropdown-toggle" aria-haspopup="true" type ="button">Positions</button>
</div>
<ul class="dropdown-menu" aria-expanded="false">
<li class="dropdown-item" id="billets-nav-item" role="presentation" data-bs-toggle="tab">
<button id="billets-tab" data-bs-toggle="tab" data-bs-target="#billets-content" class="nav-link" aria-haspopup="true" type="button" role="tab">Billets</button>
</li>
<li class="dropdown-item" id="position-descriptions-nav-item" role="presentation">
<button id="position-descriptions-tab" data-bs-toggle="tab" data-bs-target="#position-descriptions-content" class="nav-link text-left" type="button" role="tab">Position Descriptions</button>
</li>
<li class="dropdown-item" id="staffing-actions-nav-item" role="presentation">
<button id="staffing-actions-tab" data-bs-toggle="tab" data-bs-target="#staffing-actions-content" class="nav-link" type="button" role=tab>Staffing Actions</button>
</li>
<li class="dropdown-item" id="labor-categories-nav-item" role="presentation">
<button id="labor-categories-tab" data-bs-toggle="tab" data-bs-target="#labor-categories-content" class="nav-link" type="button" role="tab">Labor Categories</button>
</li>
<li class="dropdown-item" id="staffing-action-nav-item" role="presentation">
<button id="staffing-action-tab" data-bs-toggle="tab" data-bs-target="#staffing-action-content" class="nav-link" type="button" role="tab">Staffing Action</button>
</li>
<li class="dropdown-item" id="staffing-matrix-nav-item" role="presentation">
<button id="staffing-matrix-tab" data-bs-toggle="tab" data-bs-target="#staffing-matrix-content" class="nav-link" type="button" role="tab">Staffing Matrix</button>
</li>
</ul>
</div>
</li>
</ul>
.dropdown-item {
color:#F8F8F8;
}
.dropdown-item:active {
background-color: #006bb5;
}
.dropdown-item:hover {
background-color: #0054b5;
color: #F8F8F8;
}
.nav-link {
width: 100%;
color: #F8F8F8;
border: none;
font-weight:600;
font-size:1.2rem;
padding-left:25px;
padding-right:25px;
}
.nav-link:focus {
color: #F8F8F8;
}
.nav-link:hover {
border: none;
color:#F8F8F8;
margin-bottom: -1px;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background-color: #006bb5;
color: #F8F8F8;
}
.nav-tabs .nav-link{
border-radius:0;
border:0;
}
.dropdown-menu {
padding: 0px;
margin: 0px;
background-color: #006bb5;
border-radius: 0;
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.75);
}
.dropdown-nav {
list-style: none;
padding: 0px;
margin:0px;
}
.nav {
background-color: #131523;
}
.nav > li > .dropdown {
position: static;
}
.nav li .dropdown > .dropdown-menu.show{
width:100%;
display:flex;
}
I've been struggling with one problem related to displaying a logo when a sticky header is activated. The menu I've accomplished so far works as intended, but I need to display the logo in a small version as soon the header becomes sticky and keep the options centered. Below what I've got:
And I need something like this as soon as the div becomes sticky:
Here's my code so far:
.navbar {
background-color: #fff !important;
}
.navbar .navbar-nav li a {
color: #b29b72 !important;
}
.navbar .navbar-brand {
color: #b29b72 !important;
}
.navbar .navbar-brand:hover {
color: #b29b72 !important;
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(178,155,114, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* HOMEPAGE *****************************************************/
.video-container {
padding-right: 0px;
padding-left: 0px;
}
#splash {
position: relative;
text-align: center;
height: 300px;
background-color: #878787;
}
#splash .video {
position: relative;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
border-bottom: 1px solid #eee;
}
#splash .opaque {
opacity: 0.4;
background-color: #ffffff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.menu-options {
padding-top: 12px;
}
.menu-options a {
color: #b29b72;
font-weight: 600;
font-size: 20px;
}
#menu-row {
height: 50px;
background-color: #000000 !important;
}
.menu-options ul {
margin: 0;
padding: 0;
}
.menu-options ul li {
display: inline-block;
width: 120px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Fantastic Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
<div class="container">
<div class="navbar-collapse collapse nav-content order-2">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
<li class="nav-item">
<a class="nav-link" href="#"><img src="http://via.placeholder.com/200x110"></a>
</li>
<button class="navbar-toggler custom-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</ul>
<div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
<ul class="ml-auto nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="menu-row" class="sticky-top">
<div class="container">
<div class="row">
<div class="col-12 menu-options text-center">
<ul>
<li>OPTION 1</li>
<li>OPTION 2</li>
<li>OPTION 3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid video-container">
<div id="splash">
<div class="video">
<video autoplay="autoplay" poster="http://via.placeholder.com/1920x300" loop="loop" muted="muted" preload="auto">
<source src="" type="video/mp4">
<source src="" type="video/webm">
</video>
<div class="opaque"></div>
</div>
</div>
<div class="container">
<div class="row" style="height: 100vh;">
<div class="col-12">
</div>
</div>
</div>
</div>
</body>
</html>
You'll need two logos (large - standard. Small - scroll / navigation). Then do the following add the following JQuery to your code, but make sure you use the specific class names (not the ones I've used in my example).
$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(!logo.hasClass("sml-logo")) {
logo.hide();
logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("lrg-logo")) {
logo.hide();
logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
}
}
});
});
.wrapper {
height: 2000px;
position: relative;
background: green;
}
header {
position: fixed;
width: 100%;
height: 50px;
background: grey;
}
.lrg-logo {
width: 300px;
height: 50px;
text-align: center;
background: red;
}
.sml-logo {
width: 200px;
height: 20px;
text-align: center;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
<div class="lrg-logo">Logo</div>
</header>
</div>
I've created a navbar with some dropdown menus. I wanted to have some nested dropdown. As bootstrap3 doesn't support nested dropdown, I manually create that. In wide screen that menu items are displayed, it's ok but in mobile devices size that menu hide in toggle button, it doesn't work correctly. How can I fix that in mobile sizes?
HTML:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-to-min" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand" id="brand-name"></div>
</div>
<div class="collapse navbar-collapse" id="navbar-to-min">
<ul class="nav navbar-nav">
<li>خانه</li>
<li class="dropdown">
دانشآموزان<span class="caret"></span>
<ul class="dropdown-menu">
<li>مقطع اول</li>
<li>مقطع دوم</li>
<li>مقطع سوم</li>
<li>مقطع چهارم</li>
<li>مقطع پنجم</li>
</ul>
</li>
<li class="dropdown">کارکنان<span class="caret"></span>
<ul class="dropdown-menu">
<li>مدیریت</li>
<li class="dropdown">معاونین<span class="caret"></span>
<ul class="dropdown-menu">
<li>معاون اول</li>
<li>معاون پرورشی</li>
</ul>
</li>
<li>معلمان</li>
<li>خدمات</li>
</ul>
</li>
<li>تماس با ما</li>
<li href="#"><a>همکاری با ما</a></li>
</ul>
</div>
</nav>
CSS:
.dropdown:focus > .dropdown-menu, .dropdown:active > .dropdown-menu{
display: block;
}
.dropdown-menu > .dropdown > .dropdown-menu{
top: 0;
right: 100%;
margin-top: -6px;
margin-right: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
#media (min-width: 768px) {
.dropdown-menu > li > .dropdown-nested:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #ccc;
margin-top: 5px;
margin-left: -10px;
}
.dropdown > .dropdown-nested > .caret{
display: none;
}
.dropdown:hover > .dropdown-menu{
display: block;
}
.open > .dropdown-menu{
display: none;
}
.navbar-default .navbar-nav > li > a:active {
color: #777;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color: #777;
background-color: #f8f8f8;
}
}
In addition, my page direction is rtl.
JSFiddle
From W3 schools, they have an example of how to do a nested dropdown bootstrap modal. https://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp
$(document).ready(function(){
$('.dropdown a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we use jQuery to open multi-level dropdowns on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li>
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li>
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
I have coded up a bootstrap navbar, however when I tried to test its responsiveness, it does not create the little hamburger icon like it should...
I have an outer container for my page which has a fixed width, and an inner container for my fixed-top navbar of course. I have tried playing around with the containers, but it doesnt make the navbar responsive at all, so I must be missing something, or some code is conflicting with the responsive navbar??
fyi: the flex code doesnt seem to be working correctly in here :/
thanks guys
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
<ul class="nav navbar-nav navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
You have a few issues that you need to fix.
You need a navbar-header, that includes the button that will be shown on small screen sizes.
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
</div>
You need to wrap your menu content in a collapse div, that will be shown/hidden on button click on small screen sizes.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
3. The container inside of your menu needs to be a container-fluid.
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container-fluid">
You need to make your container class have auto width for small screen sizes, otherwise it pushes the hamburger button off the screen. A bit of CSS with a media query can achieve this.
#media(max-width: 767px) {
.container {
width: auto;
}
}
Bootstrap Navbar Documentation
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
#media(max-width: 767px) {
.container {
width: auto;
}
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<!-- 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" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
</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 navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
I try to create a navigation menu. Some of the items should get a submenu which will be shown by clicking/hovering the arrow-icon.
But I got some problems to position the submenu correctly
JSFiddle: http://jsfiddle.net/g651mwdu/
<nav>
<div class="nav-button-group"> <span class="nav-button-group-title">Title</span>
<div class="nav-button-container"> <span class='fa fa-plus button-icon'></span>
<span class="button-text">Add</span>
<div class="button-arrow-down"></div>
<div class="submenu">Show some more elements</div>
</div>
<div class="nav-button-container"> <span class='fa fa-cog button-icon'></span>
<span class="button-text">Change</span>
<div class="button-arrow-down"></div>
</div>
<div class="nav-button-container"> <span class='fa fa-link button-icon'></span>
<span class="button-text">Link</span>
</div>
<div class="nav-button-container"> <span class='fa fa-comment-o button-icon'></span>
<span class="button-text">Tooltip</span>
</div>
<div class="nav-button-container"> <span class='fa fa-trash-o button-icon'></span>
<span class="button-text">Remove</span>
</div>
</div>
</nav>
CSS
.nav-button-container {
display: inline-block;
width: 2em;
height: 2.5em;
padding: .25em;
text-align: center;
color: #555;
}
.button-text {
display: block;
font-size: .5em;
margin: .5em 0;
}
.button-icon {
vertical-align: middle;
font-size: 1.3em;
}
.button-arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #B4B4B4;
margin: 0 auto;
}
.line-separator {
display: inline-block;
width: 1em;
}
nav {
background-color: #f2f2f2;
padding: .3em 0;
border-radius: 7px;
}
.nav-button-group {
display: inline-block;
background-color: #fafafa;
padding: .3em;
border-radius: 5px;
}
.nav-button-group-title {
display: block;
font-weight: bold;
font-size: .7em;
color: #555;
padding: 0 .5em;
background-color: #F2F2F2;
border-radius: 4px;
}
Is this what you are trying to achieve (navigation with font awesome icons aligned to the drop-down text)?
You're using buttons to build your menu which isn't necessary (or recommended). Use ul unordered lists and list items li to build your nav. Then inserting icons is pretty straight forward.
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
Example Snippet
.navbar {
border-radius: 0px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px 6px 6px 6px;
border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0px;
height: 0px;
border-color: transparent;
border-style: solid;
border-width: 5px 0px 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0px 6px 6px;
-moz-border-radius: 6px 0px 6px 6px;
border-radius: 6px 0px 6px 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> Brand
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Profile
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><i class="fa fa-envelope-o fa-fw"></i> Inbox
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i> Trash
</li>
</ul>
</li>
<li>Hello
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><i class="fa fa-envelope-o fa-fw"></i> Inbox
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i> Trash
<li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>
</li>
<li><a tabindex="-1" href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a>
</li>
<li><a tabindex="-1" href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login
</li>
</ul>
</div>
</nav>