I've been trying to fix the issue with the navbar dropdown menu when using viewport smaller than 768px (mobile/touchscreen).
When tested on touchscreen, one click is supposed to open the dropdown (this works fine), the second click is supposed to close it (closing of the dropdown works, but on touchscreen it still shows the dropdown menu on the side like it is ul.dropdown-menu:hover ).
I am trying to have it hidden after the dropdown toggle is clicked to close, and the cursor is still hovers on the toggle (touchscreen).
Here is the code:
ul.dropdown-menu {
background-color: #4474a8;
}
ul.dropdown-menu li a {
background-color: #4474a8
}
ul.dropdown-menu li a:hover {
background-color: #4474a8;
color: #111111!important;
}
.dropdown:hover .dropdown-menu {
display: block;
}
a.dropdown-toggle:focus {
color: #2f1b09;
}
.dropdown-link {
text-align: center;
background-color: #4474a8;
color: #FFFFFF !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<img src="#" class="img-responsive center-block" id="logo-top">
</div>
<div class="col-md-1"></div>
</div>
</div>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-anchor"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active" id="active-nav">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">MENU 1<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-ship" aria-hidden="true"></i> SUBMENU 1</li>
<li> SUBMENU 2</li>
<li> SUBMENU 3<b>$</b></li>
<li> SUBMENU 4</li>
</ul>
</li>
<li>MENU 2</li>
<li>MENU 3</li>
<li>MENU 4</li>
<li class="dropdown">
<i class="fa fa-camera" aria-hidden="true"></i> MENU 5<span class="caret"></span>
<ul class="dropdown-menu">
<li>Photos</li>
<li>Video</li>
<li><i class="fa fa-youtube" aria-hidden="true"></i>YouTube</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- # #banner-->
<div class="container-fluid" id="banner">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="bannerCol1L">
</div>
<!-- / #bannerCol1L -->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="bannerCol2R">
<a class="orange pillboxLarge" id="getstarted">BUTTON</a>
</div>
</div>
<!-- / .row -->
</div>
<!-- / .container-fluid #banner -->
</body>
In your CSS, delete the following:
.dropdown:hover .dropdown-menu {
display: block;
}
Related
I am trying to change the width of drowpdown menu in Bootstrap. Please guide where should i insert the custom CSS to change/reduce the width of drop-down menu.
<body>
<div class="container-fluid">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">MENU <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">HEADER-1</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
<li class="divider"></li>
<li class="dropdown-header">HEADER-2</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Bootstrap's dropdown has some min-width to it. Change the min-width of drop-down menu so reduce its width.
.dropdown-menu {
min-width: 125px;
}
<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>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-menu {
min-width: 125px;
}
</style>
<div class="container-fluid">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">MENU <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">HEADER-1</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
<li class="divider"></li>
<li class="dropdown-header">HEADER-2</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
</ul>
</div>
</div>
add custom class in your tag <li>, example
.dropdown-custom > .dropdown-menu {
min-width:220px;
padding:15px;
color:red;
}
try my fiddle
I have 3 menu items in my navbar. I want the entire nav to be divided into 3 parts for my 3 menus. I tried with the following code but the last menu item takes bit extra space than others. How do i fix it?
.navbar {
border : 1px solid #ffffff;
}
#intr1, #intr2 {
border-right: 1px solid #ffffff;
}
.menuLabel {
text-align: center;
font-size: 17px;
font-weight: bold;
color: #ffffff;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-header ">
<ul class="nav navbar-nav container">
<li class="col-md-4" id="intr1"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
<li class="col-md-4" id="intr2"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
<li class="col-md-4" id="intr3"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Try with something like this:
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul>
<li class="col-md-4" id="intr1">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
<li class="col-md-4" id="intr2">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
<li class="col-md-4" id="intr3">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
I hope this will help you a lot:
HTML:
<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" 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>
<!-- 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 customnavbarnav">
<li class="customlist">Link
</li>
<li class="customlist">Link
</li>
<li class="customlist">Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- /.navbar navbar-default -->
CSS:
.customnavbarnav{
width: 100%;
text-align: center;
}
.customlist{
width: 33.33333333333333%
}
Just remove the .container class on the .navbar-nav because that is causing you to have 15px right padding which throws off the evenness.
I am looking to ellipse one of the header Text components when the viewport size is small to prevent the header from wrapping and becoming two lines.
Details here : https://jsfiddle.net/3L8ch5bo/7/ As you change the width of the viewport - you will see that the header goes into two lines.
I would like it to the ellipse in this way : https://jsfiddle.net/vsj896as/1/
The problem with ellipsing shown above is that it forces the header to be a fixed length. Is there a way to have it ellipsed based on size of the viewport (using max-width: calc(..) for example).
Please note that the "Left Text" on the header is non-standard bootstrap header component and is causing the complexity. It is needed and cannot be shortened and should be displayed in full.
Any help is greatly appreciated..
Here is the html code :
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="pull-left headComp">Left Text</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-items-collapse" 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 ellipsed">How to Ellipse This Very Very Long Header Text</div>
</div>
<div class="collapse navbar-collapse" id="menu-items-collapse">
<ul class="nav navbar-nav">
<li class="active"><a target="_blank" href="url1">Home</a></li>
<li class="active"><a target="_blank" href="url2">Getting Started</a></li>
<li class="active"><a target="_blank" href="url3">Contact</a></li>
<li class="active"><a target="_blank" href="url4">Videos</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron container-fluid" style="text-align: center;">
<h1>Jumbo Message</h1>
</div>
</body>
Here is a quick way to complete what you want. The code attached and in the provided jsfiddle checks the viewport size on document.ready. If the size is less than 768px the text within the .navbar-brand will shorten.
The .resize event triggers the responsive part. If viewport is greater than 768px then the original text will show else if the viewport is less than the shortened text will show.
Hope that helps or at least points you in the right direction.
view jsfiddle here
$(function(){
var $startingView = $(window).width();
var $startingBrand = $('.navbar-brand');
if($startingView < 768) {
$startingBrand.text("How To...")
}
$(window).resize(function(){
var $viewportWidth = $(window).width();
var $brand = $(".navbar-brand");
var originalTitle = "How to Ellipse This Very Very Long Header Text";
var shortTitle = "How To...";
if($viewportWidth < 768) {
$brand.text(shortTitle);
}else{
$brand.text(originalTitle);
}
});
});
.headComp {
color: white;
margin-top: 16px;
width: 95px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="pull-left headComp">Left Text</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-items-collapse" 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">How to Ellipse This Very Very Long Header Text</div>
</div>
<div class="collapse navbar-collapse" id="menu-items-collapse">
<ul class="nav navbar-nav">
<li class="active"><a target="_blank" href="url1">Home</a></li>
<li class="active"><a target="_blank" href="url2">Getting Started</a></li>
<li class="active"><a target="_blank" href="url3">Contact</a></li>
<li class="active"><a target="_blank" href="url4">Videos</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron container-fluid" style="text-align: center;">
<h1>Jumbo Message</h1>
</div>
</body>
I'm using twitter bootstrap on my site and when I collapse the window partially, this happens!
If I collapse the window further, then the desired button appears and the links disappear.
Q) Why is this happening? I want the nav links to collapse at this window width, leaving the button. Nav code below:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="/" style="font-size: 24px;">My brand name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="<%= GetCssClassNavItemHome() %>">Home</li>
<li class="<%= GetCssClassNavItem("/about") %>">About</li>
<li class="<%= GetCssClassNavItem("/services") %>">Services</li>
<li class="<%= GetCssClassNavItem("/project") %>">Projects</li>
<li class="<%= GetCssClassNavItem("/prices") %>">Prices</li>
<li class="<%= GetCssClassNavItem("/blog") %>">Blog</li>
<li class="<%= GetCssClassNavItem("/contact") %>">Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-pills">
<li>
<a target="_blank" href="http://www.linkedin.com/">
<i class="fa fa-linkedin fa-2x"></i>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
The problem is the padding applied in the class .container - 15px both left and right. If you reduce the padding, the problem goes away.
If you add another class to the div.container - in this example, say lesspadding:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container lesspadding">
etc.
and then apply different padding to the new class, like so:
.lesspadding {
padding-left: 10px;
padding-right: 2px;
}
Bootply here
I know that there's a lot of code exmaples/questions like that. I searched a lot and tried to copy/paste many code. Nothing worked. So sorry if duplicate or something.
Anyways, I'm trying to add a bootstrap Dropdown menu to my fixed navbar.
I don't want the dropdown to be activated onclick so i removed the caret.
Here is my (part of) my code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a>
</div>
<div class="navbar-collapse collapse">
<span class="glyphicon glyphicon-folder-open room-icn"></span>
Rooms
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Anyone? Thanks !
I cannot take credit for this. Ryan Olson has a tutorial here. Add the CSS to your .css file or your head. Add the JavaScript to the very bottom of the page before the </body>. Put the HTML in the body of the page.
CSS:
.navbar-nav .dropdown:hover > .dropdown-menu {
display: block;
}
.navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu {
display: none;
}
.navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu {
display: block;
}
JavaScript:
<script type="text/javascript">
$(function () {
var $win = $(window);
$win.resize(function () {
if ($win.width() > 768)
$(".navbar-nav > .dropdown > a").attr("data-toggle", "");
else
$(".navbar-nav > .dropdown > a").attr("data-toggle", "dropdown");
}).resize();
$(".dropdown-menu").find("input, button").each(function () {
$(this).click(function (e) {
e.stopPropagation();
});
});
});
</script>
HTML:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<span class="glyphicon glyphicon-folder-open room-icn"></span> Rooms
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Whole page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
.navbar-nav .dropdown:hover > .dropdown-menu {
display: block;
}
.navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu {
display: none;
}
.navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<span class="glyphicon glyphicon-folder-open room-icn"></span> Rooms
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
var $win = $(window);
$win.resize(function () {
if ($win.width() > 768)
$(".navbar-nav > .dropdown > a").attr("data-toggle", "");
else
$(".navbar-nav > .dropdown > a").attr("data-toggle", "dropdown");
}).resize();
$(".dropdown-menu").find("input, button").each(function () {
$(this).click(function (e) {
e.stopPropagation();
});
});
});
</script>
</body>
</html>
Here is a bootply of it.