I'm trying to do a navigation bar but not all the links stay at the same level, the drop down menu ones stay outside the navigation bar div and I can't align them.
Also, the container that has the drop down menu links isn't centered right bellow the drop down link.
I don't know how I can center it.
.topnav {
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #333;
}
.topnav a {
color: #f2f2f2;
padding: 10px;
text-decoration: none;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.dropdown {
position: relative;
display: inline-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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
Link 1
Example link
<div class="dropdown">
Dropdown menu 1
<div class="dropdown-content">
Link 2
An example link
Link 3
</div>
</div>
<div class="dropdown">
Dropdown menu 2
<div class="dropdown-content">
Link 4
Link 5
An example link 2
</div>
</div>
</div>
Try adding this:
.dropdown a {
display:flex;
}
and your item element with a drop down should get aligned in the same space.
Update 1
You might need to set a fixed width on the submenu in order to keep it centred, like the following:
.dropdown-content {
left: -80px;
margin-left: 50%;
}
.topnav {
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #333;
}
.topnav a {
color: #f2f2f2;
padding: 20px;
text-decoration: none;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown a {
display:flex;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: -80px; /* 160px/2 */
margin-left: 50%; /* 50% */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
Link 1
Example link
<div class="dropdown">
Dropdown menu 1
<div class="dropdown-content">
Link 2
An example link
Link 3
</div>
</div>
<div class="dropdown">
Dropdown menu 2
<div class="dropdown-content">
Link 4
Link 5
An example link 2
</div>
</div>
</div>
Just Add This Code In -> .topNav
align-items: center;
Related
I have a navigation bar that contains elements, two of them are dropdown menus. I fixed the size of the elements on the navigation bar, but Im not able to do it on the elements that drop down. When the drop down comes down it is too wide, but when I hover over the elements, part of only the "fixed width" I specified is highlighted, and the rest isn't. I want them all to be 100px with no extra space on the side, how can I do that?
Code:
.topnav {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
align-items: center;
}
.topnav ul {
list-style-type: none;
margin: 0 auto;
}
.topnav li {
float: left;
}
.topnav li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 100px;
}
.topnav li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-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;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Products
<div class="dropdown-content">
Computers
Tablets
Cell Phones
Wearable Technologies
Accessories
</div>
</li>
<li class="dropdown">Brands
<div class="dropdown-content">
Apple
Samsung
Lenovo
Dell
HP
Sony
Panasonic
Motorola
HTC
</div>
</li>
<li>Deals</li>
</ul>
</div>
JSFiddle: https://jsfiddle.net/29r9d18a/22/
Remove min-width: 160px from your .dropdown-content CSS class.
Change min-width of this one .dropdown-content and add max-width: 100px; also add word-break: break-word;.
Like this
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: auto;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
word-break: break-word;
z-index: 1;
}
Here is the working code.
.topnav {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
align-items: center;
}
.topnav ul {
list-style-type: none;
margin: 0 auto;
display: inline-block;
-webkit-padding-start: 0;
}
.topnav li {
float: left;
}
.topnav li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 100px;
}
.topnav li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: auto;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
word-break: break-word;
z-index: 1;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 5px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Products
<div class="dropdown-content">
Computers
Tablets
Cell Phones
Wearable Technologies
Accessories
</div>
</li>
<li class="dropdown">Brands
<div class="dropdown-content">
Apple
Samsung
Lenovo
Dell
HP
Sony
Panasonic
Motorola
HTC
</div>
</li>
<li>Deals</li>
</ul>
</div>
I want dropdown effect to go sidways.
I am able to do that with display: inline-table effect. 1) is there a better way to do this??
though above works, it expands content on the right side of parent component( dropbtn in this case). You can refer to below code how this uglyfies layout.
I want to make it span towards left side of parent button so that the button stays at its current position. 2) Is there a way to hack it?
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.btn {
background-color: #37abc8ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: inline-table;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: inline-table;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.wrapper {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="wrapper">
<button class="btn">Hello</button>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
strong text
The fastest and easiest way is to put the .dropdown-content div before .dropbtn button in your HTML structure:
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.btn {
background-color: #37abc8ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: inline-table;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: inline-table;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.wrapper {
display: flex;
justify-content: space-between;
}
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="wrapper">
<button class="btn">Hello</button>
<div class="dropdown">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<button class="dropbtn">Dropdown</button>
</div>
</div>
I am trying to get my menu to slide down on hover (looks like slowly moving as opposed to just popping up). I have found a lot of things to try but nothing seems to work which makes me think I am putting code in the wrong places.
Since the drop-down menus are different heights I was trying to use max-height to make it work.
I thank you in advance for your time.
<div id="navbar">
<ul>
<li>HOME</li>
<li class="dropdown">LEAGUE INFO
<div class="dropdown-menu">
About Us
Contact Us
Location
B.O.D.
Field Locations
Boundary Map
History
</div>
</li>
<li class="dropdown">SEASON INFO
<div class="dropdown-menu">
Standings
Game Schedules
Home Run Club
</div>
</li>
<li>PHOTOS</li>
<li class="dropdown">MISC.
<div class="dropdown-menu">
Documents
FAQ's
Equipment
How To...
Local Rules
Archives
</div>
</li>
<li>SOCIAL MEDIA</li>
</ul>
</div>
#navbar {
max-width: 960px;
background-color: rgba(0,0,0,.3);
border: 1px #000000 solid;
border-bottom: 0px;
font-family: 'Montserrat', sans-serif;
font-weight: normal !important;
}
ul {
list-style-type: none;
margin: auto;
display: table;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-btn {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: .5s;
}
li a:hover, .dropdown:hover .dropdown-btn {
background-color: rgba(255,0,0,.8);
color: #000000;
}
li .dropdown {
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: rgba(0,0,128,1);
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1);
}
.dropdown-menu a {
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: rgba(255,0,0,1);
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
This is my first time trying to build a website from scratch, so my apologies if I've done everything wrong; I am open to any advice, though. My main issue right now is that the navigation bar is scrolling within itself instead of down in front of the background image. It used to look perfect until I added the floating/fixed attribute.
It's not a huge deal, but it would also be nice if the dropdown boxes were centered instead in line with the left side of the box. This is what I want it to look like: http://www.palousebicycle.org/ and here is the code for what I have now:
<header>
<style>
#nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
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: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
</style>
<font face="Ubuntu" color="white">
<nav align="center">
<ul id="nav">
<li>Home</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Memberships
Repairs
</div>
<li>Our Work</li>
<li class="dropdown">
About Us
<div class="dropdown-content">
Our Team
Board of Directors
</div>
<li>Contact</li>
<li>Donate</li>
</ul>
</nav>
</header>
I'm very appreciative of your time! Thank you for any response or suggestions.
EDIT: Also updated this demo to center the dropdown menus (positional and text) per your example, and made comments in the CSS so you can see where the changes were made.
Remove overflow: auto on #nav to let the dropdowns extend outside of the nav bar. Live demo:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
/* center dropdowns */
position: relative;
}
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: #333;
}
li.dropdown {
display: inline-block;
}
li.dropdown:hover .dropdown-content {
/* show dropdown */
display: block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* center dropdowns */
left: 50%;
transform: translateX(-50%);
/* hide dropdown */
display: none;
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
/* center dropdowns */
text-align: center;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
<nav align="center">
<ul id="nav">
<li>Home
</li>
<li class="dropdown"> Services
<div class="dropdown-content"> Memberships Repairs
</div>
<li>Our Work
</li>
<li class="dropdown"> About Us
<div class="dropdown-content"> Our Team Board of Directors
</div>
<li>Contact
</li>
<li>Donate
</li>
</ul>
</nav>
Don't use overflow: auto property on #nav. This is responsible for internal scrolling. Instead give these additional styles:
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
top: 40px;
}
.dropdown:hover > .dropdown-content {
display: block;
}
Have a look at the working snippet below:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
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: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
text-align: center;
}
.dropdown:hover > .dropdown-content {
display: block;
}
body {
margin: 0;
}
<header>
<font face="Ubuntu" color="white">
<nav align="center">
<ul id="nav">
<li>Home</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Memberships
Repairs
</div>
</li>
<li>Our Work</li>
<li class="dropdown">
About Us
<div class="dropdown-content">
Our Team
Board of Directors
</div>
</li>
<li>Contact</li>
<li>Donate</li>
</ul>
</nav>
</header>
Hope this helps!
I have a navigation bar with one element containing drop-down contents. The navigation bar code comes from the w3schools site. (http://www.w3schools.com/css/css_navbar.asp)
Below the menu I have added a SVG using plotly and it hides the drop-down contents.
Is there a way to make the navigation bar on the top (drop-down contents included) ?
(I have verified that by deleting the SVG, the drop-down contents isvisible)
Here is the sample code :
HTML
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div id="myDiv" class="plotly" ></div>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
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: red;
}
li.dropdown {
display: inline-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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
https://jsfiddle.net/5qktcvwb/
I just added z-index property for the dropdown content and it's visible now.
.dropdown:hover .dropdown-content {
display: block;
z-index: 1;
}
https://jsfiddle.net/5qktcvwb/4/