I want to implement inline right side navigation bar with dropdown. When screen size is small, I am hiding all menus and displaying button. On clicking button I am displaying vertical navigation bar.
In media query I dont know how to hide and show dropdown.
In media query I am able to hide dropdown but I am unable to show it again.
This is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Business 2</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.nav {
float: right;
list-style: none;
text-align: left;
margin: 0;
display:inline;
}
.nav > li {
display:inline-block;
padding: 10px 9px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: black;
font-size: 16px;
padding: 20px 15px 20px 15px;
}
.nav > li > a:hover {
color: black;
}
ul li > ul li {
position:relative;
display:none;
width:150px;
height:50px;
line-height:50px;
}
.dropdown {
display: inline-block;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: black;
background-color: inherit;
margin: 0;
}
.nav-right a:hover {
background-color: #E7E7E7;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 80px;
top: 40px;
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;
background-color: white;
text-align: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.nav .icon {
display: none;
}
#media screen and (max-width: 680px) {
ul.nav li a {display: none;}
ul > li .dropbtn{
display: none;
}
ul.nav li a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 680px) {
ul.nav.responsive {position: relative;}
ul.nav.responsive li a.icon{
position: absolute;
right: 0;
top: 0;
}
ul.nav.responsive li {
display: block;
text-align: left;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
ul.nav.responsive li.dropdown-content {position: relative;}
ul.nav.responsive li.dropdown{
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<ul class="nav" id="topnav">
<li><a href="#" class="active" >item1</a></li>
<li>
<div class="dropdown">
<button class="dropbtn">item2
<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
subitem1
subitem2
subitem3
</div>
</div>
</li>
<li>item3</li>
<li>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</li>
</ul>
<script>
function myFunction() {
var x = document.getElementById("topnav");
if (x.className === "nav") {
x.className += " responsive";
} else {
x.className = "nav";
}
}
</script>
</body>
</html>
Thanks,
You need to add this whitin your media query :
ul.nav.responsive li .dropbtn{
display: block;
}
Related
This is the html and css code I use. When I look on a mobile device or when I shrink my screen the countdown disappears, but the text not. I have added the other part of the css. Now I added all the css of the page, so the upper part is from my navbar I used in my html. I added the JS aswell. I hope someone knows how to fix this problem. Thank you in advance! I added the whole html aswell. I hope you know a solution for all the problems!
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let birthday = "Dec 29, 2021",
countDown = new Date(birthday).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "Bestel nu je vuurwerk!";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
nav{
background: #151515;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 4px;
list-style: none;
position: relative;
}
nav ul li{
float: left;
display: inline-block;
background: #151515;
margin: 5 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: white;
border-radius: 5px;
box-shadow: 0 0 5px #000000,
0 0 10px #0a0a0a;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid red;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px -20px;
width: 175px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
text-align:center;
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 15px;
line-height: 70px;
cursor: pointer;
}
.show:hover{
background-color:red;
color: white;
border-radius:5px;
}
.icon{
display: block;
color: white;
position: absolute;
top: 25;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked + ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: '\f00d';
}
}
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #1b1b1b;
}
.container {
color: yellow;
margin: 0 auto;
text-align: center;
}
.container li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
.container li span {
display: block;
font-size: 4.5rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
#media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="js/countdown.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/xicon" href="images/logo-klein.png">
<title>Knalhuis Ochten</title>
</head>
<body>
<nav>
<div class="logo">
<div id="myMenu">
<div class="logo-navbar">
<nav>
<img src="images/logo-groot.png" height="80" />
</nav>
</div>
</div>
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-2" class="show">Assortiment</label>
Assortiment
<input type="checkbox" id="btn-2">
<ul>
<li>Knalvuurwerk</li>
<li>Siervuurwerk</li>
<li>Kindervuurwerk</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<h1 id="headline">Dagen tot vuurwerkverkoop:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>dagen</li>
<li><span id="hours"></span>uren</li>
<li><span id="minutes"></span>minuten</li>
<li><span id="seconds"></span>seconden</li>
</ul>
</div>
</div>
<script>
$('.icon').click(function(){
$('span').toggleClass("cancel");
});
</script>
</body>
</html>
The reason is because in your media query you have this:
.show + a, ul{
display: none;
}
You are hiding all ul elements. Remove that and you'll see your numbers. You may need to keep the .show + a, but the ul is what is causing it to be hidden.
.show + a, nav > ul{
display: none;
}
This makes sure not every ul is targeted, but just the top level one in your menu.
EDIT In the comment you mention about your nav menu not collapsing. You can do this (or something similar since I don't have all the code):
EDIT 2 You are seeing the ::before font awesome elements before your numbers because all the spans are getting the .cancel class added. The following CSS will fix that.
#countdown li span.cancel::before {
display: none;
}
(function() {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let birthday = "Dec 29, 2021",
countDown = new Date(birthday).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "Bestel nu je vuurwerk!";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
nav {
background: #151515;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
line-height: 70px;
padding-left: 60px;
}
nav ul {
float: right;
margin-right: 4px;
list-style: none;
position: relative;
}
nav ul li {
float: left;
display: inline-block;
background: #151515;
margin: 5 5px;
}
nav ul li a {
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: white;
border-radius: 5px;
box-shadow: 0 0 5px #000000, 0 0 10px #0a0a0a;
}
nav ul ul li a:hover {
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
border-top: 3px solid red;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul {
border-top: none;
}
nav ul li:hover>ul {
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li {
position: relative;
margin: 0px -20px;
width: 175px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
text-align: center;
}
nav ul ul li a {
line-height: 50px;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 150px;
}
.show,
.icon,
input {
display: none;
}
.fa-plus {
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul {
margin-right: 0px;
float: left;
}
nav .logo {
padding-left: 30px;
width: 100%;
}
nav ul li,
nav ul ul li {
display: block;
width: 100%;
}
nav ul li a:hover {
box-shadow: none;
}
.show {
display: block;
color: white;
font-size: 18px;
padding: 0 15px;
line-height: 70px;
cursor: pointer;
}
.show+a,
nav>ul {
display: none;
}
.show:hover {
background-color: red;
color: white;
border-radius: 5px;
}
.icon {
display: block;
color: white;
position: absolute;
top: 25;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul {
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a {
padding-left: 40px;
}
nav ul ul ul a {
padding-left: 80px;
}
nav ul ul ul li {
position: static;
}
[id^=btn]:checked+ul {
display: block;
}
nav ul ul li {
border-bottom: 0px;
}
span.cancel:before {
content: '\f00d';
}
#countdown li span.cancel::before {
display: none;
}
}
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #1b1b1b;
}
.container {
color: yellow;
margin: 0 auto;
text-align: center;
}
.container li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
.container li span {
display: block;
font-size: 4.5rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
#media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="js/countdown.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/xicon" href="images/logo-klein.png">
<title>Knalhuis Ochten</title>
</head>
<body>
<nav>
<div class="logo">
<div id="myMenu">
<div class="logo-navbar">
<nav>
<img src="images/logo-groot.png" height="80" />
</nav>
</div>
</div>
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-2" class="show">Assortiment</label>
Assortiment
<input type="checkbox" id="btn-2">
<ul>
<li>Knalvuurwerk</li>
<li>Siervuurwerk</li>
<li>Kindervuurwerk</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<h1 id="headline">Dagen tot vuurwerkverkoop:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>dagen</li>
<li><span id="hours"></span>uren</li>
<li><span id="minutes"></span>minuten</li>
<li><span id="seconds"></span>seconden</li>
</ul>
</div>
</div>
<script>
$('.icon').click(function() {
$('span').toggleClass("cancel");
});
</script>
</body>
</html>
I have created the menu which works fine with all the links and responsiveness but there is some issue.
Example:
When I click on about us the menu get disappear but link is working fine the only issue is my menu disappear from the page. I want my menu to be there like fixed. Can anyone help me to figure out the issue.
<!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: #ea8537;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.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
About Us
Contact Us
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Google
Gmail
</div>
</div>
Disclaimer
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
.navbar { /* navbar = your "topnav" */
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
reference:https://www.w3schools.com/howto/howto_css_fixed_menu.asp
I am using CSS to make drop-down menu. When I resized the page, the drop-down menu didn't work. It didn't do anything when I click on the menu. Also I would like to know that when I resize my page, the About menu from the nav bar does not show after resizing. I do not know how to fix the size when I resize the page.
This is my first time using CSS and HTML. I would love to learn from you guys here.
This is my HTML code
<head>
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<link href="css/pj2.css" rel="stylesheet" type"text/css">
<meta name="viewport" content="width-device-width, initial-scale=1">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset= "UTF-8">
<title>KeeNok</title>
</head>
<body>
<div class="wrap">
<!--Responsive menu-->
<div class="topnav" id="myTopnav">
Home
<div class="dropdown">
<button class="dropbtn">Events
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Past Events
Future Events
</div>
</div>
About
☰
</div>
<!--Menu-->
<div id="main_menu">
<div class="logo_area">
<img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\graphics\KeeNokLogo.jpg" alt="logo">
</div>
<div class="inner_main_menu">
<ul id="menu">
<li>Events
<ul>
<li>Past Events</li>
<li>Future Events</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</div>
<!--Popup Photos-->
<div class="thumbs">
<div id="Mian Kham" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Mian Kham.png" alt="Mian Kham"></div>
<div id="Gai Tod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Gai Tod.png" alt="Gai Tod"></div>
<div id="Tom Khao Pod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Tom Khao Pod.png" alt="Tom Khao Pod"></div>
</div>
<footer></footer>
</div>
</body
This is my CSS code
body {
margin: auto;
background: rgba(255, 255, 255, 0.945);
font-family: 'Ubuntu', sans-serif;
overflow: auto;
height:100%;
}
.wrap {
position: fixed;
top: 0;
left: 0;
border: 20px solid #9fd7fd;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.inner_main_menu {
margin: 0 auto;
width: 1300px;
}
.inner_main_menu ul{
margin: 60px;
padding: 0;
list-style: none;
text-align: right;
padding-top: 30px;
z-index: 1;
}
.inner_main_menu ul li{
float: none;
display: inline-block;
position: relative;
}
.inner_main_menu ul li:nth-child(1){
float: left;
}
.inner_main_menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
}
.inner_main_menu ul li a:hover {
color: #eb3332;
}
.inner_main_menu ul li ul {
position: absolute;
top: 40px;
left: 0;
width: 200px;
padding: 0;
display: none;
margin: 0;
}
.inner_main_menu ul li:hover ul {
display: block;
}
.inner_main_menu ul li ul li{
float: left;
}
.inner_main_menu ul li ul li a{
font-size: 15px;
}
#main_menu {
width: 100%;
position: relative;
}
.logo_area img{
max-width: 300px;
position: absolute;
left: 50%;
top: 0;
content: " ";
margin-left: -150px;
text-align: center;
}
#main_menu:after {
content: "";
display: table;
clear: both;
}
.thumbs {
display: flex;
justify-content: space-between;
margin: 80px 0;
}
.thumbs img{
max-width: 300px;
}
.topnav {
background-color:#555d61;
overflow: hidden;
}
.topnav a {
float:left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.active {
color: black;
}
.topnav .icon {
display: none;
}
.dropdown {
float:left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
padding: 14px 16px;
}
.dropdown-content {
display: none;
position: absolute;
background-color:#555d61;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover {
background-color: #aaadad;
color: black;
}
.dropdown:hover .dropbtn {
background-color: #aaadad;
color: black;
}
.dropdown-content a:hover {
background-color: #aaadad;
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;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.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;
}
}
This is how my page look like before resizing
This is my page looks like after resizing
I see in your CSS that there's a comment which reads:
The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon
I think you are missing the JavaScript you need to add the class to your navigation.
It will look something like this:
const icon = document.querySelector(".icon")
const nav = document.querySelector(".topnav")
icon.onclick = function() {
nav.classList.toggle('responsive');
}
I am trying to make a responsive navigation bar with responsive style, if the size of screen is smaller than 750px then in the navigation bar will appear the menu icon in the middle and when hovering it will display the options in the list, below is my code, and possibly i have overlapped css styling.
.topnav {
position: relative;
overflow: hidden;
background-color: #a2d4c3;
margin: 3px 50px 3px 50px;
border: 1px solid black;
border-radius: 5px;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
#media screen and (max-width: 760px) {
.topnav a {
float: none;
display: block;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.hidden:hover a {
background-color: #dab756;
display: block;
}
.hidden:hover ul a:hover {
color: #fff;
}
.hidden li ul {
display: none;
}
.hidden li {
display: block;
float: none;
}
.hidden ul li a {
width: auto;
min-width: auto;
display: block;
}
.hidden .hidden:hover li a {
display: block;
}
#media screen and (max-width: 750px) {
.hidden ul {
position: static;
display: none;
}
.hidden li a {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link </head>
<body>
<header id="header">
<div class="topnav">
<ul class="hidden">
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</header>
</body>
</html>
Now I think that this snippet is the same as you want...
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: left;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 750px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
you need to change classes of your nav with javascript depending on conditions something like given below and then style this changed classes accordingly.
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
or refere this example
I am a beginner at html and I am trying to begin working on my online portfolio, I have gotten the nav bar set up and now I am trying to make a drop down menu from the nav bar. So far I have not been able to get the items to even go into the drop down menu, so I am thinking I do not have the container set up correctly. Thank you ahead of time!
/* nav bar */
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 15;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
padding-right: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 150px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
/*****************************************************************/
/*Dropdown for portfolio tab */
/*****************************************************************/
/* Dropdown Button */
.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);
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body class="About Me">
<header>
<div class="nav">
<ul>
<li>About Me</li>
<li>
<div class="dropdown">
<button class="dropbtn">Portfolio</button>
<div class="dropdown-content">
Graphics
Other
</div>
</div>
</li>
<li><nobr>Future Work</nobr></li>
</ul>
</div>
</header>
</div>
</body>
</html>
The element with the dropdown-content class is inside the element with the dropdown class, so what you are looking for is actually .dropdown:hover .dropdown-content
You current code (the + char) tells your browser to check for an adjacent sibling (and not a child element), which is not your case.
This is the update for your code:
/* nav bar */
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 15;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
padding-right: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 150px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
/*****************************************************************/
/*Dropdown for portfolio tab */
/*****************************************************************/
/* Dropdown Button */
.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);
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body class="About Me">
<header>
<div class="nav">
<ul>
<li>About Me</li>
<li>
<div class="dropdown">
<button class="dropbtn">Portfolio</button>
<div class="dropdown-content">
Graphics
Other
</div>
</div>
</li>
<li><nobr>Future Work</nobr></li>
</ul>
</div>
</header>
</div>
</body>
</html>
You're issue is with this CSS selector:
.dropdown:hover + .dropdown-content {
display: block;
}
It should be:
.dropdown:hover .dropdown-content {
display: block;
}
/* nav bar */
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 15;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
padding-right: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 150px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
/*****************************************************************/
/*Dropdown for portfolio tab */
/*****************************************************************/
/* Dropdown Button */
.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);
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body class="About Me">
<header>
<div class="nav">
<ul>
<li>About Me</li>
<li>
<div class="dropdown">
<button class="dropbtn">Portfolio</button>
<div class="dropdown-content">
Graphics
Other
</div>
</div>
</li>
<li><nobr>Future Work</nobr></li>
</ul>
</div>
</header>
</div>
</body>
</html>