I have created a dropdown menu but it is not working:
<div class="col-xs-6 col-md-4">
<ul id="hld" style="margin-top:10px;">
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;">
Menu
<ul class="dropdown-menu">
<li>Tom</li>
<li>Greg</li>
<li>Jane</li>
</ul>
</li>
</ul>
</div>
I am using Bootstrap CSS framework and have included all the appropriate CSS and JS files. What am I doing wrong? While looking at other questions similar to mines, I haven't been able to figure it out.
One solution may be that you are not referencing the jquery.js source before bootstrap.js source
You're missing some key elements.
This is what your dropdown element should look like.
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;">
This goes with the dropdown-toggle class.
data-toggle="dropdown" aria-expanded="false"
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6 col-md-4">
<ul id="hld" style="margin-top:10px;">
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;"> Menu <span class="caret"></span>
<ul class="dropdown-menu ">
<li>Tom
</li>
<li>Greg
</li>
<li>Jane
</li>
</ul>
</li>
</ul>
</div>
First mistake was a couple of quotation marks missing. On top of that, you are not following the syntax and classes listed here: http://getbootstrap.com/components/#dropdowns
Here is the correct version:
<div class="col-xs-6 col-md-4">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Menu
<span class="caret"></span>
</button>
<ul id="hld" class="dropdown-menu" style="margin-top:10px;">
<li>Tom</li>
<li>Greg</li>
<li>Jane</li>
</ul>
</div>
Related
I'm pretty new to bootstrap(using 3.3.7 version) and css and need to do some front-end editing of existing code.
I got the following code:
<nav class="navbar navbar-default">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Fields
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<ul>
<li style="list-style-type: none" ng-repeat="fieldObj in vm.gridOptions.columnDefs">
<input type="checkbox" ng-model="fieldObj.visible"> {{fieldObj.field}}
</li>
<li style="list-style-type: none">
<button ng-click="vm.refreshGrid()">OK</button>
</li>
</ul>
</div>
</div></nav>
which results with the following :
Can I control the white space surrounding the list elements ?
Thanks
You need to reset ul which by default takes browser specific styles
ul{
padding-left: 0;
}
Use
.dropdown-menu ul{
padding-left:3px;
}
instead the default padding-left:40px;
.dropdown-menu ul{
padding-left:3px;
}
<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>
<nav class="navbar navbar-default">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Fields
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<ul>
<li style="list-style-type: none">
<input type="checkbox" ng-model="fieldObj.visible"> no
</li>
<li style="list-style-type: none">
<input type="checkbox" ng-model="fieldObj.visible"> yes
</li>
<li style="list-style-type: none">
<button ng-click="vm.refreshGrid()">OK</button>
</li>
</ul>
</div>
</div></nav>
I'm trying to add a mobile responsive fixed dropdown menu. I tried this:
<div class="row" style="position:fixed">
<div class="col-sm-10"></div>
<div class="col-sm-2">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Location
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Location 1</li>
<li>Location 2</li>
<li>Location 3</li>
<li role="separator" class="divider"></li>
<li>ALL</li>
</ul>
</div>
</div>
</div>
its working fine right? may be you did't added bootstrap properly
jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
bootstrap javascript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
bootstrap css
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
.text {
height: 3000px;
border: 1px solid orange;
}
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="position:fixed">
<div class="col-sm-10"></div>
<div class="col-sm-2">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Location
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Location 1</li>
<li>Location 2</li>
<li>Location 3</li>
<li role="separator" class="divider"></li>
<li>ALL</li>
</ul>
</div>
</div>
</div>
<br><br>
<div class="text"></div>
I have a page that uses Bootstrap 3. In this page, I have a navbar that's defined like the following:
<nav class="navbar" style="background-color:orange;">
<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" style="color:#000 !important;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" style="color:#000;"></span>
<span class="icon-bar" style="color:#000;"></span>
<span class="icon-bar" style="color:#000;"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="/home" class="dropdown-toggle navbar-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Home <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>help</li>
<li>contact</li>
</ul>
</li>
</ul>
<div class="navbar-right">
<div class="visible-xs">
<div class="row">
<div class="col-xs-6">
2016
<ul class="dropdown-menu dropdown-menu-right">
<li>Q1</li>
<li>Q2</li>
<li>Q3</li>
<li>Q4</li>
</ul>
</div>
<div class="col-xs-6">
2017
<ul class="dropdown-menu dropdown-menu-right">
<li>Q1</li>
<li>Q2</li>
<li>Q3</li>
<li>Q4</li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs">
<ul class="nav navbar-nav">
<li>
2016
<ul class="dropdown-menu dropdown-menu-right">
<li>Q1</li>
<li>Q2</li>
<li>Q3</li>
<li>Q4</li>
</ul>
</li>
<li>
2017
<ul class="dropdown-menu dropdown-menu-right">
<li>Q1</li>
<li>Q2</li>
<li>Q3</li>
<li>Q4</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
The navbar looks and works like I want on bigger screens. But on mobile, it doesn't work correctly. As you can see in this Bootply, the nav menu pushes the main content (the Lorem Ipsum) down. However, I want the nav menu to appear on top of the content, so that the mobile nav appears on top of the Lorem Ipsum stuff. What am I doing wrong?
Do you want like this:
http://www.bootply.com/9OB6nhtg4i#
#media (max-width:768px) {
.navbar {
position: absolute;
}
}
Add this css and try.
U need to use navbar-fixed-top class and set top padding for main block:
main {
padding-top: 60px;
}
http://www.bootply.com/aROSWOLDZY
I am trying to achieve a dropdown menu using bootstrap in a navbar. I came across this example and it obviously works perfectly. However I wanted to change the 1st dropdown ( from the left ) to a dropdown button. However if I try and change it to a button the styling gets all messed up ( see image below).
Relevant code:
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo goes here</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
wrap the .btn in a wrapper classed as navbar-form to enable the padding as per the example given, like follows:
<ul class="nav navbar-nav">
<li class="dropdown">
<!-- doesn't need to be a form element -->
<form class="navbar-form">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</div>
</form>
<!-- example using div and anchor instead of form and button -->
<div class="navbar-form">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</div>
</div>
</li>
</ul>
Here it is on CodePen
There is no reason to have the btn wrapped in a form that makes no sense. In bootstrap 3 you just need to add the class .navbar-btn to the button to have it vertically align in the navbar. Also If you are only going to have the one button there is no reason to use a button group. If you are going to have more than one button then use button group. But the checked answer wrapping it in a form is just silly plus your adding another dom element for no reason. Try the following:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo goes here</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<button class="btn btn-default navbar-btn dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Drinkin People is correct
Simply changing this:
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
To this:
<a class="navbar-btn btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
It will center your button vertically in the navbar
Simply changing the <a> tag into a <button> tag should do the trick.
<ul class="nav navbar-nav">
<li class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</li>
</ul>
Edit: Checked on one of my own sites. Try removing the <div class="btn-group">.
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class = "container">
<div class="navbar" >
<div class ="navbar-header">
<!-- Place your logo here -->
<div class="navbar-brand" >
<img src="images/logo.png" alt="logo text">
</div>
</div>
<button type="button" class="navbar-toggle navbar-right " data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"><hr><hr><hr></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class=" collapse navbar-collapse nav-collapse ">
<ul class="nav navbar-nav navbar-right">
<!-- Add require site page navigation -->
<li> <i class="icon-globe"></i>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:#000000"><i class="icon-user"></i>About Us<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>The Company</li>
<li>Vision</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:#000000"><i class="icon-user" style="color:#000000"></i>Team<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Meet Our Team</li>
<li>Our Sister concerns</li>
</ul>
</li>
<li><i class="icon-pencil"></i>Projects</li>
Refer
Contact Us
Web
Locate
</ul>
</div>
</div>
</div>
check the problem at www.alaknandainfra.com/refer.php the nav bar collapses suddenly in mobile view . i spent many hours but can't find the mistake . and i want to align the toggle menu on the right side . when user click on toggle button the menu should come on the right side
If you remove the height:0 at bootstrap-responsive.min.css:1240, that issue seems to be fixed.
.nav-collapse,.nav-collapse.collapse{
/* height:0; */
overflow:hidden
}