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
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>
After nearly a week I am still struggling with toggle on navigation.
This is my current CSS, what I need to do now, is simply get the toggle to open, it did open before so something minor is stopping it now but I cant work it out. I do not really know much about CSS as I keep forgetting it, but I do not know javascript or jquery
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label,
#hamburger {
display: none;
}
.menu ul {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 10px;
width: 11.11%;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu li:visited {
background: #0000EE;
color: #fff;
}
.menu li:active,
.active {
background: #0000EE;
color: #fff;
}
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 20px 0 0;
font-size: 20px;
line-height: 44px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 768px) {
.nav {
background-color: #3333FF;
width: 100%;
}
``` .menu label {
display: inline-block;
color: #fff;
background-color: #3333FF;
padding-bottom: 8px;
}
.menu ul {
display: none;
}
.menu ul li {
display: block;
border-top: 1px solid #333;
}
.menu ul li:active {
display: block;
}
.menu label {
cursor: pointer;
margin: 0 20px 0 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
display: block;
}
#toggle:checked+.menu {
display: block;
}
<div class="nav">
<div class="menu">
<label for="toggle">☰</label><input type="checkbox" id="toggle">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li class="active">Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</div>
</div>
Here is an example for this. You can try this code. It is fully tested. I hope it will help you. You can change colors and backgrounds as per needed in this code.
nav ul ul {
display: none;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
list-style-type: none;
}
nav li a {
text-decoration: none;
display: inline-block;
margin: 10px 20px 5px 0;
padding: 8px 10px;
}
nav li a:link, nav li a:visited {
color: #646565;
background: #e8e9eb;
}
nav li a:link:hover, nav li a:visited:hover {
color: black;
}
nav li:hover ul {
display: block;
position: absolute;
}
input.toggle,
label.toggle {
display: none;
}
label.toggle {
font-weight: 900;
font-size: 1.2em;
padding: 10px 20px;
}
#media (max-width: 960px) {
nav {
display: none;
}
input.toggle, .toggle span {
display: none;
}
input[type=checkbox]:checked ~ nav, label.toggle {
display: block;
cursor: pointer;
}
nav li {
float: none;
}
nav li:hover ul {
display: block;
position: relative;
}
nav li ul {
display: block;
}
nav li ul li {
margin-left: 20px;
}
nav li a {
display: block;
margin-left: 20px;
}
}
<div class="wrapper">
<label class="toggle" for="toggle">☰ <span>Menue</span></label>
<input class="toggle" id="toggle" type="checkbox">
<nav>
<ul>
<li class="current">Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li>Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</nav>
</div>
Just change your selector from:
#toggle:checked+.menu {
display: block;
}
to:
#toggle:checked+ ul {
display: block;
}
See snippets below:
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label,
#hamburger {
display: none;
}
.menu ul {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 10px;
width: 11.11%;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu li:visited {
background: #0000EE;
color: #fff;
}
.menu li:active,
.active {
background: #0000EE;
color: #fff;
}
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 20px 0 0;
font-size: 20px;
line-height: 44px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 768px) {
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label {
display: inline-block;
color: #fff;
background-color: #3333FF;
padding-bottom: 8px;
}
.menu ul {
display: none;
}
.menu ul li {
display: block;
border-top: 1px solid #333;
}
.menu ul li:active {
display: block;
}
.menu label {
cursor: pointer;
margin: 0 20px 0 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
display: block;
}
#toggle:checked+ul {
display: block;
}
<div class="nav">
<div class="menu">
<label for="toggle">☰</label><input type="checkbox" id="toggle">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li class="active">Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</div>
</div>
I need to add a dropdown to my "contact" section and I'm wondering if anyone could help me out with it. I've tried to use: https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
but with my ongoing style it is not 100% working correctly. Is there any other way I could implement a dropdown to my "contact" section without adding a "Button" property?
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop"/>
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li>Contact</li>
</div>
</ul>
</nav>
.toggle, [id=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img{
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
nav a:hover {
color: #FF4E00;
}
#media (max-width :768px) {
#logo {
display: block;
padding: 20px 0 10px 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
nav ul {
float: left;
width: 100%;
text-align: center;
}
.toggle + a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: white;
padding:14px 20px;
color:black;
font-size:17px;
text-decoration:none;
border:none;
cursor: pointer;
text-align: center;
}
[id^=drop]:checked + ul {
display: block;
}
nav ul li {
display: block;
width: 100%;
}
}
I think It is necessary to add button...
check my code i have done some changes for you in you code by clicking "Run code snippet" and then "view full page".
.toggle,
[id=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img {
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 20px 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;
}
nav a:hover {
color: #FF4E00;
}
#media (max-width :768px) {
#logo {
display: block;
padding: 20px 0 10px 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
nav ul {
float: left;
width: 100%;
text-align: center;
}
.toggle+a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: white;
padding: 14px 20px;
color: black;
font-size: 17px;
text-decoration: none;
border: none;
cursor: pointer;
text-align: center;
}
[id^=drop]:checked+ul {
display: block;
}
nav ul li {
display: block;
width: 100%;
}
<body>
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li>
<div class="dropdown">
<button class="dropbtn">Contact
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</div>
</ul>
</nav>
</body>
Im trying to get my navigationbar in my media quires to display its sublist as normal under the parent element "checkbox", though the submenu is placed on top of the rest of the list, and are not "pushing" the rest of the list down as i want. Im a beginner with html and css so i have problably made some stupid misstake, but would be very thankful for any help in the matter, i really cant figure out what i´ve done wrong..
The problem is related to the media quires max-width: 576px.
nav {
width: 17%;
float: left;
padding-top: 4px;
margin-left: 0.5em;
margin-right: 0.6em;
}
/*210/1200*/
nav ul {
list-style: none;
padding-left: 2.14%;
}
/*3/140? = 0.125% ändra padding til procent här?*/
nav ul ul {
margin-left: 5%;
}
nav li {
margin-top: 2px;
display: block;
}
nav a {
display: block;
border: 1px solid grey;
padding: 4px;
text-decoration: none;
color: white;
border-radius: 5px 5px 5px 5px;
background-color: #225d66;
}
/*display block gör att länkarna fyller ut hela bredden för kolumen*/
nav a:link {
background-color: #225d66;
}
nav a:hover {
background-color: #22a4b3;
}
nav ul li ul li {
padding-top: 1px;
display: block;
}
#lokalnav a {
background-color: #2e7d87;
}
#lokalnav a:hover {
background-color: #3fa9b5;
}
nav #thisPage:before {
content: "> ";
}
nav #thisPage {
color: yellow;
}
nav #thisSection:before {
content: "> ";
}
nav #thisSection {
color: yellow;
}
.submenu {
cursor: pointer;
display: block;
}
.submenu ul {
display: none;
}
.submenu input {
display: none;
}
.submenu input:checked~ul {
display: block;
}
#media screen and (max-width: 620px) {
nav {
float: none;
width: 100%;
margin-top: -22px;
margin-left: 1px;
}
nav ul li {
display: inline-block;
position: relative;
}
nav a {
text-align: center;
border-radius: 0px 0px 5px 5px;
padding: 7px 12px 7px 12px;
}
#lokalnav {
position: absolute;
z-index: 1;
}
nav ul li ul li {
margin-top: 0px;
margin-bottom: 0;
}
nav ul li a:not(:only-child):after {
content: " ▾";
padding-left: 6px;
}
#dropdownbtn {
padding-top: 4px;
}
.topnav a {
padding-right: 2px;
}
main {
margin: 2px;
}
header {
height: 170px;
margin-bottom: 0px;
padding-bottom: 0px;
}
#coursenotes {
float: none;
font-size: 11px;
width: 100%;
margin-bottom: -70px;
font-size: 12px;
padding-left: 10px;
}
#content {
float: none;
width: 100%;
}
#coursenotes a:hover {
font-size: 10px;
}
}
#media screen and (max-width:576px) {
header {
background-size: contain;
}
#steps figure {
float: none;
}
}
#media screen and (max-width: 480px) {
nav ul li {
display: block;
width: 100%;
}
}
<nav>
<ul>
<li>Hem</li>
<li><label class="submenu"><a id="dropdownbtn">Ämnen</a><input type="checkbox">
<ul id="lokalnav">
<li>Matte</li>
<li>Svenska</li>
<li>Engelska</li>
<li>NO</li>
<li>Bild</li>
<li>SO</li>
</ul>
</label>
</li>
<li>Mina Inlämningar</li>
<li>Läxhjälp</li>
<li>Kontakt</li>
</ul>
</nav>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<br>
</body>
</html>
remove position:absolute from below class in media query. also check updated code snippet
#lokalnav {
z-index: 1;
}
nav {
width: 17%;
float: left;
padding-top: 4px;
margin-left: 0.5em;
margin-right: 0.6em;
}
/*210/1200*/
nav ul {
list-style: none;
padding-left: 2.14%;
}
/*3/140? = 0.125% ändra padding til procent här?*/
nav ul ul {
margin-left: 5%;
}
nav li {
margin-top: 2px;
display: block;
}
nav a {
display: block;
border: 1px solid grey;
padding: 4px;
text-decoration: none;
color: white;
border-radius: 5px 5px 5px 5px;
background-color: #225d66;
}
/*display block gör att länkarna fyller ut hela bredden för kolumen*/
nav a:link {
background-color: #225d66;
}
nav a:hover {
background-color: #22a4b3;
}
nav ul li ul li {
padding-top: 1px;
display: block;
}
#lokalnav a {
background-color: #2e7d87;
}
#lokalnav a:hover {
background-color: #3fa9b5;
}
nav #thisPage:before {
content: "> ";
}
nav #thisPage {
color: yellow;
}
nav #thisSection:before {
content: "> ";
}
nav #thisSection {
color: yellow;
}
.submenu {
cursor: pointer;
display: block;
}
.submenu ul {
display: none;
}
.submenu input {
display: none;
}
.submenu input:checked~ul {
display: block;
}
#media screen and (max-width: 620px) {
nav {
float: none;
width: 100%;
margin-top: -22px;
margin-left: 1px;
}
nav ul li {
display: inline-block;
position: relative;
}
nav a {
text-align: center;
border-radius: 0px 0px 5px 5px;
padding: 7px 12px 7px 12px;
}
#lokalnav {
z-index: 1;
}
nav ul li ul li {
margin-top: 0px;
margin-bottom: 0;
}
nav ul li a:not(:only-child):after {
content: " ?";
padding-left: 6px;
}
#dropdownbtn {
padding-top: 4px;
}
.topnav a {
padding-right: 2px;
}
main {
margin: 2px;
}
header {
height: 170px;
margin-bottom: 0px;
padding-bottom: 0px;
}
#coursenotes {
float: none;
font-size: 11px;
width: 100%;
margin-bottom: -70px;
font-size: 12px;
padding-left: 10px;
}
#content {
float: none;
width: 100%;
}
#coursenotes a:hover {
font-size: 10px;
}
}
#media screen and (max-width:576px) {
header {
background-size: contain;
}
#steps figure {
float: none;
}
}
#media screen and (max-width: 480px) {
nav ul li {
display: block;
width: 100%;
}
}
<nav>
<ul>
<li>Hem</li>
<li><label class="submenu"><a id="dropdownbtn">Ämnen</a><input type="checkbox">
<ul id="lokalnav">
<li>Matte</li>
<li>Svenska</li>
<li>Engelska</li>
<li>NO</li>
<li>Bild</li>
<li>SO</li>
</ul>
</label>
</li>
<li>Mina Inlämningar</li>
<li>Läxhjälp</li>
<li>Kontakt</li>
</ul>
</nav>
Add this css style to media quires max-width: 576px
#lokalnav {
position: relative;
}
How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width without bootstrap, but from scratch?
Here is the fiddlehttps://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img class="navlogo" src="svg/navlogo.svg" alt=""></li>
<li class="right-nav"><span class="medium">KONTAKT</span></li>
<li class="right-nav"><span class="medium">PRIS</span></li>
<li class="right-nav"><span class="medium">GARANTIER</span></li>
<li class="right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>
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: right;
}
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: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
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>
Logo
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Home</li>
<li>
Work
<ul>
<li>Web</li>
<li>Print</li>
</ul>
</li>
<li>Service</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
You should refer to Hanlin Chong's CodePen which utilizes #media queries to handle responsive behavior based on max-width of the screen.
Or start with the basic W3Schools Responsive Navbar tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
You should read about #media rule in CSS3. Here is url Click. There is no other way to do that without bootstrap. Good luck!