I'm trying to make a Navbar with a dropdown menu. I want 'Clips' to have a dropdown menu with 3 links. But I can't seem to get it to work.
If i set the position to absolute i get them stacked on top of eachother en when i change it to relative they go inside the link. Can someone help? Do I have to change the selectors?
Thanks in advance!
.navbar{
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
background-color: darkred;
}
.nav-list{
list-style-type: none;
}
.dropdown{
position: relative;
display: inline-block;
list-style-type: none;
padding: 10px 10px;
border: solid black 1px;
border-radius: 10px;
margin: 2px;
}
.dropdown ul li{
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: darkred;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 10;
overflow: visible;
}
.dropdown-content a {
color: black;
padding: 12px 18px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.nav-list .list-item {
display: inline-block;
padding: 10px 10px;
border: solid black 1px;
border-radius: 10px;
margin: 2px;
}
.navbar a{
text-decoration: none;
color: white;
font-family: 'arvo', italic;
}
.logo{
height: 60px;
position: relative;
margin: 5px 0px 5px 17px;
}
.logo_text {
position: absolute;
top: 50px;
font-size: 12pt;
color: white;
}
<body>
<header>
<nav class="navbar">
<div>
<img class="logo" src="img/FrankLogo.svg"> <h3 class="logo_text"><a href=index.html>FRANKIE</a></h3>
</div>
<ul class="nav-list">
<li class="dropdown">Clips
<ul>
<li class="dropdown-content">Frankie Anthem</li>
<li class="dropdown-content">Vrouwtjes</li>
</ul></li>
<li class="list-item">Shows</li>
<li class="list-item">Vieze Victor</li>
<li class="list-item">Contact</li>
</ul>
</nav>
</header>
Set UL position inside top menu
li.dropdown > ul {
position: absolute;
margin-left: 0 !important;
padding-left: 0;
top: 40px;
}
Related
I am trying to make a dropdown menu, it's my first time doing it and I'm experimenting with it. The problem that I'm facing is this:
As you can see, the principal menus are showing in a list. I have tried displaying them as flex and other attempts, but it seems like the header is making a limitation to them and I don't know how to put them beside each other. (Clarification: 'Notificaciones' and 'Usuario' are main menus and 'Mi Perfil' is a submenu that comes from 'Usuario' (parent))
Here is my code:
* {
text-decoration: none;
list-style: none;
}
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
.header-text {
position: relative;
margin: 2px 6px 2px 4px;
cursor: pointer;
}
.header-icons {
width: 32px;
margin: 2px 0px 2px 0px;
cursor: pointer;
}
header {
display: flex;
justify-content: space-between;
background-color: rgb(20, 33, 61);
color: white;
height: 30px;
align-items: center;
padding: 6px;
position: static;
}
.nav li a {
padding: 4px;
background-color: red;
list-style: none;
display: inline-block;
float: right;
}
<header>
<div class="header-text">
<h1 class="titulo-logo">Lorem</h1>
</div>
<nav class="nav">
<ul>
<li>Notificaciones</li>
<li>
Usuario
<ul>
<li>Mi Perfil</li>
</ul>
</li>
</ul>
</nav>
</header>
Thank you so much in beforehand!
First the <li> should have display: inline-block for being arranged in a row. It has nothing to do with the header.
Second, the position of the sub menu (ul ul) needs to be absolute within a li with position: relative.
white-space: nowrap will make the element not wrap when the width is larger than the parent element's width.
* {
text-decoration: none;
list-style: none;
}
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
.header-text {
position: relative;
margin: 2px 6px 2px 4px;
cursor: pointer;
}
.header-icons {
width: 32px;
margin: 2px 0px 2px 0px;
cursor: pointer;
}
header {
display: flex;
justify-content: space-between;
background-color: rgb(20, 33, 61);
color: white;
height: 30px;
align-items: center;
padding: 6px;
position: static;
}
.nav li a {
padding: 4px;
background-color: red;
list-style: none;
display: inline-block;
float: right;
}
/* added css */
ul li{
display: inline-block;
position: relative;
white-space: nowrap
}
ul ul{
position: absolute;
right:0;
top:100%
}
<header>
<div class="header-text">
<h1 class="titulo-logo">Lorem</h1>
</div>
<nav class="nav">
<ul>
<li>Notificaciones</li>
<li>
Usuario
<ul>
<li>Mi Perfil</li>
</ul>
</li>
</ul>
</nav>
</header>
I already did some search on some questions here on stack overflow and tested some solutions mentioned but it did not fix my problem. I'm new in coding.
I also did some research online but haven't found answers that fixed my problem.
-FIRST PROBLEM SOLVED-
-NEW PROBLEM DESCRIBED BELOW-
Edit: Dropdown menu positioning fixed, it is now on vertical. But the new problem is dropdown menu items quickly disappears before I hover on it. And it seems my login form was not attached inside the nav. Please check if the is a conflict or problem with my css and code. Can't fix it
Here is my code:
/*MY CSS CODE*/
* {
text-decoration: none;
box-sizing: border-box;
}
main {
padding-top: 100px;
}
header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: #ffcce6;
width: 100%;
height: 100px;
}
header .header-brand {
font-family: Catamaran;
font-size: 24px;
font-weight: 900;
color: #111;
text-transform: uppercase;
display: block;
margin: 0 auto;
text-align: center;
padding: 20px 0px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
header nav ul li a {
font-family: Catamaran;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.dropdown {
float: left;
overflow: hidden;
font-family: Catamaran;
font-size: 16px;
color: #111;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffe6f3;
flex-direction: column;
/* <--- here add this line */
padding: 0;
/* <--- this will fix the alignment */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
padding: 12px 8px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: hotpink;
}
.dropdown:hover .dropdown-content {
display: flex;
/* <-- replace 'block' by 'flex' */
}
/*NAVBAR LOGIN FORM*/
header nav .login-container {
float: right;
padding-top: 20px;
}
header nav .login-container form {
display: inline;
}
header nav input[type=text],
header nav input[type=password] {
padding: 6px;
margin-top: 8px;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: 1px solid #ddd;
border-radius: 5px;
width: 180px;
color: #333;
}
header nav .login-container button {
position: relative;
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-left: 6px;
margin-right: 50px;
background-color: deeppink;
color: white;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: none;
border-radius: 5px;
width: 80px;
cursor: pointer;
}
header nav .login-container button:hover {
background-color: hotpink;
}
header .header-brand {
margin: 31px 0;
text-align: left;
line-height: 38px;
padding: 0 20px 0 40px;
border-right: 3px solid #111;
float: left;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 60px;
}
<body>
<header>
Team-Rocket
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li class="dropdown">
<a class="dropbtn">Legit Check
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Search by ID</li>
<li>Search by Username</li>
</ul>
</li>
<li class="dropdown">
<a class="dropbtn">Member List
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Regional Distributors</li>
<li>Provincial Distributors</li>
<li>City Distributors</li>
<li>Reseller</li>
<li>Sub-Reseller</li>
</ul>
</li>
</ul>
<div class="login-container">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="pwd">
<button type="submit">Login</button>
</form>
</div>
</nav>
</header>
</body>
edit your .dropdown-content like this:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
flex-direction: column; /* <--- here add this line */
padding: 0; /* <--- this will fix the alignment */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
and edit .dropdown:hover .dropdown-content like this:
.dropdown:hover .dropdown-content {
display: flex; /* <-- replace 'block' by 'flex' */
}
This will work properly.
Here is the snippet:
* {
text-decoration: none;
box-sizing: border-box;
}
main {
padding-top: 100px;
}
header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: #ffcce6;
width: 100%;
height: 100px;
}
header .header-brand {
font-family: Catamaran;
font-size: 24px;
font-weight: 900;
color: #111;
text-transform: uppercase;
display: block;
margin: 0 auto;
text-align: center;
padding: 20px 0px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
header nav ul li a {
font-family: Catamaran;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.dropdown {
float: left;
overflow: hidden;
font-family: Catamaran;
font-size: 16px;
color: #111;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffe6f3;
flex-direction: column;
/* <--- here add this line */
padding: 0;
/* <--- this will fix the alignment */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
padding: 12px 8px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: hotpink;
}
.dropdown:hover .dropdown-content {
display: flex;
/* <-- replace 'block' by 'flex' */
}
/*NAVBAR LOGIN FORM*/
header nav .login-container {
float: right;
padding-top: 20px;
}
header nav .login-container form {
display: inline;
}
header nav input[type=text],
header nav input[type=password] {
padding: 6px;
margin-top: 8px;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: 1px solid #ddd;
border-radius: 5px;
width: 180px;
color: #333;
}
header nav .login-container button {
position: relative;
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-left: 6px;
margin-right: 50px;
background-color: deeppink;
color: white;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: none;
border-radius: 5px;
width: 80px;
cursor: pointer;
}
header nav .login-container button:hover {
background-color: hotpink;
}
header .header-brand {
margin: 31px 0;
text-align: left;
line-height: 38px;
padding: 0 20px 0 40px;
border-right: 3px solid #111;
float: left;
}
header nav > ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 60px;
}
<header>
Team-Rocket
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li class="dropdown">
<a class="dropbtn">Legit Check
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Search by ID</li>
<li>Search by Username</li>
</ul>
</li>
<li class="dropdown">
<a class="dropbtn">Member List
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Regional Distributors</li>
<li>Provincial Distributors</li>
<li>City Distributors</li>
<li>Reseller</li>
<li>Sub-Reseller</li>
</ul>
</li>
</ul>
<div class="login-container">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="pwd">
<button type="submit">Login</button>
</form>
</div>
</nav>
</header>
Add a new line to css
.dropdown-content li{
float:none;
}
I`m trying to make this navbar responsive, and have not found a code that works in this example. When I adjust the width of the screen, I want all the links (not the logo) to be gathered in a hamburger icon, so in portrait mode it will only display the logo and the hamburger icon with the links.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown This example is very close to what I would like, but the content in my navbar is centered with a logo in between the links, and I couldn`t make it work. Also I want the third element (the logo) to be displayed instead of the first link (when the width reaches a certain point). Any help would be greatly appreciated
nav{
display: flex;
width: 100%;
height: 17%;
background: black;
align-items: center;
justify-content: center;
font-family: Times New Roman;
font-size: 1.5vw;
position: fixed;
top: 0;
z-index: 1;
}
nav a{
text-decoration: none;
background-color: white;
color: black;
margin: 0 40px;
padding: 16px;
border: 3px solid #f9c534;
}
#logo{
width: 7vw;
height: auto;
background: rgba(0,0,0,0.3);
border-radius: 50%;
margin: 0 5vw;
}
.dropbtn {
padding: 16px;
background: white;
font-family: Times New Roman;
font-size: 1.5vw;
color: black;
border: 3px solid #f9c534;
margin: 0 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
}
nav a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown-content a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
background-color: #f9c534;
border: 2px solid white;
}
<nav>
Home
News
<div><img id="logo" src="src/Logo.jpg" alt=""></div>
Sponsors
<div class="dropdown">
<button class="dropbtn">About us</button>
<div class="dropdown-content">
Our employees
About company
Founder
</div>
</div>
</nav>
I just updated your code with few fixes your logo will always on center and hamburger menu also added. I hope it'll help you out. Thanks
nav {
background: black;
font-family: Times New Roman;
font-size: 14px;
height: 94px;
position: fixed;
width: 100%;
z-index: 1;
}
nav ul {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
height: 94px;
}
nav ul li {
background-color: white;
border: 3px solid #f9c534;
position: relative;
white-space: nowrap;
}
nav ul li:hover {
background-color: #f9c534;
border-color: #fff;
}
nav ul li a {
color: black;
display: block;
margin: 0;
padding: 16px;
text-decoration: none;
}
nav li ul {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
position: absolute;
right: -3px;
top: 50px;
height: auto;
min-width: 150px;
}
nav ul li:hover ul {
display: block;
}
nav #logo {
border-radius: 50%;
background: rgba(0,0,0,0.3);
border: 0;
padding: 0;
width: 100px;
}
#mob-dropChecked {
display: none !important;
}
#media only screen and (max-width: 768px) {
nav {
height: 60px;
}
nav ul {
display: block;
height: 60px;
position: relative;
top: 44px;
}
nav ul li {
display: none;
}
nav #logo {
display: block;
position: absolute;
left: 34%;
top: -29px;
}
#mob-btn {
background-image: url('https://www.shareicon.net/data/512x512/2017/05/09/885755_list_512x512.png');
background-color: transparent;
border: 0;
background-repeat: no-repeat;
background-size: contain;
position: relative;
top: 21px;
height: 40px;
width: 40px;
padding: 13px 20px;
z-index: 2;
}
#mob-dropChecked:checked ~ ul li{
display: block;
}
nav li ul {
position: relative;
right: 0;
top: 16px;
}
}
<nav>
<label for="mob-dropChecked" id="mob-btn"></label>
<input type="checkbox" id="mob-dropChecked" role="button">
<ul>
<li>Home</li>
<li>News</li>
<li id="logo"><img id="logo" src="https://s.w.org/style/images/about/WordPress-logotype-alternative-white.png" alt=""></li>
<li>Sponsors</li>
<li>About us
<ul>
<li>Our employees</li>
<li>About company</li>
<li>Founder</li>
</ul>
</li>
</ul>
</nav>
You can add class to the wrapper div of logo img tag
and add css position: absolute; top: 10px; left: 10px to it for smaller devices using css media queries.
Else (not recommended), you can use two img tags. Hide one on desktop and another on mobile using display: block / display: none.
You could remove the logo from the nav and add a spacer element in its place. Then use absolute position on the logo to get it into place. It's a bit hacky, but would work. https://codepen.io/nickberens360/pen/bZmGWy
header{
position: fixed;
width: 100%;
top: 0;
}
.logo{
display: block;
margin: auto;
position: absolute;
left: 36px;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
z-index: 99999999;
top: 0;
}
.spacer{
margin: 0 100px;
border: 1px solid red;
}
nav{
display: flex;
width: 100%;
height: 17%;
background: black;
align-items: center;
justify-content: center;
font-family: Times New Roman;
font-size: 1.5vw;
z-index: 1;
}
nav a{
text-decoration: none;
background-color: white;
color: black;
margin: 0 40px;
padding: 16px;
border: 3px solid #f9c534;
width: 143px;
text-align: center;
}
#logo{
width: 7vw;
height: auto;
background: rgba(0,0,0,0.3);
border-radius: 50%;
margin: 0 5vw;
}
.dropbtn {
padding: 16px;
background: white;
font-family: Times New Roman;
font-size: 1.5vw;
color: black;
border: 3px solid #f9c534;
margin: 0 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
}
nav a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown-content a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
background-color: #f9c534;
border: 2px solid white;
}
I made a navigation bar with a dropdown and was working fine until i added the "position: fixed;" statement in the css file. Once I did that the dropdown either isn't coming up when the mouse hovers over the designated button or is coming up off screen. Note the parent button reacts to the mouse hover fine in terms of color changes, that's why i think the dropdown is coming up off screen.
EDIT: i realized that the dropdown appears in the ul element and i can scroll within it to view the list. It's not appearing as an actual dropdown over the content on the page but within the navbar itself.
Here's my code:
ul.navbar {
overflow-x: hidden;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #ffb90f;
width: 100%;
display: block;
vertical-align: middle;
height: 48px;
position: fixed;
top: 0;
}
.navbar li {
display: inline-block;
overflow: hidden;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
dropdown:hover .dropbtn {
background-color: #FFC63D;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #FFF3D5;
min-width: 160px;
box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 8.7%;
}
.dropdown-content a {
color: #FFBE1E;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ffb90f;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<ul class="navbar">
<li id="navbar" style=" margin-left: 3%; width:22%">Home</li>
<li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; width: 21%; text-align: right">
Jump to...
<div class="dropdown-content">
Item1
Item2
</div>
</li>
</ul>
</body>
Update css and remove the overflow to properties ul.navbarfrom your css and add position:relative and remove width:21%; to below html
<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;">
css part
.dropdown-content {
display: none;
position: absolute;
background-color: #FFF3D5;
min-width: 160px;
box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 8.7%;
left:0px; /* Add this you can change it as your need */
}
working fiddle
fiddle
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #ffb90f;
width: 100%;
display: block;
vertical-align: middle;
height: auto;
position: fixed;
top: 0;
}
.navbar li {
display: inline-block;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
dropdown:hover .dropbtn {
background-color: #FFC63D;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #FFF3D5;
min-width: 160px;
box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 8.7%;
left:0px;
}
.dropdown-content a {
color: #FFBE1E;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ffb90f;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul class="navbar">
<li id="navbar" style=" margin-left: 3%; width:22%">Home</li>
<li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;">
Jump to...
<div class="dropdown-content">
Item1
Item2
</div>
</li>
</ul>
Remove overflow from .navbar
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #ffb90f;
width: 100%;
display: block;
vertical-align: middle;
height: 48px;
position: fixed;
top: 0;
}
.navbar li {
display: inline-block;
overflow: hidden;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
dropdown:hover .dropbtn {
background-color: #FFC63D;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #FFF3D5;
min-width: 160px;
box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 8.7%;
}
.dropdown-content a {
color: #FFBE1E;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ffb90f;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<ul class="navbar">
<li id="navbar" style=" margin-left: 3%; width:22%">Home</li>
<li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; width: 21%; text-align: right">
Jump to...
<div class="dropdown-content">
Item1
Item2
</div>
</li>
</ul>
</body>
I'm trying to build a website. But for some reason I am not able to reposition my dropdown list(CSS). Need some help. I need to move that dropdown list to the center.
HTML Code:
<header>
<h1 id="my_cycle_head">MY CYCLE</h1>
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
<a class="dropbtn" style="margin-left: -40px; z-index: -1">Rent</a>
<div class="dropdown-content">
Mountain Bikes
Hybrid Bikes
Road Bikes
City Bikes
</div>
</li>
<li>
FAQ's
</li>
<li>
About
</li>
</ul>
</header>
CSS Code:
body {
font-family: 'Open-sans', sans-serif, Helvetica;
background-color: #f9f9f9;
text-align: center;
box-sizing: border-box;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
min-width: 200px;
right: 1;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
background-color: #6ab47b;
}
#my_cycle_head {
text-align: center;
float: left;
margin-left: 50px;
font-weight: normal;
}
#main_navbar {
text-align: center;
margin: 0 auto;
float: right;
margin-top: 25px;
}
#main_navbar li {
list-style-type: none;
display: inline-block;
min-width: 5em;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
font-weight: normal;
text-align: center;
overflow: hidden;
}
header {
background-color: #6ab47b;
height: 95px;
width: 100%;
float: left;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
color: white;
}
Thank you in advance.
You can keep your menu floated to right. In order to center your drop down menu you should do the followings
remove the "margin-left: -40px; inline style from all <a> elements.
insert the following two lines to your .dropdown-content class
right: 50%;
transform: translate(50%,0);
In your CSS the dropdown is floated to right. Just remove it, Dropdown will be in the center.
#main_navbar {
text-align: center;
margin: 0 auto;
/*float: right;*/
margin-top: 25px;
}
accepted
replace this css with what you have for #main_navbar > li > a:
#main_navbar > li > a {
display:inline-block;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
and add this to your css codes:
#main_navbar > li > {
text-align:center;
}
try with this below code it may help you.
body {
font-family: 'Open-sans', sans-serif, Helvetica;
background-color: #f9f9f9;
text-align: center;
box-sizing: border-box;
}
header {
background-color: #6ab47b;
height: 95px;
width: 100%;
float: left;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
color: white;
}
#my_cycle_head {
text-align: center;
float: left;
margin-left: 50px;
font-weight: normal;
}
.dropdown-content {
position: absolute;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0 -50px;
font-size: 14px;
text-align: center;
list-style: none;
background-color: #6ab47b;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
#main_navbar{
float : right;
}
#main_navbar>li {
float: left;
padding : 10px;
list-style-type : none;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
font-weight: normal;
text-align: center;
overflow: hidden;
}
.dropdown>.dropdown-content {
list-style-type : none;
}
.dropdown>.dropdown-content>li {
padding : 5px;
border-bottom : 1px solid #fff;
}
.dropdown>.dropdown-content>li:last-child {
border-bottom : none;
}
.dropdown>.dropdown-content>li:hover {
background : white;
color : #6ab47b !important;
}
.dropdown:hover .dropdown-content{
display : block
}
<header>
<h1 id="my_cycle_head">MY CYCLE</h1>
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
Rent <span class="caret"></span>
<ul class="dropdown-content">
<li>Mountain Bikes</li>
<li>Hybrid Bikes</li>
<li>Something else here</li>
<li>Road Bikes</li>
<li>City Bikes</li>
</ul>
</li>
<li><a href="faq.html" >FAQ's</a></li>
<li><a href="about.html" >About</a>
</li>
</ul>
</header>