I am a newbie and just learn about coding. I got stuck on a pretty simple thing I guess. How do I center a drop down button in a page? This is the HTML code.
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
min-width: 110px;
font-weight: bold;
vertical-align: middle;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: center;
background-color: #f1f1f1;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align: center;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
I did not use any CSS or JavaScript for this drop down button.
Should I also use CSS and JavaScript for this code to run well?
Please kindly advise.
Thank you.
You can change the position of the drop down to absolute and set the left and top.
.dropdown {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
transform: translate(-50%,-50%)
}
You can use:
body {
display: flex;
justify-content: center;
}
(
In a real world scenario you'll be applying this to the container element and not to entire body)
body {
display: flex;
justify-content: center;
}
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
min-width: 110px;
font-weight: bold;
vertical-align: middle;
margin: 0 auto;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: center;
background-color: #f1f1f1;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-align: center;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Also you can use this simple method too:
.dropdown {
position: relative;
display: inline-block;
text-align: center;
width: 100%;
}
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
min-width: 110px;
font-weight: bold;
vertical-align: middle;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: center;
background-color: #f1f1f1;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align: center;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.dropdown{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
border:solid 2px green;
height:100vh;
}
<!DOCTYPE html>
<html>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</html>
Related
This question already has answers here:
How do I center floated elements?
(12 answers)
Closed 5 months ago.
I've got this nav bar almost right where I want it, but I just need to center it on the page. How can I center the navigation without changing anything else? No matter what I try, it will always align to the left of the page. I know it's probably because of the "float: left" properties, but changing those ruins the whole navbar layout.
.navbar {
overflow: hidden;
background-color: none;
text-align: center;
}
.navbar a {
float: left;
font-size: 16px;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition-duration: 0.3s;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: grey;
padding: 0px 0px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: #FFF;
}
.dropdown-content {
display: none;
position: absolute;
background-color: none;
margin-top: 45px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: none;
padding: 12px 25px;
color: #FFF;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .focus {
color: #FFF;
}
<div class="navbar">
HOME
<div class="dropdown"><a href="#">PRACTITIONERS
<button class="dropbtn">
<i class="fa fa-caret-down"></i>
</button></a>
<div class="dropdown-content">
Biochemistry
Biophysics
Nutrition
</div>
</div>
CONSUMERS
NETWORK
</div>
you can add display flex and justify content center like this
.navbar {
display: flex;
justify-content: center;
overflow: hidden;
background-color: none;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: none;
text-align: center;
margin-left: 25%;
}
Make navbar a Flexbox and with justify-content: center, align its children to the center of navbar.
body {
background: lightgray;
}
.navbar {
/* add the following two styles */
display: flex;
justify-content: center;
overflow: hidden;
background-color: none;
text-align: center;
}
.navbar a {
float: left;
font-size: 16px;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition-duration: 0.3s;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: grey;
padding: 0px 0px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: #FFF;
}
.dropdown-content {
display: none;
position: absolute;
background-color: none;
margin-top: 45px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: none;
padding: 12px 25px;
color: #FFF;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .focus {
color: #FFF;
}
<div class="navbar">
HOME
<div class="dropdown"><a href="#">PRACTITIONERS
<button class="dropbtn">
<i class="fa fa-caret-down"></i>
</button></a>
<div class="dropdown-content">
Biochemistry
Biophysiscs
Nutrition
</div>
</div>
CONSUMERS
NETWORK
</div>
I want to align my dropdown menu a tags to the center but can't figure out how to do that, only started with CSS recently.
It would display the dropdown dropdownbtn items in the dropdown-content with the links aligned to the center.
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
Use a transform on the dropdown.
left: 50%;
transform: translatex(-50%);
Also I switched from float to flexbox for simplicity and a more modern approach.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a {
font-size: 16px;
color: #f2f2f2;
padding: 14px;
text-decoration: none;
}
.dropdown {
position: relative;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
left: 50%;
transform: translatex(-50%);
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
I have navigation bar. I want to move the text 50px from left. I can do this?
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
The menu text is now all the way to the left. I would like to move it 50 pixels further to the right. Is the code wrong or do you just need to add something? I tried adding margin-left: 50px; but it does not work. I state that I am a beginner on programming.
<div class="navigation" id="Nav">
Home
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
Test
Test
</div>
This is my html code. I forgot to post it
add padding-left:50px to .navigation. and everything will move to the right 50px
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
padding-left:50px;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation" id="Nav">
Home
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
Test
Test
</div>
yeah change your padding to 8px 25px 0px 50px
Either adding padding-left: 50px; or transform: translateY(50px);
I'm new to HTML/CSS and I'm trying to add a dropdown button to my nav bar, currently the the dropdown content is appearing under the button(as intended) however it is stuck inside the nav bar and will not overlay below.
I would like the text in my navbar to remain central and the dropdown content to be visible below the button but also overlay outside of the navbar.
What do i need to change in order for this to be possible?
I have tried adding a z-index to elements to no avail and i have also played around with positioning of all the elements.
body {
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
width: 100%;
position: none;
}
.navbar a {
font-size: 22px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
position: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: pink;
}
.dropdown {
display: inline;
overflow: hidden;
position: relative;
}
.dropdown .dropbtn {
font-size: 22px;
cursor: pointer;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-align: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 100%;
right: 0;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<nav class="navbar">
Home
Popular Items
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Products
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Contact Us
FAQ
</nav>
The problem is not in the z-index value, the thing is that in the container .navbar you set the overflow to hidden, so whenever the elements that are inside this container go beyond the limits of your container, this elements will be effectively hidden. Only by removing the property overflow: hidden; in the .navbar definition class your hover effect will work.
body {
text-align: center;
}
.navbar {
background-color: #333;
width: 100%;
position: none;
}
.navbar a {
font-size: 22px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
position: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: pink;
}
.dropdown {
display: inline;
overflow: hidden;
position: relative;
}
.dropdown .dropbtn {
font-size: 22px;
cursor: pointer;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-align: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 100%;
right: 0;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<nav class="navbar">
Home
Popular Items
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Products</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Contact Us
FAQ
</nav>
You code had a few problems. The value hidden in the overflow property hid your dropdown menu when it's height exceeded that of the dropdown class. Also you need to specify a top value that pushes the dropdown-content right beneath the dropbtn button. And to center the dropdown menu horizontally you need to add a right and left value of 0. I've changed your CSS code a little bit. Hope this solves your issue.
body {
text-align: center;
}
.navbar {
/* overflow: hidden; */
background-color: #333;
width: 100%;
position: none;
height: 60px;
}
.navbar a {
font-size: 22px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
position: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: pink;
}
.dropdown {
display: inline;
overflow: hidden;
position: relative;
}
.dropdown .dropbtn {
font-size: 22px;
cursor: pointer;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-align: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 40px;
right: 0;
left: 0;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
Just remove Overflow: hidden in .navbar
or add this:
.navbar {
overflow: visible !important;
}
I've made a top bar that contains drop-down MENU button on the right side. But this drop-down content has exactly the same size (width) as my MENU button. Finally - my goal is to make this drop-down content as wide as the top bar is.
My HTML code looks like this:
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
And more important part - CSS:
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
If you want to see how does it look like HERE is jsFiddle link.
Don't you have any idea how to solve my problem?
Just move position: relative from .dropdown to #top-bar.
By doing this, .dropdown-content will calculate width according to the nearest element with position: relative i.e #top-bar.
#top-bar{
position: relative;
height:40px;
float: left;
width: 100%;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
}
.dropdown-content {
display: none;
left: 0;
top: 100%;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
I think that's what you want
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
display: block;
float: right;
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
width: 100%;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
https://jsfiddle.net/69uts0dr/3/