Why does my navbar appear on top of scrollbar?

Why does my navbar appear on top of scrollbar? - javascript

I'm trying to create my first website with parallax effect. I noticed a problem with my fixed top navbar - it appears on top of the scrollbar and overflow hidden doesn't hide it. I've tried to put it into .main-container and it kinda solves my problem: it's not on the top of scrollbar anymore, however, it stops being top fixed. What causes this problem? How can I fix it?
HTML:
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg" id="top-navbar">
<a class="navbar-brand" href="#">brand</a>
<button class="navbar-toggler" id='nav-icon' type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href='#1'>link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#2'>link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#3'>link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#4'>link 4</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mr-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">link</a>
<a class="dropdown-item" href="#">link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class='main-container'>
<div class="parallax-container">
<div>
<h1>title</h1>
</div>
<a href="#1" id='main-anchor'>
<i class="large material-icons" style="font-size: 5rem" id='goto-icon'>
keyboard_arrow_down
</i>
</a>
</div>
<div id="wrapper" class='content-container'>
<div id="page-content" class="page content">
<span class="anchor" id="1"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="2"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="3"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="4"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
</div>
</div>
</div>
</body>
SCSS
// COLORS
$darker: #212529;
$dark: #35383C;
$gray: #605F5E;
$greenish: #0F5158;
$lightgreen: #21686E;
$blue: #7FA5A6;
$lightblue: #96B5B6;
$alabaster: #F1EBE1;
$gainsboro: #CEE0DC;
// SITE
body {
font-family: sans-serif;
background-color: $darker;
scroll-behavior: smooth;
}
.main-container {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
background-color: $darker;
a {
&:link,
&:visited,
&:hover,
&:active {
color: white;
}
}
}
.content-container {
position: relative;
display: block;
z-index: 1;
background-color: $darker;
min-height: 100vh;
}
.content {
margin: 0 auto;
padding: 75px 0;
}
.parallax-container {
color: white;
left: -9px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
position: relative;
z-index: -1;
height: 100vh;
width: 101vw;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
// NAVBAR
#top-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
font-size: 1rem;
z-index: 30;
line-height: 150%;
background-color: rgba(33, 37, 41, 0.1);
padding: 0 2.5vw;
transition: transform 1s .3s ease;
box-shadow: 0 1px 50px -28px $blue;
&.dark {
background: $darker;
}
&.dark-show {
background: $darker;
}
&.scrollUp {
transform: translateY(-100%);
}
* {
color: #bbccdd !important;
font-weight: 500;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: 600;
padding: 0;
}
.nav-item {
text-transform: uppercase;
padding: 0 8px;
cursor: pointer;
// &:hover:not(.dropdown) {
// background-color: rgba(33, 37, 41, 1);
// }
a:hover {
color: white !important;
}
}
.nav-link {
margin: 10px 0;
&.active {
color: white !important;
border-bottom: 1px solid white;
}
}
.dropdown-menu {
border-color: $blue;
line-height: 2rem;
background-color: rgba(0, 0, 0, 0.1);
.dropdown-divider {
margin: 0;
border-top: 2px solid black;
}
.dropdown-item:hover {
color: white;
background-color: rgba(33, 37, 41, 0.1);
}
}
.navbar-toggler {
color: $blue;
}
}
// HAMBURGER
#nav-icon {
width: 30px;
height: 30px;
position: relative;
margin: 0;
-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: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: $blue;
border-radius: 3px;
opacity: 1;
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-icon span:nth-child(1) {
top: 1px;
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
top: 13px;
}
#nav-icon span:nth-child(4) {
bottom: 0px;
}
#nav-icon.open span:nth-child(1) {
top: 15px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 15px;
width: 0%;
left: 50%;
}
// CONTENT
#page-content {
height: 100vh !important;
padding: 15vh 10vw 5vh 10vw;
margin: 0;
}
.anchor {
display: block;
height: 15vh;
margin-top: -15vh;
visibility: hidden;
}
// MEDIA QUERIES
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#sidebar {
display: none;
}
#page-content {
margin: 0;
}
}
JS:
$(document).ready(function() {
$('#sidebar').css('transform', 'translateX(200px)')
$('#nav-icon').click(function() {
// $(this).toggleClass('open');
$('#top-navbar').toggleClass('dark-show');
});
$('.main-container').scroll(function() {
let pageHeight = $('.main-container').height();
$('#top-navbar').toggleClass('dark', $(this).scrollTop() > pageHeight);
$('section').each(function(i) {
var position = $(document).scrollTop();
var header = $('#top-navbar').outerHeight();
if ($(this).position().top <= (position + header)) {
var top = $(this).position().top;
console.log($(this).position().top <= (position + header));
$(".nav-link.active").removeClass('active');
$(".nav-link").eq(i).addClass('active');
}
})
});
$('.nav-link').on('click', function() {
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
let width = $(window).width();
let height = $(window).height();
if (height > width && height < 1024) {
let position = $('#page-content').scrollTop();
$('.main-container').scroll(function() {
let scroll = $('.main-container').scrollTop();
if (scroll > position) {
$('#top-navbar').addClass('scrollUp');
} else {
$('#top-navbar').removeClass('scrollUp');
}
position = scroll;
});
}
Link to jsfiddle: https://jsfiddle.net/strzesia/fhqok4ym/19/

You can use following css for navbar
.nav{
position:absolute;
left:0;
top:0;
}

I had the same problem while I was using a Bootstrap template from a teacher. I found out the problem was this line:
overflow-x: hidden;
I just removed and it solved the problem.

Related

how to the make animation happen at the same time?

Hi I have created a collapsable sidebar the expanding animation works fine I mean as you can see when you expand the sidebar it goes smoothly but the problem comes when I am collapsing the sidebar like first the dark blue chevron comes and sticks to the left side and then the sidebar collapses with a jerk.
So can anyone tell me why its happening? and how can I correct it make the sidebar and the icon go at the same time.
Help is highly appreciated!
let expandIcon = document.querySelector('.epnd-clpse-icon')
expandIcon.addEventListener('click', function() {
$('.sidebar-container').toggleClass('sidebar-container-clpse')
$('.epnd-clpse-icon').toggleClass('epnd-clpse-icon-trn')
console.log("I am clicked")
})
.sidebar-container {
background: #ccc;
}
.epnd-clpse-icon {
background: white;
color: white;
}
a {
text-decoration: none;
}
.sidebar-icon i {
color: #06d6a0;
width: 30px;
}
ul {
padding-left: 0;
}
.sidebar-container {
width: 100%;
max-width: 15%;
min-width: 250px;
transition: all 0.5s linear;
position: relative;
border-left: 20px solid var(--primary-light);
overflow-x: hidden;
}
.sidebar-container-clpse {
min-width: 80px !important;
width: 80px !important;
overflow-x: hidden;
transition: all 0.5s linear;
}
.epnd-clpse-icon {
position: absolute;
/* bottom: 100px;
left: 10px; */
top: 50%;
right: -10px;
transition: all 0.5s linear;
cursor: pointer;
background-color: #001846;
padding: 0.8rem;
border-radius: 10px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.epnd-clpse-icon-trn {
/* transform: rotateY(180deg); */
transition: all 0.5s linear;
left: 0px;
}
.sidebar .nav-link {
display: flex !important;
padding: 0.6rem 1rem;
align-items: center;
}
.sidebar ul li {
position: relative;
width: 100%;
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="sidebar-container bg-primary-ex-lgt">
<div class="sidebar min-100-vh py-5 d-flex flex-column justify-content-between">
<ul class="dash-links-icon">
<div class="dash-res-close-icon px-2 mb-5">
<i class="fa-solid fa-chevron-right"></i>
</div>
<li class="links-icon my-2 <?php if($page=='home'){echo 'sdbr-active';}?>">
<a class="nav-link" href="user-dashboard.php">
<span class="sidebar-icon">
<i class="fa-solid fa-house"></i>
</span>
<span class="sidebar-text">Dashboard</span>
</a>
</li>
<li class="links-icon my-2 <?php if($page=='quiz'){echo 'sdbr-active';}?>">
<a class="nav-link" href="quiz.php">
<span class="sidebar-icon">
<i class="fa-solid fa-lightbulb"></i>
</span>
<span class="sidebar-text">Quiz</span>
</a>
</li>
<li class="links-icon my-2">
<a class="nav-link" href="#">
<span class="sidebar-icon">
<i class="fa-solid fa-book"></i>
</span>
<span class="sidebar-text">Blog</span>
</a>
</li>
</ul>
<div class="epnd-clpse-icon">
<i class="fa-solid fa-chevron-right"></i>
</div>
</div>
</div>

In your JavaScript you add the class epnd-clpse-icon-trn. Which adds a left:0px;
.epnd-clpse-icon-trn{
/* transform: rotateY(180deg); */
transition: all 0.5s linear;
left: 0px;
}
Because the original element does not have a left: property, CSS cannot compute a transition of the value and thus will 'pop' the element to the left.
How to fix:
To fix this, you'll have to either position the original element by using left: so CSS can calculate it's position transition.
Alternatively, position the element position:absolute within it's parent element. This way, if you move the parent, the element will shift accordingly. In your code, you've already done this, so changing the CSS related to .epnd-clpse-icon-trn would be sufficient:
.epnd-clpse-icon-trn {
/* transform: rotateY(180deg); */
// transition: all 0.5s linear;
// left: 0px;
}
Ironically, by removing the styling related to .epnd-clpse-icon-trn, you'll do exactly what you're trying to manifest.

Hamburger menu z-index issue

I made a hamburger menu for the mobile responsive mode of my website and the menu works but because it's layered above all other components I am not able to click on buttons or select anything, this happens even when the hamburger menu is closed. Is it possible to change the z-index only when the hamburger menu is open?
Navbar component
The problem is with the nav-menu div
function Topbar() {
const timeout = () => {
setTimeout(() => {
if (window.location.pathname === '/') {
uncheckAll();
}
}, 600);
};
function check(checked = true) {
const checkboxes = document.querySelectorAll('input.checkbox');
checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
}
function uncheckAll() {
check(false);
}
return (
<div className="nav">
<div className="navbar">
<div className="menu">
<div className="label">Navbar</div>
<div className="spacer"></div>
<div className="item">
<span>
<a href="#Intro" className="link">
HOME
</a>
</span>
</div>
<div className="item">
<span>
<a href="#About" className="link">
About
</a>
</span>
</div>
<div className="item">
<span>
<a href="#Projects" className="link">
PROJECTS
</a>
</span>
</div>
<div className="item">
<span>
<a href="#Contact" className="link">
CONTACT
</a>
</span>
</div>
</div>
</div>
<div className="nav-menu">
<div id="menuToggle">
<input type="checkbox" className="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>
<a href="#Intro" className="link" onClick={timeout}>
Home
</a>
</li>
<li>
<a href="#About" className="link" onClick={timeout}>
About
</a>
</li>
<li>
<a href="#Projects" className="link" onClick={timeout}>
Projects
</a>
</li>
<li>
<a href="#Contact" className="link" onClick={timeout}>
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
);
}
export default Topbar;
SASS
#media screen and (max-width: 619px) {
.nav .navbar {
display: none;
}
.nav .nav-menu {
display: block;
}
.nav .nav-menu #menuToggle {
display: flex;
-webkit-tap-highlight-color: transparent;
-moz-tap-highlight-color: transparent;
-o-tap-highlight-color: transparent;
}
}
ul {
padding: 0;
list-style-type: none;
}
#menuToggle {
flex-direction: column;
-webkit-user-select: none;
user-select: none;
position: fixed;
top: 15px;
left: 15px;
display: none;
min-width: 85%;
min-height: 100%;
z-index: 10000;
animation: moveRight ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.nav-menu {
height: 45px;
width: 60px;
background-color: rgba(128, 128, 128, 0.315);
z-index: 2;
position: fixed;
top: 0;
}
#menuToggle input {
display: flex;
width: 40px;
height: 32px;
position: absolute;
cursor: pointer;
opacity: 0;
z-index: 10000;
}
#menuToggle span {
display: flex;
width: 29px;
height: 2px;
margin-bottom: 5px;
position: relative;
background: #ffffff;
border-radius: 3px;
z-index: 10000;
transform-origin: 5px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-3px, -1px);
background: white;
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 7px;
width: 85%;
box-shadow: 0 0 10px rgb(56, 56, 56);
height: 100%;
margin: -50px 0 0 -50px;
padding: 50px;
background-color: rgba(56, 56, 56, 0.989);
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding-left: 20px;
padding-bottom: 10px;
transition-delay: 2s;
}
#menu li a {
text-decoration: none;
color: white;
font-size: 30px;
font-family: 'Roboto Sans', sans-serif;
font-weight: 500;
font-style: normal;
}
#menuToggle input:checked~ul {
transform: none;
}
Working example: https://codesandbox.io/s/hamburger-menu-w456br?file=/src/App.jsx

some pointer-event css property can fix this....
here is the solution.... see it and ask if u need help

Uncaught TypeError cannot read property 'classlist' of null

I keep reading the other possible duplicates of this question but I still don't find the solution needed for me to finish this. So, I downloaded a CSS File that contains a Hamburger for all widths, however their class names conflicted with Bootstrap's Nav classes, so I changed the SCSS file and CSS to make it work, then changing also the names in the .js file to avoid errors.
However, it seems like the error is still here and won't go away . This time, the menu list is hidden in the hamburger, however the hamburger is not working. Here's the code for all things affected.
(function() {
var hamburger = {
naviToggle: document.querySelector('.navi-toggle'),
navi: document.querySelector('navi'),
doToggle: function(e) {
e.preventDefault();
this.naviToggle.classList.toggle('expanded');
this.navi.classList.toggle('expanded');
}
};
hamburger.naviToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
}());
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
*:focus {
outline: none; }
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif; }
body {
background: none;
color: inherit;
font: inherit; }
a {
color: inherit;
cursor: pointer;
text-decoration: none; }
a:hover {
opacity: 0.8; }
/* nav toggle */
.navi-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2; }
.navi-toggle:hover {
opacity: 0.8; }
.navi-toggle .navi-toggle-bar,
.navi-toggle .navi-toggle-bar::after,
.navi-toggle .navi-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%; }
.navi-toggle .navi-toggle-bar {
margin-top: 0; }
.navi-toggle .navi-toggle-bar::after {
margin-top: 0.8rem; }
.navi-toggle .navi-toggle-bar::before {
margin-top: -0.8rem; }
.navi-toggle.expanded .navi-toggle-bar {
background: transparent; }
.navi-toggle.expanded .navi-toggle-bar::after, .navi-toggle.expanded .navi-toggle-bar::before {
background: white;
margin-top: 0; }
.navi-toggle.expanded .navi-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.navi-toggle.expanded .navi-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
/* nav */
.navi {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
right: -30rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1; }
.navi.expanded {
left: 0; }
.navi ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0; }
/*# sourceMappingURL=nav.css.map */
/* NAVIGATION MENU */
div#main-menu {
width: 100%;
margin: auto;
text-align: center;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
font-size: 1.5rem;
color: #fff;
padding: 0;
}
ul.dropdown-list-item {
padding: 0;
}
ul.dropdown-list-item li {
list-style: none;
padding: 0;
line-height: 100%;
}
ul.dropdown-list-item li a {
font-size: 1rem;
}
.btn-link:hover{
color: #fff;
}
/*** NAVIGATION ICONS ***/
button.user-icon {
background-color: transparent;
border: none;
}
.nav-icons {
position: absolute;
right: 13%;
top: 23%;
}
/*** END NAVIGATION ICONS ***/
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navi">
<div id="main-menu">
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-one" aria-expanded="true" aria-controls="main-menu">Mens</button>
</h5>
</div>
<div id="dropdown-list-one" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-two" aria-expanded="true" aria-controls="main-menu">Womens</button>
</h5>
</div>
<div id="dropdown-list-two" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-three" aria-expanded="true" aria-controls="main-menu">Accessories</button>
</h5>
</div>
<div id="dropdown-list-three" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-four" aria-expanded="true" aria-controls="main-menu">Equipments</button>
</h5>
</div>
<div id="dropdown-list-four" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-five" aria-expanded="true" aria-controls="main-menu">More</button>
</h5>
</div>
<div id="dropdown-list-five" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-default fixed-top" id="nav">
<div class="container">
<div class="navi-toggle">
<div class="navi-toggle-bar"></div>
</div>
<a class="navbar-brand" href="index.php"><img src="img/logo.png"></a>
</div>
<div class="container nav-icons">
<button type="button" class="iconton">
<img src="img/cart-product-white.png" alt="">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSearch" id="icon-search">
<img src="img/navbar-icon.png">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSign" id="icon-user">
<img src="img/user.png">
</button>
</div>
<div class="container">
</div>
</nav>
If someone can solve this, it would be great! Thanks!

navi: document.querySelector('navi')
should be
navi: document.querySelector('.navi')
as it is a class.
(function() {
var hamburger = {
naviToggle: document.querySelector('.navi-toggle'),
navi: document.querySelector('.navi'),
doToggle: function(e) {
e.preventDefault();
this.naviToggle.classList.toggle('expanded');
this.navi.classList.toggle('expanded');
}
};
hamburger.naviToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
}());
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
*:focus {
outline: none; }
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif; }
body {
background: none;
color: inherit;
font: inherit; }
a {
color: inherit;
cursor: pointer;
text-decoration: none; }
a:hover {
opacity: 0.8; }
/* nav toggle */
.navi-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2; }
.navi-toggle:hover {
opacity: 0.8; }
.navi-toggle .navi-toggle-bar,
.navi-toggle .navi-toggle-bar::after,
.navi-toggle .navi-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%; }
.navi-toggle .navi-toggle-bar {
margin-top: 0; }
.navi-toggle .navi-toggle-bar::after {
margin-top: 0.8rem; }
.navi-toggle .navi-toggle-bar::before {
margin-top: -0.8rem; }
.navi-toggle.expanded .navi-toggle-bar {
background: transparent; }
.navi-toggle.expanded .navi-toggle-bar::after, .navi-toggle.expanded .navi-toggle-bar::before {
background: white;
margin-top: 0; }
.navi-toggle.expanded .navi-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.navi-toggle.expanded .navi-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
/* nav */
.navi {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
right: -30rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1; }
.navi.expanded {
left: 0; }
.navi ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0; }
/*# sourceMappingURL=nav.css.map */
/* NAVIGATION MENU */
div#main-menu {
width: 100%;
margin: auto;
text-align: center;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
font-size: 1.5rem;
color: #fff;
padding: 0;
}
ul.dropdown-list-item {
padding: 0;
}
ul.dropdown-list-item li {
list-style: none;
padding: 0;
line-height: 100%;
}
ul.dropdown-list-item li a {
font-size: 1rem;
}
.btn-link:hover{
color: #fff;
}
/*** NAVIGATION ICONS ***/
button.user-icon {
background-color: transparent;
border: none;
}
.nav-icons {
position: absolute;
right: 13%;
top: 23%;
}
/*** END NAVIGATION ICONS ***/
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navi">
<div id="main-menu">
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-one" aria-expanded="true" aria-controls="main-menu">Mens</button>
</h5>
</div>
<div id="dropdown-list-one" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-two" aria-expanded="true" aria-controls="main-menu">Womens</button>
</h5>
</div>
<div id="dropdown-list-two" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-three" aria-expanded="true" aria-controls="main-menu">Accessories</button>
</h5>
</div>
<div id="dropdown-list-three" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-four" aria-expanded="true" aria-controls="main-menu">Equipments</button>
</h5>
</div>
<div id="dropdown-list-four" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-five" aria-expanded="true" aria-controls="main-menu">More</button>
</h5>
</div>
<div id="dropdown-list-five" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-default fixed-top" id="nav">
<div class="container">
<div class="navi-toggle">
<div class="navi-toggle-bar"></div>
</div>
<a class="navbar-brand" href="index.php"><img src="img/logo.png"></a>
</div>
<div class="container nav-icons">
<button type="button" class="iconton">
<img src="img/cart-product-white.png" alt="">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSearch" id="icon-search">
<img src="img/navbar-icon.png">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSign" id="icon-user">
<img src="img/user.png">
</button>
</div>
<div class="container">
</div>
</nav>

How to close an active panel in a jQuery Accordion?

All I'm trying to do is close the active panel, however it won't do that, and I can see it's something to do with my jQuery. It's working perfectly, except that function of being able to close the active one.
At the moment it's working great at being able to open only one panel at a time so I'd like to keep this as is. I'm sure it's something simple!
$(document).ready(function($) {
$( "#accordion").on('click','.accordion-heading', function (e) {
$return = true;
if($(this).next('div').is(':visible')== false) $return = false;
$( "#accordion .panel2").slideUp();
$("#accordion .accordion-heading").removeClass('active');
$(this).next('div').stop(true,false).slideDown();
$(this).addClass('active');
return $return;
});
});
.panel1 {
width: 60%;
margin-left: 20px;
}
.accordion-default {
border-bottom: 1px solid #C8C8C8;
}
.accordion-heading>a {
display: block;
line-height: 1.875;
font-size: 16px;
font-style: normal;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: black;
padding-top: 18px;
padding-bottom: 18px;
}
.accordion-heading>a:hover,
.accordion-heading>a:active,
.accordion-heading>a:focus {
text-decoration: none;
color: #D0006F;
}
.accordion-heading.active .accordion-toggle.collapsed::before{
opacity: 0;
}
.accordion-heading.active .accordion-toggle.collapsed::after {
transform: rotate(-180deg);
}
.accordion-body {
margin-left: 2px;
padding-top: 5px;
padding-bottom: 10px;
}
.accordion-toggle {
padding-left: 2px;
position: relative;
cursor: pointer;
text-align: left;
}
.accordion-toggle::before,
.accordion-toggle::after {
right: 5px;
content: '';
display: block;
position: absolute;
top: 50%;
width: 24px;
height: 2px;
margin-top: -2px;
background-color: #D0006F;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.accordion-toggle::before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
.panel2 {
display: none;
}
.accordion-toggle.collapsed::before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
text-decoration: none;
}
.accordion-toggle.collapsed::after {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="panel1" id="accordion">
<div class="accordion-default">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" >Heading1</a> </div>
<div class="panel2 accordioncollapse collapse" ">
<div class="accordion-body"> Collapsible Content #1 </div>
</div>
</div>
<div class="accordion-default">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" >Heading2</a> </div>
<div class="panel2 accordioncollapse collapse" >
<div class="accordion-body"> Collapsible Content #2 </div>
</div>
</div>
<div class="accordion-default">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" >Heading3</a> </div>
<div class="panel2 accordioncollapse collapse" id="collapseThree" >
<div class="accordion-body"> Collapsible Content #3 </div>
</div>
</div>
</div>

You should check whether the current panel has the active class or not. If it has, then just toggle it and close the panel. Otherwise do what you did.
Check this example:
$(document).ready(function($) {
$("#expand").change(function() {
if (this.checked) {
$("#accordion .accordion-heading").addClass('active locked');
$('.panel2').slideDown();
} else {
$("#accordion .accordion-heading").removeClass('active locked');
$('.panel2').slideUp();
}
});
$("#accordion").on('click','.accordion-heading', function (e) {
if (!$("#expand").prop("checked")) {
if ($(this).hasClass('active')) {
$(this).next('div').slideUp();
$(this).removeClass('active');
} else {
$("#accordion .panel2").slideUp();
$("#accordion .accordion-heading").removeClass('active');
$(this).next('div').stop(true,false).slideDown();
$(this).addClass('active');
}
}
});
});
.panel1 {
width: 60%;
margin-left: 20px;
}
.accordion-default {
border-bottom: 1px solid #C8C8C8;
}
.accordion-heading>a {
display: block;
line-height: 1.875;
font-size: 16px;
font-style: normal;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: black;
padding-top: 18px;
padding-bottom: 18px;
}
.accordion-heading>a:hover,
.accordion-heading>a:active,
.accordion-heading>a:focus {
text-decoration: none;
color: #D0006F;
}
.accordion-heading.active .accordion-toggle.collapsed::before{
opacity: 0;
}
.accordion-heading.active .accordion-toggle.collapsed::after {
transform: rotate(-180deg);
}
.accordion-body {
margin-left: 2px;
padding-top: 5px;
padding-bottom: 10px;
}
.accordion-toggle {
padding-left: 2px;
position: relative;
cursor: pointer;
text-align: left;
}
.accordion-toggle::before,
.accordion-toggle::after {
right: 5px;
content: '';
display: block;
position: absolute;
top: 50%;
width: 24px;
height: 2px;
margin-top: -2px;
background-color: #D0006F;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.accordion-toggle::before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
.panel2 {
display: none;
}
.accordion-toggle.collapsed::before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
text-decoration: none;
}
.accordion-toggle.collapsed::after {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="expand" type="checkbox">Expand all
<div class="panel1" id="accordion">
<div class="accordion-default">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" >Heading1</a> </div>
<div class="panel2 accordioncollapse collapse">
<div class="accordion-body"> Collapsible Content #1 </div>
</div>
</div>
<div class="accordion-default">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" >Heading2</a> </div>
<div class="panel2 accordioncollapse collapse" >
<div class="accordion-body"> Collapsible Content #2 </div>
</div>
</div>
<div class="accordion-default">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" >Heading3</a> </div>
<div class="panel2 accordioncollapse collapse" id="collapseThree" >
<div class="accordion-body"> Collapsible Content #3 </div>
</div>
</div>
</div>

Push Menu - How to push body

I have a menu that opens to the right. My issue is that I want the body to resize after I have opened the menu. The menu is 300px wide and I want the body to resize to take up the remainder of the screen. I saw a few examples, but all they do is shift the body so part of it is not visible and off screen. You can see my example here
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<li class="block">Home</li>
<li class="block">Profile</li>
<li class="block">Blogs</li>
<li class="block">Following</li>
<li class="block">Settings</li>
<li class="block">Logout</li>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
``

As mentioned in the comment, this is what you could do. Add a class to your HTML body when the menu is opened and add a padding-right equals to the width of the menu.
$(".hamburger").on("click", function() {
$(".hamburger").toggleClass("is-active");
//add menu-active class to document body
$('body').toggleClass('menu-active');
$(".side-nav").toggleClass("hidden");
if ($("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
} else if (!$("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
}
});
html,
body {
padding: 0;
margin: 0;
height: 100%;
background-color: black;
box-sizing: border-box;
}
button:focus {
outline: 0;
}
a {
color: #fff;
}
a:hover {
color: #fff;
text-decoration: none;
}
.side-nav {
position: absolute;
background-color: gray;
width: 300px;
height: 100%;
z-index: 1;
right: 0;
}
.open-menu-side {
position: relative;
display: block;
height: 80px;
width: 100%;
text-align: center;
float: right;
}
.side-nav-ul {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
list-style: none;
font-size: 28px;
color: #fff;
}
.block {
height: 40px;
}
header {
height: 80px;
background-color: #fff;
}
.brand {
display: inline-block;
}
.img-menu img {
height: 50px;
width: 50px;
border-radius: 50%;
border: solid 1px black;
float: left;
}
.hidden {
position: absolute;
right: -300px;
}
#pushed {
position: relative;
}
#main {
float: right;
}
.hamburger {
padding: 15px 15px;
height: 100%;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hello-text {
text-align: right;
color: #fff;
font-size: 22px;
}
/*add padding-right when menu is active*/
body.menu-active {
padding-right: 300px;
}
<body>
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<a href="#">
<li class="block">Home</li>
</a>
<a href="#">
<li class="block">Profile</li>
</a>
<a href="#">
<li class="block">Blogs</li>
</a>
<a href="#">
<li class="block">Following</li>
</a>
<a href="#">
<li class="block">Settings</li>
</a>
<a href="#">
<li class="block">Logout</li>
</a>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<p class="hello-text">hello</p>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
</body>
Working codepen https://codepen.io/azs06/pen/KQqqee

Add
margin-left: 300px;
to
.side-nav-ul
It worked for me in your codepen. Margin will push everything out of the way.

We Keep Coding

JavaScript is the programming language of the Web.

Why does my navbar appear on top of scrollbar? - javascript

You can use following css for navbar .nav{ position:absolute; left:0; top:0; }

I had the same problem while I was using a Bootstrap template from a teacher. I found out the problem was this line: overflow-x: hidden; I just removed and it solved the problem.

Related

how to the make animation happen at the same time?

Hamburger menu z-index issue

Uncaught TypeError cannot read property 'classlist' of null

How to close an active panel in a jQuery Accordion?

Push Menu - How to push body

Categories

Resources