my sad navbar here I can't get my navbar to display horizontally and have tried messing with float, position, and display:inline-block. It is in an ul format and has 3 buttons in the middle with dropdown menus. Please let me know if you see what I am doing wrong and thank you!
/* NAVIGATION BAR */
#nav {
width: 1100px;
height: 200px;
float: left;
font-weight: bold;
font-size: 24px;
float: left;
}
# nav button {
display: inline-block;
position: relative;
width: 100%;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%
background-color: white;
color: rgb(36,60,131);
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
display: inline-block;
}
li {
float: left;
}
/* nav bar hover */
li a {
display: inline-block;
color: #000;c
text-align: center;
padding: 8px 16px;
background-color: white;
color: rgb(36,60,131);
text-decoration: none;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
float: left;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
/* changes link color on hover */
li a:hover, .dropdown:hover .dropbtn {
background-color: rgb(36,60,131);
color: white;
}
/* highlights active page on nav bar */
.active {
background-color: rgb(36,60,131);
color: white;
}
li.dropdown {
display: inline-block;
}
/* dropdown menu */
.dropbtn {
display: inline-block;
background-color: white;
text-align: center;
padding: 8px 16px;
color: rgb(36,60,131);
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-decoration: none;
font-size: 24px;
border: none;
font-weight: bold;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(36,60,131);
color: white;
min-width: 160px;
}
.dropdown-content a {
padding: 8px 16px;
background-color: white;
color: rgb(36,60,131);
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: rgb(36,60,131);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
and my HTML is here
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/saferide.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<div id="nav">
<ul>
<li style="float:left">home</li>
<div class="dropdown">
<button class="dropbtn">about us</button>
<div class="dropdown-content">
safe ride history
meet our dispatchers
core staff
</div>
</div>
<div class="dropdown">
<button class="dropbtn">how we operate</button>
<div class="dropdown-content">
rules & policies
how to schedule a ride
safe ride boundaries
</div>
</div>
<div class="dropdown">
<button class="dropbtn">get involved</button>
<div class="dropdown-content">
volunteer or intern
resources
</div>
</div>
<li>contact us</li>
</ul>
</div>
Here you go: https://jsfiddle.net/2uj2u5g5/
You forgot to add a ; to one of the width:100% and therefore the CSS was not working correctly. You also did li.dropdown while your dropdown classes are not within the li, so that didn't work either. I would highly suggest that you add more structure to your navigation panel and keep the HTML standards in mind. Please follow some well known articles like this one: http://www.w3schools.com/css/css_navbar.asp.
Good luck.
Related
Having some trouble getting my dropdown menu to display properly on hover; it's currently displaying all on one line and also appears not to be overlaying, despite z-index being set to 1. Played around with making projects a p, a, and div but still stumped. Any advice?
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<nav class="navbar">
Name
<div class="dropdown">
<a>Projects</a>
<div class="dropdown-content">
Project 1
Project 2
Project 3
</div>
</div>
About
Contact
</nav>
</body>
</html>
CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: .015em;
color: #000000;
}
a:link, a:visited {
color: #000000;
text-decoration: none;
}
a:hover, a:active {
color: #a9c4d4;
text-decoration: underline;
}
.navbar {
overflow: hidden;
font-size: 2.5em;
font-weight: 700;
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0px 0px 0px 110px;
padding: 10px 0px 10px 0px;
background-color: #ffffff;
}
.navbar a {
float: left;
display: block;
margin: 10px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
z-index: 1;
}
.dropdown-content a {
float: none;
margin: 10px;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
#name-link {
color: #a9c4d4;
text-decoration: none;
}
a.selected-link {
text-decoration: underline;
}
jsfiddle here: https://jsfiddle.net/29gev50b/2/
change the css of "dropdown-content". The position absolute does that thing. remove this position absolute css from "dropdown-content" and it will work fine.
You did not leave enough room in your navbar div container for the expansion of the menu which is why it gets cut off. z-index won't work because the box (div) isn't large enough.
Add min-height: 100px; to your navbar to fix.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: .015em;
color: #000000;
}
a:link,
a:visited {
color: #000000;
text-decoration: none;
}
a:hover,
a:active {
color: #a9c4d4;
text-decoration: underline;
}
.navbar {
overflow: hidden;
font-size: 2.5em;
font-weight: 700;
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0px 0px 0px 110px;
padding: 10px 0px 10px 0px;
min-height: 100px;
background-color: #ffffff;
}
.navbar a {
float: left;
display: block;
margin: 10px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
z-index: 1;
}
.dropdown-content a {
float: none;
margin: 10px;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
#name-link {
color: #a9c4d4;
text-decoration: none;
}
a.selected-link {
text-decoration: underline;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<nav class="navbar">
Name
<div class="dropdown">
<a>Projects</a>
<div class="dropdown-content">
Project 1
Project 2
Project 3
</div>
</div>
About
Contact
</nav>
</body>
</html>
drop down showing above parent navigation bar i want to show the drop down below my navigation bar
i am using asp.net site master page
page link
http://eforms.hopto.org/Management/
i just copy the code from w3shools
https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
and past to my code and still not working using chrome or Opera
but it working with microsoft Edge browser
i am using site master page and asp.net
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.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;
}
</style>
Move it down with top... just add the top here:
.dropdown-content {
top: 45px;
}
OR, add the dropdown-content inside the dropbtn - now they are not inside, but right after - eg:
<div class="dropdown">
<button class="dropbtn">
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
</div>
</div>
The css hover drop down worked perfectly on fresh page, but it is not working when pasted on html page which is linked with bootstrap (I hided other css pages so I found bootstrap causing the problem!)
So using devtool I hided 'position:absolute' from 'dropdown-contents' which is working but the below container jumping downward:http://prntscr.com/lu7frm
Here is the code:
.navbar {
overflow: hidden;
/* background-color: #333;*/
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: right;
font-size: 16px;
color: #060606;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #060606;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color:#4389dc;
transition:.3s ease-out;
}
.dropdown-contents {
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-contents a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contents a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-contents {
display: block;
}
/*navbar*/
#slapper {
min-height: 2%;
height: auto !important;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" style="padding:0px;">
<div class="navbar">
For Professionals
Tax News
Ask a Question
Find an Accountant
<div class="dropdown">
<button class="dropbtn">Learn About Taxes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-contents">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
You need to remove the overflow:hidden from you code (.navbar and .dropdown) to be able to see the dropdown. You no more need them to clear the float as bootstrap is already doing this.
.navbar {
font-family: Arial, Helvetica, sans-serif;
border-color:#000!important; /*to show that the height is good*/
}
.navbar a {
float: right;
font-size: 16px;
color: #060606;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #060606;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color:#4389dc;
transition:.3s ease-out;
}
.dropdown-contents {
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-contents a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contents a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-contents {
display: block;
}
/*navbar*/
#slapper {
min-height: 2%;
height: auto !important;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" style="padding:0px;">
<div class="navbar">
For Professionals
Tax News
Ask a Question
Find an Accountant
<div class="dropdown">
<button class="dropbtn">Learn About Taxes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-contents">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
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.
I am using HTML and CSS to create a website, and im currently working on a navigation bar at the top but I dont know how to seperate different nav bar buttons/create them. As when i tried to make a second one, when i hover over our athletes it also hovers over about us. How do I create different drop down buttons on one nav bar?
h1 {
text-decoration: underline;
text-align: center;
}
h3 {
text-align: center;
}
body {
background-color: #BBBCC0;
}
p {
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.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;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: green;
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="rtsnp_home.css">
<title>Rolling Thunder Special Needs Program</title>
</head>
<body>
<div class="navbar">
Home
<!--no drop down-->
<div class="dropdown">
<button class="dropbtn">About Us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Mission Statement
Our Founder
Our Board of Directors
National Board of Directors
Programs Offered
</div>
<button class="dropbtn">Our Athletes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
</div>
</div>
</div>
</body>
</html>
It's a small mistake in the div tags. Here you go.
You need to seperate div tags from each dropdown, otherwise both will call at the same time which occurs in your snippet.
h1 {
text-decoration: underline;
text-align: center;
}
h3 {
text-align: center;
}
body {
background-color: #BBBCC0;
}
p {
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.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;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: green;
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="rtsnp_home.css">
<title>Rolling Thunder Special Needs Program</title>
</head>
<body>
<div class="navbar">
Home
<!--no drop down-->
<div class="dropdown">
<button class="dropbtn">About Us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Mission Statement
Our Founder
Our Board of Directors
National Board of Directors
Programs Offered
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Our Athletes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
</div>
</div>
</div>
</body>
</html>