I have tried this, and everything is OK except second level sub-menus
it doesn't close automatically when i choose another item's sub-menus
gor example when i choose page1-3 and then page1-4
items of the 1-3 still remain in page until i click on them again
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#media only screen and (min-width: 500px) {
nav{float:right;
}
li{
float:right !important;
text-align:right;
direction:rtl ;
}
.dropdown-menu{
right:0 !important;
}
}
nav{text-align:right; }
li{text-align:right; direction:rtl;}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
margin-right: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li class="dropdown-submenu">
<a class="test" href="#">Page 1-3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Page 1-4<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>4rd level dropdown</li>
<li>4rd level dropdown</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
What you can do is first on click of sub-menu hide all menu inside submenu than toggle ul find more in below snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#media only screen and (min-width: 500px) {
nav{float:right;
}
li{
float:right !important;
text-align:right;
direction:rtl ;
}
.dropdown-menu{
right:0 !important;
}
}
nav{text-align:right; }
li{text-align:right; direction:rtl;}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
margin-right: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li class="dropdown-submenu">
<a class="test" href="#">Page 1-3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Page 1-4<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>4rd level dropdown</li>
<li>4rd level dropdown</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(".dropdown-submenu .dropdown-menu").css("display","none");
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
Add this to your script:
$('.dropdown-submenu > ul').hide();
solved code is:
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$('.dropdown-submenu > ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Related
I'm trying to align sub-menus below all parent menus and align with the left parent menu.
Please NOTE I don't want to align the submenus below the parent, I want to align the sub menus below the paint menu
I'm currently unable to achieve what I require even with position absolute and transform
My code (css/html) is below:
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<style>
#media (min-width: 768px) {
.nav li {
display: block;
transition-duration: 0.5s;
}
}
#media (min-width: 768px) {
li:hover {
background: #ffffff;
cursor: pointer;
}
}
#media (min-width: 768px) {
ul.nav li ul.multi-column {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1.1rem;
left: 0;
display: none;
}
}
#media (min-width: 768px) {
ul.nav li:hover > ul.multi-column, ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
}
#media (min-width: 768px) {
ul.nav li ul.multi-column li {
clear: both;
width: 100%;
}
}
#media (min-width: 768px) {
.multi-column {
border: 1px solid black;
border-top: 0;
background-color: #ffffff!important;
margin-top: 0!important;
width: 500px;
}
}
#media (min-width: 768px) {
.multi-column-dropdown {
/*margin: 0;*/
padding: 0 0 0 5px;
}
}
.dropdown-menu-centre {
right: auto!important;
left: auto!important;
/*-webkit-transform: translate(0, 0);*/
/*transform: translate(0, 0);*/
background-color: green!important;
}
.dropdown-menu-last {
right: auto;
left: -85%;
-webkit-transform: translate(-85%, 0);
transform: translate(-85%, 0);
}
</style>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navigation-clean">
<div class="container">
<button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Paints</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre">
<div class="row" role="menu">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Bristle Paint Brushes
</li>
<li>
Paints Link two
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Anti Condensation Paint
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Paints Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Woodcare</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
<li>
Wood Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Brushes & Rollers</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
<li>
Brushes Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">PPE</a>
<ul class="dropdown-menu multi-column dropdown-menu-last">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
<li>
PPE Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
The issue I am having can be seen in the image attached, all sub menus should align with the paint parent menu
Any help would be appreciated
Working Gif since you said its not working..:
Here you go: https://jsfiddle.net/h4ynogLe/
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<style>
#media (min-width: 768px) {
.nav li {
display: block;
transition-duration: 0.5s;
}
}
#media (min-width: 768px) {
li:hover {
background: #ffffff;
cursor: pointer;
}
}
#media (min-width: 768px) {
ul.nav li ul.multi-column {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1.1rem;
left: 0;
display: none;
}
}
#media (min-width: 768px) {
ul.nav li:hover > ul.multi-column, ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
}
#media (min-width: 768px) {
ul.nav li ul.multi-column li {
clear: both;
width: 100%;
}
}
#media (min-width: 768px) {
.multi-column {
border: 1px solid black;
border-top: 0;
background-color: #ffffff!important;
margin-top: 0!important;
width: 500px;
}
}
#media (min-width: 768px) {
.multi-column-dropdown {
/*margin: 0;*/
padding: 0 0 0 5px;
}
}
.dropdown-menu-centre {
right: auto!important;
left: auto!important;
/*-webkit-transform: translate(0, 0);*/
/*transform: translate(0, 0);*/
background-color: green!important;
}
.dropdown-menu-last {
right: auto;
left: -85%;
-webkit-transform: translate(-85%, 0);
transform: translate(-85%, 0);
}
</style>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navigation-clean">
<div class="container">
<button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Paints</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-4">
<div class="row" role="menu">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Bristle Paint Brushes
</li>
<li>
Paints Link two
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Anti Condensation Paint
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Paints Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Woodcare</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
<li>
Wood Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Brushes & Rollers</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5" style="margin-left: -150px !important;">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
<li>
Brushes Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">PPE</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5" style="margin-left: -303px !important;">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
<li>
PPE Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
Explanation: I just adjusted the margins as they can be negative. I also removed your last transform class.
Thank you for the reply, I tried your code, but for me, it still did not work as the image below shows.
I finally got it to work yesterday via jQuery, the code I used is below.
$(".nav-link").on("mouseover",function(){
var leftAlign = $("#main-div").offset();
var i;
for(i = 1; i < 7; i++)
{
$(".sub-container-" + i).css("position", "fixed");
$(".sub-container-" + i).css("left", + Math.floor(leftAlign.left) +"px" );
$(".sub-container-" + i).css("width", "600px");
}
CSS used to set the top alignment
#media (min-width: 768px) {
.sub-container-top {
position: absolute;
top: 362px;
}
}
#media (min-width: 992px) {
.sub-container-top {
position: absolute;
top: 262px;
}
}
The code I used produced the desired effect
Can anyone suggest how to adjust submenu(s) parallel to main menu.(without using negative margin-top)
Need output like this
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<!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.3.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">
<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 class="dropdown-submenu">
<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 class="dropdown-submenu">
<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>
.dropdown-submenu {
position: relative;
}
All you need to do, is remove that. Then the outer div container will become the reference point for the absolute positioning of those elements (because it is now the closest positioned ancestor.)
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
/*
.dropdown-submenu {
position: relative;
}
*/
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<!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.3.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">
<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 class="dropdown-submenu">
<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 class="dropdown-submenu">
<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 navbar and it have some menus in the anchor tag.
When I click the menu, it remains selected but when I click somewhere in the background then it loses that active class.
How to overcome this, please help
Below is the snippet of same
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
I have strange problem from the mobile menu. When I want to create a version for small, medium, large device 4 columns dropdown menu.
In the menu on the Extra Small Devices <768px:
When I click Link1>TEST
He is brings me to the url located under LINK2. Why?
If a click Link3>TEST
(Aslo 4 columns menu for larger device)
Everything is OK.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Test menu</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body{
background: #000000;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #ffffff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
#media(min-width:768px) {
#double li { width:25%;
float:left;
display:inline;
margin-bottom: 14px;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
min-width: 500px;
}
}
#media(max-width:767px) {
#double li { width:100%;
float:left;
display:inline;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
min-width: auto;
}
}
</style>
</head>
<body>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
Link1 <span class="caret"></span>
<ul class="dropdown-menu" id="double">
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
</ul>
</li>
<li>Link2</li>
<li class=" dropdown">
Link3 <span class="caret"></span>
<ul class="dropdown-menu" id="double">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Ok I solved this problem.
The answer if someone had the same problem
#media(min-width:768px) {
#double {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
#media(max-width:767px) {
#double {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
You've given both dropdowns the same ID. Not sure why that caused the behavior you're getting but fixing those fixes the menus:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
Link1 <span class="caret"></span>
<ul class="dropdown-menu" id="double1">
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
</ul>
</li>
<li>Link2</li>
<li class=" dropdown">
Link3 <span class="caret"></span>
<ul class="dropdown-menu" id="double2">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</li>
</ul>
</div>
Normally, I'd do a runnable snippet but your styles were being overwritten by the Bootstrap styles here.
How can I have the bootstrap nav bar float on top of the google map?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?&sensor=false">
</script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function initialize() {
getLocation();
}
google.maps.event.addDomListener(window, 'load', initialize);
function getLocation(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
// default location
}
}
function success(position){
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latlng,
zoom: 12
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
function error(msg){
if (msg.code == 1) {
//PERMISSION_DENIED
} else if (msg.code == 2) {
//POSITION_UNAVAILABLE
} else {
} //TIMEOUT
}
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
</button>
<a class="navbar-brand" href="#">Brand</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">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</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>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</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>
<div id="map-canvas"/>
</body>
</html>
If you mean float over the map, you can use Bootstrap's fixed top navbar..
http://www.bootply.com/124566
If you mean above the map vertically, you can use change the bottom margin on the navbar to 0..
http://www.bootply.com/124567