How to set underline on hover on navigation links on responsive menu? - javascript

I have coded for underline on hover on the navigation menu, which works well. But when I create a responsive navigation menu, the underline on hover covers the entire width of the block rather than the navigation link, as it does when the browser is greater than 600px.
Here's the site, or you can refer to the below snippet.
Any help is appreciated.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>


I was checking your CSS and the problem is that a tag has the property of display:block which expand the tag, so, the styles applies to the tag itself, no in the text, so, if you want to preserve the space when the display is smaller, you should wrap each a tag in a list item or in a div, and pass it the property of display:block
this is the example using that I said
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
margin: 0;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar li{
list-style:none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a{
display: none;
padding-top: 6px;
}
.navbar .icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive li a {
float;
none;
display: inline;
text-align: center;
margin: 4px;
}
.navbar.responsive li {
float;
none;
text-align: center;
margin: 6px 00px;
}
.navbar.responsive {
align-content: center;
flex-flow:column;
}
.navbar.responsive li a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
<ul class="navbar" id="myNavbar">
i
<li>About</li>
<li>Lindsay</li>
<li>Branding</li>
<li>Photography</li>
<li>Instagram</li>
</ul>


Are you expecting like this
Temporary Solution
I have just added nth-child and given scaling for each link.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
height: 2px;
width:100%;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:nth-child(1):before {
visibility: visible;
-webkit-transform: scaleX(.18);
transform: scaleX(.18);
}
.navbar.responsive a:hover:nth-child(2):before {
visibility: visible;
-webkit-transform: scaleX(.22);
transform: scaleX(.22);
}
.navbar.responsive a:hover:nth-child(3):before {
visibility: visible;
-webkit-transform: scaleX(.25);
transform: scaleX(.25);
}
.navbar.responsive a:hover:nth-child(4):before {
visibility: visible;
-webkit-transform: scaleX(.33);
transform: scaleX(.33);
}
.navbar.responsive a:hover:nth-child(5):before {
visibility: visible;
-webkit-transform: scaleX(.26);
transform: scaleX(.26);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>

Related

How Do I Uncheck A Checkbox When Navigating Backwards Or Forwards Between A Web Page?

I have a responsive hamburger menu made with a checkbox that works without any issues. What I'd like to be able to do is uncheck the checkbox when going backward or forward (navigating between pages). I would like it so that when I use the backward or forward button on a web browser the box is unchecked and the menu disappears.
This is the Javascript that I've tried but have not been able to get working properly:
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward"){
$('checkbox').removeAttribute('checked');
}
If anyone knows of a way to uncheck a checkbox and have it so a hamburger menu doesn't appear when navigating between web pages I'd appreciate you sharing your knowledge. Thank you.
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
$('checkbox').removeAttribute('checked');
}
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media (max-width: 1130px)and (min-width: 280px) {
.responsive-image-container {
display: flex;
flex-direction: column;
text-align: center;
}
img {
width: 85%;
}
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px; font-size: 15px;">
<li style="border-bottom: 1px solid lightgray;">ホーム</li>
<li style="border-bottom: 1px solid lightgray;">ブログ</li>
<li style="border-bottom: 1px solid lightgray;">このサイトについて</li>
<li style="border-bottom: 1px solid lightgray;">参考文献</li>

Transition on navigation bar not working?

I have this navbar but when it opens to show the content, I want it to open smoothly (With Transition) but it won't work.
Here is the example:
/* Google Fonts Import Link */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: #11101d;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.close{
width: 78px;
}
.sidebar .logo-details{
height: 60px;
width: 100%;
display: flex;
align-items: center;
}
.sidebar .logo-details i{
font-size: 30px;
color: #fff;
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
}
.sidebar .logo-details .logo_name{
font-size: 22px;
color: #fff;
font-weight: 600;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name{
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links{
height: 100%;
padding: 30px 0 150px 0;
overflow: auto;
}
.sidebar.close .nav-links{
overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
display: none;
}
.sidebar .nav-links li{
position: relative;
list-style: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
background: #1d1b31;
}
.sidebar .nav-links li .iocn-link{
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link{
display: block
}
.sidebar .nav-links li i{
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow{
transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
display: none;
}
.sidebar .nav-links li a{
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar .nav-links li a .link_name{
font-size: 18px;
font-weight: 400;
color: #fff;
transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: #1d1b31;
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
transition: .5s;
}
.sidebar .nav-links li .sub-menu a{
color: #fff;
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover{
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu{
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank{
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details{
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: #1d1b31;
padding: 12px 0;
transition: all 0.5s ease;
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.sidebar .profile-details .profile-content{
display: flex;
align-items: center;
}
.sidebar .profile-details img{
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: #1d1b31;
transition: all 0.5s ease;
}
.sidebar.close .profile-details img{
padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
color: #fff;
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.sidebar .profile-details .job{
font-size: 12px;
}
.home-section{
position: relative;
background: #E4E9F7;
height: 100vh;
left: 260px;
width: calc(100% - 260px);
transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
left: 78px;
width: calc(100% - 78px);
}
.home-section .home-content{
height: 60px;
display: flex;
align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text{
color: #11101d;
font-size: 35px;
}
.home-section .home-content .bx-menu{
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
#media (max-width: 400px) {
.sidebar.close .nav-links li .sub-menu{
display: none;
}
.sidebar{
width: 78px;
}
.sidebar.close{
width: 0;
}
.home-section{
left: 78px;
width: calc(100% - 78px);
z-index: 100;
}
.sidebar.close ~ .home-section{
width: 100%;
left: 0;
}
}
body {
width: 100%;
margin: 0;
background-color: rgb(221, 221, 221);
}
.nav {
width: 100%;
background-color: rgb(0 88 114);
text-align: center;
padding-bottom: 5px;
}
h1 {
margin: 0 auto;
color:white;
font-family: Tahoma;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" type="text/css" rel="stylesheet">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Codify.net</title>
</head>
<body>
<header>
<div class="nav">
</div>
<div class="sidebar">
<div class="logo-details">
<i class='bx bxl-html5'></i>
<span class="logo_name">Learn HTML5</span>
</div>
<ul class="nav-links">
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-chevron-right-circle' ></i>
<span class="link_name">Let's Start!</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Let's Start!</a></li>
<li>Set-up Environment</li>
<li>How HTML Works</li>
<li>HTML Structure</li>
</ul>
</li>
</div>
<script>let arrow = document.querySelectorAll(".arrow");for (var i = 0; i < arrow.length; i++) {arrow[i].addEventListener("click", (e)=>{let arrowParent = e.target.parentElement.parentElement;arrowParent.classList.toggle("showMenu");});};</script>
</header>
</body>
</html>
As you can see it looks and functions fine but then it needs a smooth transition once the arrow is clicked.
I tried the simple transition: 0.5s; but it does not seem to work.
I was hoping someone could help me out or spot my mistake.

My slide navigation menu does not hide the content that it was sliding over

I tried my best to make sense of the title but for more references, I am giving screenshots below the menu when it slides over the page covering the content the content should be hidden but its not
Before:
https://imgur.com/PTNwfdA
After:
https://imgur.com/B2Iz4IE
Here's the CSS for my navigation:
/* navbar Start*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
#active:checked~.wrapper {
/*left: 0;*/
right: 0;
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 30%;
width: 40%;
border-bottom: 3px solid #000000;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before {
transform: translateY(-8px);
}
.menu-btn:after {
transform: translateY(8px);
}
.close {
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
transition: background .6s;
}
/* closing animation */
#active:checked+.menu-btn span {
transform: scaleX(0);
}
#active:checked+.menu-btn:before {
transform: rotate(45deg);
border-color: #fff;
}
#active:checked+.menu-btn:after {
transform: rotate(-45deg);
border-color: #fff;
}
.wrapper ul {
position: absolute;
top: 60%;
left: 50%;
height: 90%;
transform: translate(-50%, -50%);
list-style: none;
text-align: right;
}
.wrapper ul li {
height: 10%;
margin: 15px 0;
}
.wrapper ul li a {
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
position: absolute;
line-height: 50px;
margin: 5px 30px;
opacity: 0;
transition: all 0.3s ease;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
/*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #4114a1;
}
input[type="checkbox"] {
display: none;
}
.product a img {
display: none;
position: absolute;
left: -400px;
top: -200px;
}
.product a img {
display: none;
}
.product a:hover img {
display: inherit;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
overflow-y: hidden;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#active:checked~.wrapper ul li a {
opacity: 1;
align-items: center;
}
.wrapper ul li a {
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateX(100px);
font-family: 'LemonMilk';
align-items: center;
}
#active:checked~.wrapper ul li a {
transform: none;
transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
/* easeOutBackを緩めた感じ */
transition-delay: .6s;
transform: translateX(-100px);
}
.pages-nav--open {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pages-nav__item {
display: flex;
flex-direction: row;
min-height: 300vh;
}
.pages-nav .pages-nav__item--social {
width: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
transition: transform 1.2s, opacity 1.2s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.pages-nav--open .pages-nav__item--social {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.link {
font-size: 0.85em;
font-weight: bold;
position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}
.link:hover,
.link:focus {
color: #fff;
}
.link--page {
display: block;
color: #cecece;
text-align: center;
}
.link--page:not(.link--faded)::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 50%;
height: 2px;
margin: 5px 0 0 -15px;
background: #fff;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.link--page:hover:before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.link--faded {
color: #4f4f64;
}
.link--faded:hover,
.link--faded:focus {
color: #5c5edc;
}
.link--page.link--faded {
font-size: 0.65em;
}
.link--social {
font-size: 1.5em;
margin: 0 0.75em;
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
#media screen and (max-width: 40em) {
.js .pages-nav {
display: block;
padding: 10px 20px 0 20px;
text-align: left;
}
.pages-nav__item {
width: 100%;
}
.pages-nav__item--small {
display: inline-block;
width: auto;
margin-right: 5px;
}
.pages-nav__item--social {
font-size: 0.9em;
}
.menu-button {
top: 15px;
right: 10px;
left: auto;
}
.info {
font-size: 0.85em;
}
.poster {
margin: 1em;
}
}
/* ///////////////////// navbar end ///////////////////////// */
and here's my css for the page this is on:
.typewritter {
height: 80vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 28%;
animation: typing 4s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
body {
margin: 0px;
}
#container {
/* Center the text in the viewport. */
position: absolute;
display: flex;
margin: auto;
width: 100vw;
height: 80pt;
top: 0;
bottom: 0;
/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
filter: url(#threshold) blur(0.6px);
}
/* Your average text styling */
#text1, #text2 {
position: absolute;
width: 100%;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 80pt;
text-align: center;
user-select: none;
}
If any more info is needed I'll be happy to provide it!

all you need to do is just set a greater z-index to .wrapper also u need to give a z-index to .menu-btn else it would be below the wrapper
this should be your code
.menu-btn{
position: absolute;
z-index: 12;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.wrapper{
position: fixed;
z-index: 10;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}

Hide mobile menu when clicking on a link

I'd like to hide my mobile menu when an anchor link is clicked.
I found this
$(function () {
$('#menu-main li>a').on('click', function (e) {
$( "#menu-toggle" ).click();
});
});
solution which looked promising but I couldn't quite get it to work (I probably did something wrong)
I also tried implementing this solution
function onLinkClick() {
var coll = document.getElementsByClassName("hamburger");
coll.classList.remove("active");
}
but probably did something wrong here as well
My code:
let burger = document.getElementById('burger'),
nav = document.getElementById('main-nav'),
slowmo = document.getElementById('slowmo');
burger.addEventListener('click', function(e){
this.classList.toggle('is-open');
nav.classList.toggle('is-open');
});
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 2000px;
}
#wrap {
scroll-margin-top: 130px;
}
button {
cursor: pointer;
}
.main-nav {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
text-align: center;
background: rgba (0,0,0,0);
opacity: 0;
z-index: -1;
visibility: hidden;
transition: all .375s;
}
.main-nav.is-open {
opacity: 1;
z-index: 1100;
visibility: visible;
}
/* Yellow band effect */
.main-nav::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -15px;
background: #fff;
transform-origin: 0 0;
transform: skew(-14deg) translateX(-120%);
transition: all .275s .1s;
}
.main-nav.is-open::before {
transform: skew(-14deg) translateX(0);
}
/* Skewing effect on menu links */
.main-nav ul {
display: inline-flex;
flex-direction: column;
height: 93%; /* Should be 100%, but we have a notice message :D */
align-items: flex-end;
justify-content: center;
transform: translateX(-18%) skew(-16deg);
}
.main-nav li {
display: block;
margin: .5rem 0;
text-align: right;
transform: skew(16deg);
}
/* Apparition effect on links */
.main-nav button {
opacity: 0;
transform: translateY(-10px);
}
.main-nav.is-open button {
opacity: 1;
transform: translateY(0);
}
.main-nav li:nth-child(1) a {
transition: all 275ms 175ms
}
.main-nav li:nth-child(2) a {
transition: all 275ms 225ms
}
.main-nav li:nth-child(3) a {
transition: all 275ms 275ms
}
.main-nav li:nth-child(4) a {
transition: all 275ms 325ms
}
.main-nav li:nth-child(5) a {
transition: all 275ms 375ms
}
/* Decoration */
.main-nav ul,
.main-nav li {
list-style: none;
padding: 0;
}
.main-nav button {
display: block;
padding: 12px 0;
color: #5A3B5D;
font-size: 1.4em;
text-decoration: none;
font-weight: bold;
}
/* Burger Style: #see: https://codepen.io/CreativeJuiz/full/oMZNXy */
.open-main-nav {
position: absolute;
top: 15px;
padding-top: 20px;
right: 15px;
z-index: 1200;
background: none;
border: 0;
cursor: pointer;
}
.open-main-nav:focus {
outline: none;
}
#burger {
position: fixed;
float: right;
visibility: hidden;
}
.burger {
position: relative;
display: block;
width: 28px;
height: 4px;
margin: 0 auto;
background: #fff;
transform: skew(5deg);
transition: all .275s;
margin-top: 1vw;
}
.burger:after,
.burger:before {
content: '';
display: block;
height: 100%;
background: #fff;
transition: all .275s;
}
#burger.shrink .burger {
background: #000 !important;
margin-top: 0.7vw;
}
#burger.shrink .burger:after {
background: #000 !important;
}
#burger.shrink .burger:before {
background: #000 !important;
}
.burger:after {
transform: translateY(-12px) translateX(-2px) skew(-20deg);
}
.burger:before {
transform: translateY(-16px) skew(-10deg);
}
/* Toggle State part */
.is-open .burger {
transform: skew(5deg) translateY(-8px) rotate(-45deg);
}
.is-open .burger:before {
transform: translateY(0px) skew(-10deg) rotate(75deg);
}
.is-open .burger:after {
transform: translateY(-12px) translateX(10px) skew(-20deg);
opacity: 0;
}
.is-open .burger, .is-open .burger:after, .is-open .burger:before {
background: #000;
}
/* MENU Text part */
.burger-text {
display: block;
font-size: .675rem;
letter-spacing: .05em;
margin-top: .5em;
text-transform: uppercase;
font-weight: 500;
text-align: center;
color: #fff;
}
#burger.shrink .burger-text {
color: #000;
}
.is-open .burger-text {
color: #000;
}
.container {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
overflow: hidden;
}
/* Notice */
.notice {
position: absolute;
bottom: -15px;
left: 0; right: 0;
padding: 20px;
background: #F2F2F2;
color: #5A3B5D;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
z-index: 100;
text-align: center;
}
.notice strong {
font-weight: 700;
}
.notice button {
padding: 2px 3px;
background: #FEDC2A;
text-decoration: none;
}
h1 {
text-align: center;
font-size: 8vw;
top: 0.5em;
position: relative;
}
h2 {
text-align: center;
font-weight: 300;
margin-top: 3em;
font-size: 1rem;
}
ul {
list-style: none;
text-align: center;
}
ul li {
display: inline-table;
margin-left: -1.5em;
padding-left: -1.5em;
}
#wrap {
scroll-margin-top: 80px;
}
#burger {
visibility: visible;
}
.navb {
position: relative;
top: 50px;
color: #87CEEB !important;
font-size: 0.6rem;
visibility: hidden;
}
.navb:hover {
color: #fff !important;
}
#navbar {
text-align: center;
width: 100%;
color: white;
z-index: 999;
transition: 0.3s;
line-height: 18px;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
.selectSection {
grid-template-columns: repeat(3, 1fr);
justify-content: center;
text-align: center;
}
.selectSection button {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
background-color: rgba(0, 0, 0, 0) !important;
display: inline-block;
padding: 15px 20px;
position: relative;
border: none;
border-bottom: 1px;
outline: none;
}
.activenav {
color: black !important;
}
.mobilecontainer {
visibility: visible !important;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="assets/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="assets/script.js" type="text/javascript"></script>-->
</head>
<!-- begin snippet: js hide: false -->
<body>
<nav id="navwrapper">
<button id="burger" class="open-main-nav">
<span class="burger"></span>
<span class="burger-text">Menu</span>
</button>
<div class="mobilecontainer navbar navbar-dark bg-primary navbar-fixed-top selectSection">
<div class="main-nav" id="main-nav">
<ul>
<li class="nav-item"><button onclick="location.href='#wrap'" class="activenav mobilenavb">content1</button></li>
</ul>
</div>
</div>
</nav>
<div id="wrap" class="contentSection wrapper">
<div>
<h1>content1</h1>
<h2>lorem ipsum</h2>
</div>
Note that I'm just a beginner and haven't played much around in JS so it's very easy for me to overlook something or just simply doing it wrong.

Based on your code, you've added Jquery library. Simply adding click listener for every nav-item class.
For example:
$(".nav-item").click(function(){
burger.click();
})
let burger = document.getElementById('burger'),
nav = document.getElementById('main-nav'),
slowmo = document.getElementById('slowmo');
burger.addEventListener('click', function(e){
this.classList.toggle('is-open');
nav.classList.toggle('is-open');
});
$(".nav-item").click(function(){
burger.click();
})
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 2000px;
}
#wrap {
scroll-margin-top: 130px;
}
button {
cursor: pointer;
}
.main-nav {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
text-align: center;
background: rgba (0,0,0,0);
opacity: 0;
z-index: -1;
visibility: hidden;
transition: all .375s;
}
.main-nav.is-open {
opacity: 1;
z-index: 1100;
visibility: visible;
}
/* Yellow band effect */
.main-nav::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -15px;
background: #fff;
transform-origin: 0 0;
transform: skew(-14deg) translateX(-120%);
transition: all .275s .1s;
}
.main-nav.is-open::before {
transform: skew(-14deg) translateX(0);
}
/* Skewing effect on menu links */
.main-nav ul {
display: inline-flex;
flex-direction: column;
height: 93%; /* Should be 100%, but we have a notice message :D */
align-items: flex-end;
justify-content: center;
transform: translateX(-18%) skew(-16deg);
}
.main-nav li {
display: block;
margin: .5rem 0;
text-align: right;
transform: skew(16deg);
}
/* Apparition effect on links */
.main-nav button {
opacity: 0;
transform: translateY(-10px);
}
.main-nav.is-open button {
opacity: 1;
transform: translateY(0);
}
.main-nav li:nth-child(1) a {
transition: all 275ms 175ms
}
.main-nav li:nth-child(2) a {
transition: all 275ms 225ms
}
.main-nav li:nth-child(3) a {
transition: all 275ms 275ms
}
.main-nav li:nth-child(4) a {
transition: all 275ms 325ms
}
.main-nav li:nth-child(5) a {
transition: all 275ms 375ms
}
/* Decoration */
.main-nav ul,
.main-nav li {
list-style: none;
padding: 0;
}
.main-nav button {
display: block;
padding: 12px 0;
color: #5A3B5D;
font-size: 1.4em;
text-decoration: none;
font-weight: bold;
}
/* Burger Style: #see: https://codepen.io/CreativeJuiz/full/oMZNXy */
.open-main-nav {
position: absolute;
top: 15px;
padding-top: 20px;
right: 15px;
z-index: 1200;
background: none;
border: 0;
cursor: pointer;
}
.open-main-nav:focus {
outline: none;
}
#burger {
position: fixed;
float: right;
visibility: hidden;
}
.burger {
position: relative;
display: block;
width: 28px;
height: 4px;
margin: 0 auto;
background: #fff;
transform: skew(5deg);
transition: all .275s;
margin-top: 1vw;
}
.burger:after,
.burger:before {
content: '';
display: block;
height: 100%;
background: #fff;
transition: all .275s;
}
#burger.shrink .burger {
background: #000 !important;
margin-top: 0.7vw;
}
#burger.shrink .burger:after {
background: #000 !important;
}
#burger.shrink .burger:before {
background: #000 !important;
}
.burger:after {
transform: translateY(-12px) translateX(-2px) skew(-20deg);
}
.burger:before {
transform: translateY(-16px) skew(-10deg);
}
/* Toggle State part */
.is-open .burger {
transform: skew(5deg) translateY(-8px) rotate(-45deg);
}
.is-open .burger:before {
transform: translateY(0px) skew(-10deg) rotate(75deg);
}
.is-open .burger:after {
transform: translateY(-12px) translateX(10px) skew(-20deg);
opacity: 0;
}
.is-open .burger, .is-open .burger:after, .is-open .burger:before {
background: #000;
}
/* MENU Text part */
.burger-text {
display: block;
font-size: .675rem;
letter-spacing: .05em;
margin-top: .5em;
text-transform: uppercase;
font-weight: 500;
text-align: center;
color: #fff;
}
#burger.shrink .burger-text {
color: #000;
}
.is-open .burger-text {
color: #000;
}
.container {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
overflow: hidden;
}
/* Notice */
.notice {
position: absolute;
bottom: -15px;
left: 0; right: 0;
padding: 20px;
background: #F2F2F2;
color: #5A3B5D;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
z-index: 100;
text-align: center;
}
.notice strong {
font-weight: 700;
}
.notice button {
padding: 2px 3px;
background: #FEDC2A;
text-decoration: none;
}
h1 {
text-align: center;
font-size: 8vw;
top: 0.5em;
position: relative;
}
h2 {
text-align: center;
font-weight: 300;
margin-top: 3em;
font-size: 1rem;
}
ul {
list-style: none;
text-align: center;
}
ul li {
display: inline-table;
margin-left: -1.5em;
padding-left: -1.5em;
}
#wrap {
scroll-margin-top: 80px;
}
#burger {
visibility: visible;
}
.navb {
position: relative;
top: 50px;
color: #87CEEB !important;
font-size: 0.6rem;
visibility: hidden;
}
.navb:hover {
color: #fff !important;
}
#navbar {
text-align: center;
width: 100%;
color: white;
z-index: 999;
transition: 0.3s;
line-height: 18px;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
.selectSection {
grid-template-columns: repeat(3, 1fr);
justify-content: center;
text-align: center;
}
.selectSection button {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
background-color: rgba(0, 0, 0, 0) !important;
display: inline-block;
padding: 15px 20px;
position: relative;
border: none;
border-bottom: 1px;
outline: none;
}
.activenav {
color: black !important;
}
.mobilecontainer {
visibility: visible !important;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="assets/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="assets/script.js" type="text/javascript"></script>-->
</head>
<!-- begin snippet: js hide: false -->
<body>
<nav id="navwrapper">
<button id="burger" class="open-main-nav">
<span class="burger"></span>
<span class="burger-text">Menu</span>
</button>
<div class="mobilecontainer navbar navbar-dark bg-primary navbar-fixed-top selectSection">
<div class="main-nav" id="main-nav">
<ul>
<li class="nav-item"><button onclick="location.href='#wrap'" class="activenav mobilenavb">content1</button></li>
</ul>
</div>
</div>
</nav>
<div id="wrap" class="contentSection wrapper">
<div>
<h1>content1</h1>
<h2>lorem ipsum</h2>
</div>

Links jumping on hover

I've been looking at my CSS too long and need another set of eyes. I'm having trouble with a couple things. First: I can't figure out why my links are jumping on hover. It's supposed to be a mobile responsive hamburger to horizontal nav bar but I'm fairly new to this and have played around with too many parts of the code to know what I'm doing or not doing. Any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
position: fixed;
height: 4em;
line-height: 4em;
display: inline-block;
padding-left: 1em;
border-bottom: .1em solid #dddddd;
}
h2 {
font-size: 2.1em;
}
p {
font-size: 10em;
color: white;
padding-top: 1em;
}
#media only screen and (min-width: 319px) {
.menu {
z-index: 1;
display: none;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #f1f1f1;
position: fixed;
text-align: center;
margin-top: 3.3em;
color: black;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
border-top: #dddddd 1px solid;
}
.menu li {
display: block;
padding: 1em 0 1em 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #585858;
padding: 1em 0 1em 0;
cursor: crosshair;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: black;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: white;
}
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: -47px;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: cell;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: darkred;
border-radius: 7px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
}
#media only screen and (min-width : 768px) {
h2 {
z-index: 1000000;
font-size: 1.5em;
}
p {
font-size: 20em;
color: white;
padding-top: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
margin-left: 20px;
margin-right: 8px;
margin-top: -10px;
}
li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu {
display: block;
position: absolute;
right: 0px;
font-size: .9em;
width: 100%;
padding-right: 15px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255, 255, 255, 0);
}
.menu ul {
border-bottom: 0;
border-top: 0;
}
.menu li {
border-bottom: 0;
border-top: 0;
}
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
.menu ul li a:hover {
color: white;
}
#nav-icon4 {
display: none;
}
}
#media only screen and (min-width : 922px) {
li {
margin-left: 55px;
margin-right: 18px;
}
.menu {
padding-right: 1px;
}
}
#media only screen and (min-width : 1400px) {
header {
height: 5em;
line-height: 5em;
}
h2 {
font-size: 2.6em;
}
li {
margin-left: 55px;
margin-right: 30px;
}
.menu {
padding-right: 1px;
font-size: 1.2em;
}
}
</style>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
</script>
</html>

go to line 237 and change this:
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
to this
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 0em;
padding-left: 0em;
}

Categories

Resources