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.
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'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;
}
I have some minor bootstrap issues i cannot seem to solve.
I want the logo and the text that appears on the right of it to simply appear on the left instead of the center. (I have tried pull-left with no luck)
I want the hamburger menu to appear on the far right, after i added the visible-sm-block and visible-lg-block to the nav-bar toggle it appears in the center. I added it because it was not displaying on mobile screens??? and i need it to display on tablet and small devices only. I have tried pull-right
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<img alt="Logo" class="brnd" src="" height="30" /><span class="brnd2">| Specialty FORCES </span>
<button type="button" class="navbar-toggle visible-sm-block visible-xs-block" 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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden-lg hidden-md hidden-sm">1</li>
<li class="hidden-lg hidden-md hidden-sm">2</li>
<li class="hidden-lg hidden-md hidden-sm">3</li>
<li class="hidden-lg hidden-md hidden-sm">4</li>
<li class="hidden-lg hidden-md hidden-sm">5</li>
<li class="hidden-lg hidden-md hidden-sm">6</li>
</ul>
</div>
</div>
</div>
.navbar-default .navbar-brand{padding-right: 70px;}
.navbar-default .navbar-toggle{position: absolute;right: 0;}
#media (max-width: 768px) {
.navbar-toggle {
display: block;
position: absolute;
right: 0;
top: 0;
float: none;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#jb-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>
<div>
<div class="navbar-header">
</div>
<a class="pull-left navbar-brand" href="#">
<span><img alt="Logo" class="brnd" src="" height="30" /></span>
|Specialty FORCES
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="jb-navbar-collapse">
<ul class="nav navbar-nav navbar-nav-fix">
<li class="hidden-lg hidden-md hidden-sm">1</li>
<li class="hidden-lg hidden-md hidden-sm">2</li>
<li class="hidden-lg hidden-md hidden-sm">3</li>
<li class="hidden-lg hidden-md hidden-sm">4</li>
<li class="hidden-lg hidden-md hidden-sm">5</li>
<li class="hidden-lg hidden-md hidden-sm">6</li>
</ul>
</div>
</nav>
hope this resolve your issue
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.