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
Related
I have text and an image in menu items made up of ul and li tags. I am using default _layout.cshtml page. I want to vertically align the text of menu items. But instead they are aligned at the top.
I tried vertical-align attribute on #li tags.
<style>
li#menu-item-logo a {
line-height: 30px;
}
li#menu-item-logo a img{
vertical-align: middle;
}
</style>
Entire _Layout.cshatml content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Badar Books</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
</environment>
<link rel="stylesheet" href="~/css/site.css" />
<style>
li#menu-item-logo a {
line-height: 30px;
}
li#menu-item-logo a img{
vertical-align: middle;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse align-text-bottom">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item" id="menu-item-logo">
<a class="nav-link text-dark" asp-area="" asp-page="/Index" name="homepage">
<img src="~/images/BadarBooks_Monogram.png" alt="Badar Books Monogram" class="img-responsive" />
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index" name="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/About">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Contact">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Catalogs">CATALOGS</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Search">SEARCH</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/SalesAndShipping">SALES AND SHIPPING</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<partial name="_CookieConsentPartial" />
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - Badar Books - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
</script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
Let me know if I should post site.css file contents. The project was created using VS21017 ASP.NET Core 2.2 Web Application template.
The output:
The menu items are at the top. I need them in the middle.
menu items with an image menu item
Try this
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Catalogs</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Please help me to understand the use of "dropdown-toggle" class in dropdown. In the code below, I have removed the "dropdown-toggle" class. Without this also dropdown is working fine. Then What is use of this class.
<div class="container-fluid">
<h1>Hello, world!</h1>
<div class="dropdown">
<button type="button" class="btn btn-info" data-toggle="dropdown">MENU</button>
<ul class="dropdown-menu">
<li>ITEM-1</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
</ul>
</div>
The dropdown-toggle class adds the outline: 0; on :focus to the button, so when you click on the button it will not have the surrounding blue border of the "active" element.
Look on the the sample example below:
<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>
<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials - no border
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="divider"></li>
<li>About Us</li>
</ul>
</div>
</div>
<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default" type="button" data-toggle="dropdown">Tutorials - with border
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="divider"></li>
<li>About Us</li>
</ul>
</div>
</div>
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 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 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.