I have a menu based on the Webdevkit Responsive menu.
The menu is controlled by a Jquery and I am trying to modify the code so that on the mobile menu when the Hamburger icon is first clicked it changes to an 'X',
then when an item on the mobile menu is clicked the menu is hidden and the 'X' changes back to the Hamburger symbol, and when the hanburger symbol is pclicked the process is repeated.
I have read several articles on this and believe I need to add a class to the HREF, this I have done but have failed to work out the correct(jquery) statement to achieve the above.
/** code by webdevtrick ( https://webdevtrick.com ) **/
(function($) {
$(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
/* create mobile dropdown menu */
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
$('a.mmenu').click(function() {
$('#nav-toggle').toggleClass('active');
$('.nav-mobile').toggleClass('hide');
});
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
});
})(jQuery);
<style type="text/css">
body {
margin: 0;
padding: 0;
}
{
font-family: 'Righteous', cursive;
}
.nav-bar {
height: 70px;
background: #262626;
}
.brand {
display: none;
}
.brand a img {
max-height: 70px;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
/* position navbar items */
nav {
float: center ;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2ab1ce;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
padding-left: 25%;
}
nav ul li ul li a {
padding-left: 30%;
}
.nav-dropdown {
position: static;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
display: block;
}
.brand a img {
max-height: 60px;
margin-top: 5px;
display: block;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Dropdown nav-bar Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="media/idea3.css">
</head>
<body>
<section class="nav-bar">
<div class="nav-container">
<div class="brand">
MENU
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a class="mmenu" href="#">Home</a>
</li>
<li>
<a class="mmenu" href="#">News</a>
</li>
<li>
<a class="mmenu" href="#">Projects</a>
<ul class="nav-dropdown">
<li>
<a class="mmenu" href="#">Project 1</a>
</li>
<li>
<a class="mmenu" href="#">Project 2</a>
</li>
<li>
<a class="mmenu" href="#">Project3</a>
</li>
</ul>
</li>
<li>
<li>
<a clas="mmenu" href="#">About</a>
</li>
</ul>
</nav>
</div>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="media/idea4.js"></script>
</body>
</html>
Any help or ideas on the way forward would be appreciated.
<style type="text/css">
body {
margin: 0;
padding: 0;
}
{
font-family: 'Righteous', cursive;
}
.nav-bar {
height: 70px;
background: #262626;
}
.brand {
display: none;
}
.brand a img {
max-height: 70px;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
/* position navbar items */
nav {
float: center ;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2ab1ce;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
padding-left: 25%;
}
nav ul li ul li a {
padding-left: 30%;
}
.nav-dropdown {
position: static;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
display: block;
}
.brand a img {
max-height: 60px;
margin-top: 5px;
display: block;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Dropdown nav-bar Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="media/idea3.css">
</head>
<body>
<section class="nav-bar">
<div class="nav-container">
<div class="brand">
MENU
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a class="mmenu" href="#">Home</a>
</li>
<li>
<a class="mmenu" href="#">News</a>
</li>
<li>
<a class="mmenu" href="#">Projects</a>
<ul class="nav-dropdown">
<li>
<a class="mmenu" href="#">Project 1</a>
</li>
<li>
<a class="mmenu" href="#">Project 2</a>
</li>
<li>
<a class="mmenu" href="#">Project3</a>
</li>
</ul>
</li>
<li>
<li>
<a clas="mmenu" href="#">About</a>
</li>
</ul>
</nav>
</div>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="media/idea4.js"></script>
</body>
</html>
/** code by webdevtrick ( https://webdevtrick.com ) **/
(function($) {
$(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
/* create mobile dropdown menu */
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
$('a.mmenu').click(function() {
$('#nav-toggle').toggleClass('active');
$('.nav-mobile').toggleClass('hide');
});
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
});
})(jQuery);
I removed the grandparents of the clicked elements as it was already changing the hamburger on click
$('a.mmenu').click(function() {
$('#nav-toggle').toggleClass('active');
$(this).parent().parent().hide()
/** code by webdevtrick ( https://webdevtrick.com ) **/
(function($) {
$(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
/* create mobile dropdown menu */
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
$('a.mmenu').click(function() {
$('#nav-toggle').toggleClass('active');
/* edited here*/
$(this).parent().parent().hide()
});
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
});
})(jQuery);
body {
margin: 0;
padding: 0;
}
{
font-family: 'Righteous', cursive;
}
.nav-bar {
height: 70px;
background: #262626;
}
.brand {
display: none;
}
.brand a img {
max-height: 70px;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
/* position navbar items */
nav {
float: center ;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2ab1ce;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
padding-left: 25%;
}
nav ul li ul li a {
padding-left: 30%;
}
.nav-dropdown {
position: static;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
display: block;
}
.brand a img {
max-height: 60px;
margin-top: 5px;
display: block;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Dropdown nav-bar Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="media/idea3.css">
</head>
<body>
<section class="nav-bar">
<div class="nav-container">
<div class="brand">
MENU
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a class="mmenu" href="#">Home</a>
</li>
<li>
<a class="mmenu" href="#">News</a>
</li>
<li>
<a class="mmenu" href="#">Projects</a>
<ul class="nav-dropdown">
<li>
<a class="mmenu" href="#">Project 1</a>
</li>
<li>
<a class="mmenu" href="#">Project 2</a>
</li>
<li>
<a class="mmenu" href="#">Project3</a>
</li>
</ul>
</li>
<li>
<li>
<a clas="mmenu" href="#">About</a>
</li>
</ul>
</nav>
</div>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="media/idea4.js"></script>
</body>
</html>
By changing the HREF on the dropdown in the HTML to ditem.
Add below to Jquery
$('a.ditem').click(function() {
$('#nav-toggle').toggleClass('active');
$('nav ul').hide();
Menu now functions correctly
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 this navbar setup on my page, I would like for it to work as normal on a tablet or desktop and then when loaded on a mobile device for the navbar to be condesnsed into a pressable hamburger menu.
What would be the best way to tackle this?
HTML and CSS Code are as follows
HTML
<h1 class='logo'><a href='#'>Website Logo</a></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
</ul>
</nav>
</header>
CSS
header{
display: flex;
justify-content: space-around;
width: 100%;
background: #616880;
height: 70px;
}
.sticky {
position: fixed;
top:0;
width: 100%;
}
.logo{
margin: 15px 0 0 0;
}
nav {
margin: 25px;
}
ul li{
list-style: none;
display: inline;
}
ul li a,
h1 a{
text-decoration: none;
color: #fff;
padding: 5px;
}
Solution 1 Using pure CSS
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
Your Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
</ul>
</header>
Solution 2 Using JS and CSS
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
#charset "UTF-8";
body{
margin:0;
}
.navigation {
height: 70px;
background: #6d7993;
font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;
opacity: 0.88;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #6d7993;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #4b5569;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #6d7993;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Eric Samson
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
GIS Projects
</li>
<li>
R Studio
</li>
<li>
Contact
</li>
</ul>
</ul>
</nav>
</div>
</section>
NOTE: View Snippet in full screen
You can use javascript. For better understanding, you can look at this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav Also you can use jquery too.
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
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;
}
I am having problem in my responsive menu. When i click the menu navigation, all the list is show horizontal. But i want it to be vertical which means that only 1 list in 1 line. Please help me, i am new to programming
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
float: right;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive li {
float: left;
display: block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
float: left;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
height: 85px;
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
}
.menu ul li {
list-style: none;
float: left;
width: auto;
margin-right: -4px;
}
.menu ul li a {
display: inline-block;
height: 85px;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
<li class="icon">
☰
</li>
</ul>
Set width of li to 100%
ul.topnav.responsive li {
width: 100%;
}
ul.topnav.responsive{
padding-left:0;
}
Fixed Your snippet
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
float: right;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive li {
float: left;
display: block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
float: left;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
height: 85px;
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
}
.menu ul li {
list-style: none;
float: left;
width: auto;
margin-right: -4px;
}
.menu ul li a {
display: inline-block;
height: 85px;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
ul.topnav.responsive li {
width: 100%;
display: inline-block;
}
ul.topnav.responsive{
padding-left:0;
}
ul.topnav.responsive li.icon {
width: auto;
}
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
<li class="icon">
☰
</li>
</ul>
You can try clearing each list item .menu ul li adding clear:both; but you really should pull the nav trigger out of the list of menu items so that you can limit the size of your ul more easily and negate the use of clears entirely.
Try and HTML architecture like this:
<div class="menu-wrap">
<a class="menu-trigger" href="#" onclick="">☰</a>
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
</ul>
</div>
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
float: right;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive li {
display: block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
/* height: 85px;*/
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
}
.menu ul li {
list-style: none;
width: auto;
margin-right: -4px;
}
.menu ul li a {
display: inline-block;
height: 85px;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
<li class="icon">
☰
</li>
</ul>
<style>
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
background: none;
display: inline-block;
width: auto;
}
.menu ul.topnav.responsive li {
float: none;
width:100%;
display: inline-block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
}
.menu ul.topnav.responsive li.icon a {
float:right;
background: #016fb9;
}
.menu ul.topnav.responsive li.icon a:hover {
color:#fff;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
height: auto;
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
display:inline-block;
width:100%;
float:none;
padding-left:0;
position:relative;
}
.menu ul li {
list-style: none;
float: none;
width: auto;
}
.menu ul li a {
display: inline-block;
height: auto;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
</style>
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home </li>
<li>about </li>
<li>Services </li>
<li>Register </li>
<li class="icon"> ☰ </li>
</ul>
please find the same example in [js fiddle][https://jsfiddle.net/yhq1pzhj/]1
<script>
function openNav() {
$("#mySidenav").css('width', '150px');
}
function closeNav() {
$("#mySidenav").css('width', '0px');
}
</script>
<div>
<div id="mySidenav" class="sidenav">
X
home
about
Services
Register
</div>
<i class="fa fa-bars" style="font-size:32px;cursor:pointer;padding-left: 35px;padding-top: 15px;" onclick="javascript:openNav()"></i></div>
======css======
.sidenav {
/* height: 100%; */
width: 0;
position: fixed;
z-index: 1;
/* top: 0;
left: 0; */
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}