I some how managed to but an additional menu on all of my pages but the Home page. Now I cannot figure out how to get rid of it. It is not even appearing under menus. Not sure how I did it :)
https://www.talismantherapeuticriding.org/rider-cup/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
add the color in swiper might help
Related
Alright, so I'm doing a web development class and I'm currently working on the last project for the course. I decided that I want a dropdown menu in the navbar so i followed the w3schools tutorial for it, but there is a slight problem. The dropdown, while it looks good, seems to have decided that it's background spanning the entire navbar sounds like a grand idea. Here's how it looks
Any of y'all got any idea how to fix this? this is my code
.menu{
overflow: hidden;
background-color: #000;
max-width: 100%;
position:relative;
top: -120px;
font-size: 16px;
}
.menu a{
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.menu a:link
.menu a:visited{
text-decoration: none;
}
.active{
background-color: #C00;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dopbtn{
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.menu a:hover, .dropdown:hover .dropbtn{
background-color: #9B0000;
}
.dropdown-content{
display: none;
position: static;
background-color: black;
max-width: 160px;
box-shadow: 0px 8px 16px 0px grey;
z-index: 1;
}
.dropdown-content a{
float: left;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover{
background-color: #7B0002;
}
.dropdown:hover .dropdown-content{
display: block;
}
<Html xmlns="http://www.w3.org/1999/xhtml">
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="CSS/Candlekeep.css" />
<title>Home-Candlekeep</title>
</Head>
<Body class="homepage">
<header>
<link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
<div class="hwrap">
<img src="IMG/Logo.png" alt="Homepage" class="logo">
</div>
<h1 class="logtxt">Candlekeep</h1>
</header>
<nav>
<div class="menu">
Home
<div class="dropdown">
<a href="DMs.html" class="dropbtn">Dungeon Masters
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Plot Hooks
Maps
Traps & Puzzles
Names & Locations
Campaign Management
Encounters
Character Sheets
</div>
</div>
Players
General Resources
</div>
</nav>
</body>
</html>
There were few modifications required but I was able to fix the issue which you mentioned above, hope it helps.
body {
background-color: gray;
padding: 0;
margin: 0;
}
.menu {
background-color: #000;
position: relative;
font-size: 16px;
height: 32px;
}
.menu a {
color: white;
text-align: center;
text-decoration: none;
padding: 14px 20px;
}
.menu a:link .menu a:visited {
text-decoration: none;
}
.active {
background-color: #C00;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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;
}
.menu a:hover,
.dropdown:hover .dropbtn {
background-color: #9B0000;
}
.dropdown-content a:hover {
display: block;
background-color: #7B0002;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body class="homepage">
<header>
<link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
</header>
<nav>
<div class="menu">
Home
<div class="dropdown">
<a href="DMs.html" class="dropbtn">Dungeon Masters
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Plot Hooks
Maps
Traps & Puzzles
Names & Locations
Campaign Management
Encounters
Character Sheets
</div>
</div>
Players
General Resources
</div>
</nav>
<h1 class="logtxt">Candlekeep</h1>
<div class="hwrap">
<img src="IMG/Logo.png" alt="Homepage" class="logo">
</div>
</body>
I'm trying to make Hover dropdown menu and I want to margin-top dropdown content, but when I'm making so it does not work, because when I'm trying to go to dropdown links it disappears as I'm off hover.
See snippet from w3school below. In dropdown-content I have style margin-top:20px.
How can I manage this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" style="margin-top:20px;">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
You can wrap your links inside the drop down in another div and use margin-top:20px; for that to bring it down, also you will have to move your background-color and box-shadow to the new div. See the snippet below, hope this helps you
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown-content div {
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" style="">
<div style="margin-top:20px;">
Link 1
Link 2
Link 3
</div>
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
</body>
</html>
So I have a page with a background image, and when I put text over it, I'm seeing a semi-opaque text background that is making my page background image render differently, but only under the text in question.
Does anyone know how to fix this? It is making my page look like there is a semi-transparent headed that I do not want there.
I've linked to my project below.
Codepen Project
$("#nav-status").click(function(e) {
e.preventDefault();
$("#navigation").toggle();
});
html,
body {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/wood-dark.png");
overflow-x: hidden;
font-family: "Oswald", sans-serif;
text-align: center;
}
/*mobile rules*/
#media screen and (max-width: 1023px) {
#nav-status {
display: block;
width: 100%;
height: 32px;
padding: 2px;
background-color: rgba(0, 0, 0, 0.75);
}
ul {
display: none;
width: 100%;
background-color: rgba(0, 0, 0, 0.75);
overflow: hidden;
color: white;
padding: 0;
margin: 0;
}
li h1 {
font-family: "Oswald", sans-serif;
font-size: 1.5em;
}
ul li {
width: 100%;
min-height: 32px;
padding: 0;
display: block;
position: relative;
text-align: center;
}
li a:link,
a:visited,
a:active {
color: white;
font-family: "Oswald", sans-serif;
font-size: 1em;
text-decoration: none;
}
li a:hover {
color: #ba1d30;
font-family: "Oswald", sans-serif;
font-size: 1em;
text-decoration: none;
}
.content {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
.content h1 {
font-family: "Bangers", cursive;
color: #ba1d30;
font-size: 2.5em;
letter-spacing: 0.1em;
}
}
/*desktop rules*/
#media screen and (min-width: 1024px) {
#nav-status {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
background-color: rgba(0, 0, 0, 0.85);
height: 100%;
position: fixed;
overflow: hidden;
}
li h1 {
font-size: 3em;
}
ul li {
color: white;
margin: auto;
width: 50%;
padding: 2px;
}
li a:link,
a:visited,
a:active {
color: white;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-decoration: none;
}
li a:hover {
color: #ba1d30;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-decoration: none;
font-style: italic;
}
.content {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
margin-left: 20%;
}
.content h1 {
font-family: "Bangers", cursive;
color: #ba1d30;
font-size: 5em;
letter-spacing: 0.1em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png">
<link href="https://fonts.googleapis.com/css?family=Bangers|Oswald" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png" alt="Kissy Cat">
<ul id="navigation">
<li>
<h1>Explore</h1>
</li>
<li>
Web Pages
</li>
<li>
Games
</li>
<li>
Productivity
</li>
<li>
Category 4
</li>
</ul>
</div>
<div class="content">
<h1>Valarie Pisarcik</h1>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
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>