I can't get the background colour of my dropdown to change when it's open.
My CSS code is
.dropdown.open {
background-color: black;
}
My HTML is
<ul class="nav navbar-nav navbar-right">
<li>WEB DEVELOPMENT</li>
<li>PROGRAMMING</li>
<li>DESIGN</li>
<li><a href="#game-hidden" ></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"
onClick="TypeGameDesign()">
GAME DEVELOPMENT
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Unity3D</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Coming...</li>
<li>UE4</li>
<li>VR</li>
</ul>
</li>
</ul>
The background color belongs to the a. So, use this:
.dropdown.open > a {
background-color: #000 !important;
}
Related
I have a bootstrap template I am practising on. In the navbar there is "Blog" and "Test"
On the test button, I removed the li class="dropdown ", because I wanted to try to make a button where the hover is active like on the "blog" button. But when I hover over the test, the text only display blue, on there is not a white background.
I cannot figure out how I can make that work? I have to make a CSS class for a button on the navbar, who does not have a dropdown.
For fun sake I tried to delete all the CSS, but the hover was still working on the blog button.
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav ">
<li class="dropdown ">
Blog
<ul class="dropdown-menu">
<li >Blog Home <span class="badge">v1.1</span></li>
<li >Blog Home 2 <span class="badge">NEW</span></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav ">
<li>
Test
<ul class="dropdown-menu">
<li >Blog Home <span class="badge">v1.1</span></li>
<li >Blog Home 2 <span class="badge">NEW</span></li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Large Image</a>
<ul class="dropdown-menu to-left">
<li >Right Sidebar</li>
<li >Left Sidebar</li>
<li >Without Sidebar</li>
</ul>
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Medium Image</a>
<ul class="dropdown-menu to-left">
<li >Right Sidebar</li>
<li >Left Sidebar</li>
<li >Without Sidebar</li>
</ul>
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Masonry</a>
<ul class="dropdown-menu to-left">
<li >Right Sidebar</li>
<li >Left Sidebar</li>
<li >Without Sidebar</li>
</ul>
</li>
<li >Timeline</li>
<li >Blog Post</li>
</ul>
</li>
</ul>
</div>
To style your links within navigation menus you have to add one of these lines in your CSS file according to your HTML
(1) if the main parent div is .navbar-collapse:
.navbar-collapse .navbar-nav>li a{background-color:#fff;}
(2) if the main parent is Navbar-default:
.navbar-default .navbar-nav>li a {background-color:#fff;}
(3) if the main parent is navbar-inverse:
.navbar-inverse .navbar-nav>li a{background-color:#fff;}
And something like this depending on the main parent class and the class with in ul tag
I need to make the filter button aligned to the menu and modify its css using bootstrap. I am new to bootstrap so cant figure it out. i have tried padding the result but it didnt work. Thank you in advance :)
<ul class="nav navbar-nav container col-md-6">
<li class="dropdown col-md-2">
School <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Category <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
<li>Jobs & Internships</li>
</ul>
</li>
<li class="dropdown col-md-2">
Course <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Degree <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Degree <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="col-md-2">
<button type="submit" class="btn btn-mine" >Filter Results</button>
</li>
</ul>
Add the id btnFilter to your "Filter Results" button and add the following css to your stylesheet
#btnFilter {
margin:9px 0 0;
}
.cat > b.caret {
position:absolute;
top:50%;
}
The caret on the category dropdown was falling down so I have adjusted that as well by adding class cat and absolutely positioning the caret.
I have created a pen using html you provided. http://codepen.io/shreya1289/pen/KMKOLg
For that you need to some customization for set the control location in your page like as per below it will helpful to you.
<style type="text/css">
.caret{
margin-left:62px !important;
}
a.dropdown-toggle {
line-height: 0px !important;
}
</style>
here you are not added full html code so may be you need some alteration in above styles.
I'm making a dropdown menu in bootstrap.
Now I use in the li a a element where is described to toggle the dropdown menu.
But I actually want to put what is in the a element in to the li...
Because the whole li has to be clickable.
Hope you guys have I tip for me. ;)
<ul class="list-group">
<li class="list-group-item">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
</ul>
please apply 'dropdown' class to the li where you wants to add dropdown like this.
<ul class="list-group">
<li class="list-group-item dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
You can just make the a tag take full width and then the entire li becomes clickable.
.dropdown-toggle{
display:inline-block;
width: 100%;
cursor: pointer;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="list-group">
<li class="list-group-item">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
</ul>
I am creating a navigation bar for my website. One of the items has a sub-sub-menu and for some reasons, it is always expanded and it hides the rest of the sub-menu as it drops down and I can't manage to make it drop to the right side.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Nos Projets <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Soutien à nos familles parrainées</li>
<li class="sub-item-menu">Bouse d'étude universitaire</li>
<li class="sub-item-menu">Amélioration de l'habitat</li>
<li class="divider"></li>
<li class="dropdown-header">Autres projets</li>
<li class="sub-item-menu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Construction d'écoles <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li class="sub-item-menu">Meo-Vac 2015-2016</li>
<li class="sub-item-menu">Meo-Vac 2013-2014</li>
</ul>
</li>
<li class="sub-item-menu">Phuc Tue</li>
<li class="sub-item-menu">Blue Dragon</li>
<li class="sub-item-menu">School on the Boat</li>
<li class="divider"></li>
<li>Archives</li>
</ul>
</li>
I have used the dropdown-menu-right but that doesn't seem to do anything.
Any advice on how to make it drop on the right?
In currently, the .dropdown-menu has some style rules that make it stay at left include:
left: 0;
float: left;
You need to override those rules to have dropdown to right. Example:
left: auto;
right: 0;
float: right;
I am trying to build my first website using the bootstrap template and I cannot get the dropdown button in the nav bar to show anything or open. It will display everything the way I want it, but the "open" function of it isn't working properly for some reason.
Here is what I have in the HTML part:
<li div class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" data-
toggle="dropdown">General Education <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Composition</li>
<li>American Institutions</li>
<li>Humanities</li>
<li>Physical Sciences</li>
<li>Quantitative Literacy</li>
<li>Fine Arts</li>
<li>Interdisciplinary</li>
<li>Social Sciences</li>
<li>Fine Arts</li>
</ul>
</li>
(I haven't updated all of the target links yet, for now most of them just show as a #)
and for the CSS I have:
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
Please help!
Error in your code <li class="dropdown"> try this code
Your page does not include necessary js files so insert tis line in section
Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
HTML
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" data-
toggle="dropdown">General Education <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Composition</li>
<li>American Institutions</li>
<li>Humanities</li>
<li>Physical Sciences</li>
<li>Quantitative Literacy</li>
<li>Fine Arts</li>
<li>Interdisciplinary</li>
<li>Social Sciences</li>
<li>Fine Arts</li>
</ul>
</li>
Example Markup
<!-- start: User Dropdown -->
<li class="dropdown">
<a id= "uname" style="color:#fff;text-shadow:none" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user"></i>
Admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li></i> Change Password</li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
<!-- end: User Dropdown -->