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>
Related
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 building a navigation bar and I want
all the items on the same row [not sure why a 2nd row is created]
the dropdown items from 'Samples' button to display vertically instead of horizontally
JSFiddle: https://jsfiddle.net/RadiantSilvergun/xsbnjo5g/5/
I've used <div> elements instead of <ul> and <li> elements, is that a problem?
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.dropbutton {
background-color: #333;
color: white;
padding: 14px 16px;
font-size: 16px;
font: 1em times;
border: none;
cursor: pointer;
}
.dropdown {
position: static;
display: block;
}
.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 {
position: relative;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content>a:hover {
background-color: #f1f1f1;
position: relative;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbutton {
background-color: darkgrey;
}
.button {
background-color: black;
color: white;
border-radius: 5px;
;
padding: 15px 15px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
<div class="topnav">
<div>Contact Me</div>
<div class="dropdown">
<button class="dropbutton">Samples</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div>Recommendations</div>
<div>Video Editing</div>
<div>Photoshop</div>
<div><a style="float: right" href="#">About</a></div>
</div>
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 am wondering how to align test to the middle of the navigation bar. My code is below:
body {
font-family: 'Arial', sans-serif;
background-color: #f3f3f3;
overflow-x: hidden;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
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: red;
}
.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">Games <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Badge
Undead Nightmare
All Games
</div>
</div>
Videos
Newswire
Social Club
Downloads
Warehouse
Support
</div>
</div>
Nav Bar
I have tried using display: inline-block, I have tried removing float: left. All in which i tried below .navbar a and a bunch of other ways, but I still can't center it.
Any help would be greatly appreciated and thank you in advance.