So, I've been trying to get to know CSS and HTML a bit better. But whenever I try to set the background-color of a div(class) it just stays white. I hope one of you out there can help me. Thanks (I've tried adding a code snippet, but it wouldnt let me)
.navigator {
background-color: #FF00FF;
background-size: 150%;
}
.pagina {
float: left;
margin-left: 120px;
}
.informatie {
float: left;
}
<div class="navigator">
<div class="pagina">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle=
"dropdown" id="menu1" type="button">Pagina's <span class=
"caret"></span></button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
Pagina 1
</li>
<li role="presentation">
Pagina 2
</li>
<li role="presentation">
Pagina 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
<div class="informatie">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle=
"dropdown" id="menu1" type="button">Informatie <span class=
"caret"></span></button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
informatie 1
</li>
<li role="presentation">
informatie 2
</li>
<li role="presentation">
informatie 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
</div>
The element .navigator has child elements that are floated. When you float elements they are taken out of the normal document flow and do not take up any space. .pagina and .informatie are both floated so .navigator has no height and hence no background color.
Add a clearfix to the parent element with floated child elements.
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.navigator {
background-color: #FF00FF;
background-size: 150%;
}
.pagina {
float: left;
margin-left: 120px;
}
.informatie {
float: left;
}
<div class="navigator cf">
<div class="pagina">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="menu1" type="button">Pagina's <span class="caret"></span>
</button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
Pagina 1
</li>
<li role="presentation">
Pagina 2
</li>
<li role="presentation">
Pagina 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
<div class="informatie">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="menu1" type="button">Informatie <span class="caret"></span>
</button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
informatie 1
</li>
<li role="presentation">
informatie 2
</li>
<li role="presentation">
informatie 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
</div>
use CSS flexBox
.navigator {
background-color: #FF00FF;
display: flex;
align-items: center;
justify-content: center;
}
<div class="navigator">
<div class="pagina">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="menu1" type="button">Pagina's <span class="caret"></span>
</button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
Pagina 1
</li>
<li role="presentation">
Pagina 2
</li>
<li role="presentation">
Pagina 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
<div class="informatie">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="menu1" type="button">Informatie <span class="caret"></span>
</button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
informatie 1
</li>
<li role="presentation">
informatie 2
</li>
<li role="presentation">
informatie 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
</div>
Related
I have a header where each nav link drops down a mega menu, but since the mega menu is absolutely positioned, its "on top" of the relatively positioned nav. So when I try to move onto the mega menu, it disappears, along with the nav link's on-hover border-bottom.
Usually my issue is just padding, but it does not seem to be the case this time. I am trying to keep my border-bottom feature along with being able to reach my mega menu.
The result is: (click to open the snippet)
#navigation {
padding-top: 16px;
padding-bottom: 5px;
border-bottom: 1px solid #979797;
background-color: #FFFFFF;
}
.hello>li {
padding: 0px 15px 0px 15px;
}
.hello>li>a {
color: #4A4A4A;
padding: 20px 15px 46px;
margin-bottom: 0px;
}
.hello>li:first-child a:hover {
border-bottom: none;
padding-bottom: 0px;
text-decoration: none;
margin-bottom: 0px;
}
.hello>li:first-child {
padding-left: 0px;
}
.hello>li:last-child {
padding-right: 0px;
}
.hello>li>a:hover, .hello>li>a:visited, .hello>li>a:focus, .hello>li>a:active {
text-decoration: none;
color: #4A4A4A;
border-bottom: 4px solid #8DB9CA;
padding-bottom: 33px;
}
.hello>li>a:hover + .dropdown-menu {
display: block;
padding-top: 30px;
}
#navigation ul.hello .dropdown-menu .nav-drop-list-block li {
display: block;
text-align: left;
}
#navigation ul.hello .dropdown-menu .nav-drop-list-block p {
display: block;
text-align: left;
}
.dropdown-menu {
position: absolute;
width: 100%;
text-align: center;
top: 70px;
border-radius: 0px;
margin-top: 0px;
padding-top: 30px;
}
.dropdown-menu>li>a {
color: #4A4A4A;
}
.dropdown{
position: static;
}
.dropdown-container {
position: static;
}
#navigation ul.hello li {
display: inline-block;
}
#search-desk-block {
display: block;
float: right;
position: relative;
top: 20px;
}
#search-desk-block {
position: relative;
}
#search-desk-block input {
width: 250px;
border-color: #63666A;
border-radius: 6px;
}
.search-desk-icon {
position: absolute;
right: 9px;
bottom: 20px;
}
.search-desk-icon svg {
font-size: 20px;
}
.nav-drop-img {
max-width: 253px;
}
#media (max-width: 1199px) {
.hello>li {
padding: 0px 5px 0px 5px;
}
.hello>li>a {
color: #4A4A4A;
padding: 20px 5px 46px;
margin-bottom: 0px;
}
}
#media (max-width: 991px) {
#navigation {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="header">
<section id="navigation">
<div class="container">
<div class="row">
<div class="col-md-12 dropdown-container">
<div class="dropdown">
<ul class="hello">
<li>
<a href="">
<img src="assets/img/danze-logo-main.png" style="max-width: 160px;" />
</a>
</li>
<li>
<a href="" class="dropdown-toggle" id="drodownMenu1" data-toggle="dropdown" aria-expanded="true">
KITCHEN
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<div class="container">
<div class="row">
<div class="col-sm-3">
<ul class="nav-drop-list-block">
<p>
PRODUCTS
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Pull down/ pull out faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Single Handle Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Two Handle Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Dual Control Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Pot Fillers
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Bar & Convenience Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Accessories
</a>
</li>
</ul>
<ul class="nav-drop-list-block">
<p>
STYLE
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Contemporary
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Traditional
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Transitional
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="nav-drop-list-block">
<p>
FINISH
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Chrome
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Stainless Steel
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Oil Rubbed Bronze
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Satin Black
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Antique Copper
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Polished Nickel
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="nav-drop-list-block">
<p>
COLLECTION
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Amalfi™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Antiock™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Draper
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Melrose™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Midtown™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Opulence™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Parma™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Parma™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Prince™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Selene™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Sirius™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
The Foodie™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Vaughn
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<img src="assets/img/slider-zoom-img-1.jpg" class="nav-drop-img" />
</div>
</div>
</div>
</ul>
</li>
<li>
<a href="" href="" class="dropdown-toggle" id="drodownMenu2" data-toggle="dropdown" aria-expanded="true">
BATHROOM
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
hello
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
how are you
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
im fine
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
been doing well
</a>
</li>
<li role="presentation" style="color:green">
how about you?
</li>
</ul>
</li>
<li>
<a href="" href="" class="dropdown-toggle" id="drodownMenu3" data-toggle="dropdown" aria-expanded="true">
PROFESSIONALS
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
tired
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
hungry
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
sleepy
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
toothy
</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<ul>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
tired
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
hungry
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
sleepy
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
toothy
</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<img src="assets/img/slider-zoom-img-1.jpg" style="max-width: 100%;" />
</div>
</div>
</div>
</ul>
</li>
<li>
<a href="" href="" class="dropdown-toggle" id="drodownMenu4" data-toggle="dropdown" aria-expanded="true">
INNOVATIONS
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Action
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Another action
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Something else here
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Separated link
</a>
</li>
<li role="presentation" style="color:green">
Yay! The menu extends the full width of the page
</li>
</ul>
</li>
<li id="search-desk-block">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
<span class="search-desk-icon">
<i class="fas fa-search"></i>
</span>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
Also, here's a fiddle: https://codepen.io/kmgiffin/pen/qYbyxo/
The problem is the following line in you css:
.hello>li>a:hover + .dropdown-menu {
display: block;
padding-top: 30px;
}
Here you place the hover trigger on the anchor tag but once you move the cursor from the anchor onto the dropdown, the anchor is no longer in a hover state so the rule is no longer applies and your dropdown goes back to it's initial state.
Below is the a fix that targets the li element instead. Since the dropdown-menu is a child of the of the li when you hover over the dropdown-menu element you're still technically hovering over the li parent
.hello>li:hover > .dropdown-menu {
display: block;
padding-top: 30px;
}
#navigation {
padding-top: 16px;
padding-bottom: 5px;
border-bottom: 1px solid #979797;
background-color: #FFFFFF;
}
.hello>li {
padding: 0px 15px 0px 15px;
}
.hello>li>a {
color: #4A4A4A;
padding: 20px 15px 46px;
margin-bottom: 0px;
}
.hello>li:first-child a:hover {
border-bottom: none;
padding-bottom: 0px;
text-decoration: none;
margin-bottom: 0px;
}
.hello>li:first-child {
padding-left: 0px;
}
.hello>li:last-child {
padding-right: 0px;
}
.hello>li>a:hover, .hello>li>a:visited, .hello>li>a:focus, .hello>li>a:active {
text-decoration: none;
color: #4A4A4A;
border-bottom: 4px solid #8DB9CA;
padding-bottom: 33px;
}
.hello>li>a:hover + .dropdown-menu {
display: block;
padding-top: 30px;
}
#navigation ul.hello .dropdown-menu .nav-drop-list-block li {
display: block;
text-align: left;
}
#navigation ul.hello .dropdown-menu .nav-drop-list-block p {
display: block;
text-align: left;
}
.dropdown-menu {
position: absolute;
width: 100%;
text-align: center;
top: 70px;
border-radius: 0px;
margin-top: 0px;
padding-top: 30px;
}
.dropdown-menu>li>a {
color: #4A4A4A;
}
.dropdown{
position: static;
}
.dropdown-container {
position: static;
}
#navigation ul.hello li {
display: inline-block;
}
#search-desk-block {
display: block;
float: right;
position: relative;
top: 20px;
}
#search-desk-block {
position: relative;
}
#search-desk-block input {
width: 250px;
border-color: #63666A;
border-radius: 6px;
}
.search-desk-icon {
position: absolute;
right: 9px;
bottom: 20px;
}
.search-desk-icon svg {
font-size: 20px;
}
.nav-drop-img {
max-width: 253px;
}
#media (max-width: 1199px) {
.hello>li {
padding: 0px 5px 0px 5px;
}
.hello>li>a {
color: #4A4A4A;
padding: 20px 5px 46px;
margin-bottom: 0px;
}
}
#media (max-width: 991px) {
#navigation {
display: none;
}
}
ul.dropdown-menu:hover {
display: block;
}
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div id="header">
<section id="navigation">
<div class="container">
<div class="row">
<div class="col-md-12 dropdown-container">
<div class="dropdown">
<ul class="hello">
<li>
<a href="">
<img src="assets/img/danze-logo-main.png" style="max-width: 160px;" />
</a>
</li>
<li>
<a href="" class="dropdown-toggle" id="drodownMenu1" data-toggle="dropdown" aria-expanded="true">
KITCHEN
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<div class="container">
<div class="row">
<div class="col-sm-3">
<ul class="nav-drop-list-block">
<p>
PRODUCTS
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Pull down/ pull out faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Single Handle Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Two Handle Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Dual Control Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Pot Fillers
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Bar & Convenience Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Accessories
</a>
</li>
</ul>
<ul class="nav-drop-list-block">
<p>
STYLE
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Contemporary
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Traditional
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Transitional
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="nav-drop-list-block">
<p>
FINISH
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Chrome
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Stainless Steel
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Oil Rubbed Bronze
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Satin Black
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Antique Copper
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Polished Nickel
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="nav-drop-list-block">
<p>
COLLECTION
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Amalfi™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Antiock™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Draper
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Melrose™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Midtown™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Opulence™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Parma™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Parma™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Prince™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Selene™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Sirius™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
The Foodie™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Vaughn
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<img src="assets/img/slider-zoom-img-1.jpg" class="nav-drop-img" />
</div>
</div>
</div>
</ul>
</li>
<li>
<a href="" href="" class="dropdown-toggle" id="drodownMenu2" data-toggle="dropdown" aria-expanded="true">
BATHROOM
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
hello
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
how are you
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
im fine
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
been doing well
</a>
</li>
<li role="presentation" style="color:green">
how about you?
</li>
</ul>
</li>
<li>
<a href="" href="" class="dropdown-toggle" id="drodownMenu3" data-toggle="dropdown" aria-expanded="true">
PROFESSIONALS
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
tired
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
hungry
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
sleepy
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
toothy
</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<ul>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
tired
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
hungry
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
sleepy
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
toothy
</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<img src="assets/img/slider-zoom-img-1.jpg" style="max-width: 100%;" />
</div>
</div>
</div>
</ul>
</li>
<li>
<a href="" href="" class="dropdown-toggle" id="drodownMenu4" data-toggle="dropdown" aria-expanded="true">
INNOVATIONS
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Action
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Another action
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Something else here
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Separated link
</a>
</li>
<li role="presentation" style="color:green">
Yay! The menu extends the full width of the page
</li>
</ul>
</li>
<li id="search-desk-block">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
<span class="search-desk-icon">
<i class="fas fa-search"></i>
</span>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
I tried to make a simple dropdown menu with Bootstrap but it appears on the bottom of the page. What's going wrong?
.dropdown-informatie {
overflow: hidden;
float: left;
}
.dropdown-pagina {
float: left;
overflow: hidden;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1> Test </h1>
<p>Test</p>
<div class="dropdown-pagina">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Pagina's <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">Pagina 1</a></li>
<li role="presentation"><a role="menuitem" href="#">Pagina 2</a></li>
<li role="presentation"><a role="menuitem" href="#">Pagina 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
<div class="dropdown-informatie">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Informatie <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">informatie 1</a></li>
<li role="presentation"><a role="menuitem" href="#">informatie 2</a></li>
<li role="presentation"><a role="menuitem" href="#">informatie 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
YOUR NEW CODE
Instead of using "dropdown-pagina" as a class you will need to use just dropdown. Then a second and third class for pagina and informatie can be made for specific styling as dropdown is a defined Bootstrap class.
The structure for a Bootstrap 3 drop down is as follows:
div.container {
margin-top: 20px;
}
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</body>
Using bootstrap I am trying to get this dropdown menu to appear as a small box in the middle of the page. Like this.
This is the HTML code:
<div class="dropdown">
<button
class="btn btn-default dropdown-toggle"
type="button"
id="dropdownMenu1"
data-toggle="dropdown"
aria-expanded="true">
List
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a></li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a></li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a></li>
</ul>
</div>
Maybe the problem is the standard style of dropdown-menu:
.center {
text-align: center;
}
.dropdown-menu{
width: 200px;
text-align:center !important;
float: none !important;
margin: 0 auto !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid center">
<div class="col-md-5">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
List
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a>
</li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a>
</li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a>
</li>
</ul>
</div>
<div>
</div>
How about using <select size="1"><option>...</option></select>?
I am new to Bootstrap and I am in the process of getting to know it. I am trying to position a dropdown menu just in the center of the page, I manage to center the link that toggles the menu but this menu shows out of place.
This is what I tried:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<div class="dropdown">
<a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
</li>
</ul>
</div>
<!-- /div.dropdown -->
</div>
<!-- /div.col-md-4 .col-md-offset-4 -->
</div>
<!-- /div.row -->
</div>
<!-- /div.container -->
Obviously the link is center because I am using .text-center for the div containing everything, I have tried using the class center-block but it doesn't help. Any hints?
dropdown is a block element, aligning it with text-align:center will not work on block elements. try adding display: inline-block on dropdown div. check out the jsfiddle ex. http://jsfiddle.net/kuyabiye/KLH8S/
<style>
.dropdown-center {
text-align: center;
}
.dropdown-center .dropdown {
display: inline-block;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 dropdown-center">
<div class="dropdown">
<a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
</li>
</ul>
</div>
<!-- /div.dropdown -->
</div>
<!-- /div.col-md-4 .col-md-offset-4 -->
</div>
<!-- /div.row -->
</div>
<!-- /div.container -->
The navbar bellow contains a drop down menu which is not displayed correcly ,
<div style="margin: auto; width: 100%; margin-top: 0px">
<div class="navbar" style="width: 100%">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".navbar-responsive-collapse"> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span> </a>
<a class="brand" href="#">Acceuil</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">
<a href='acceuil/acceuil.jsp'>Notifications</a>
</li>
<li>
<a href='acceuil/gestionIndividuelle.jsp'>Gestion individuelle</a>
</li>
<li>
<a href='acceuil/tableaux.jsp'>Tableaux</a>
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>
<a href=''>Notes</a>
</li>
<li>
<a href='acceuil/comptes.jsp'>comptes</a>
</li>
</ul>
<ul class="nav pull-right">
<li class="divider-vertical">e</li>
<li>
Déconnexion
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
<!-- /navbar-inner -->
</div>
</div>
</div>
Why are you adding inline styles to an already full width navbar? Anyways here's your answer:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".navbar-responsive-collapse" data-toggle="collapse">
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
</ul>
</li>
<form class="navbar-search pull-left" action="">
<ul class="nav pull-right">
</div>
</div>
</div>
</div>