How to hover between buttons to display content using Bootstrap3 and Jquery? - javascript

if you see my code and fiddle, the hovering is already working but i want that when a particular text is hovered, only the button relevant to it should be displayed and the previously shown button should be hidden. how can i do that? and it should also hide if i click anywhere on the screen
I have 2 buttons named "Water" and "soil" which display 1 button each. "1" for Water and 6 for soil. each of it are displayed when the mouse is hovered over either water or soil . Currently if i hover over "water" , 1 displays and then it remains displayed even if i hover over "soil" and 6 becomes activated. In principle, i want that only one category should be displayed. it should be Water or soil and not both. It should work like this:
When i hover over Water, 1 is activated and if i click anywhere on the screen, it disappears or when i hover over soil then it disappears and 6 is displayed and it should work in any order as any button can be hovered first. i have the hover button and close button which i cannot figure out where to insert but this concept is not working.How can i make this work? Here is the fiddle and the code:
https://jsfiddle.net/6u2g58qm/
$( document ).ready(function() {
$('#create_btn').on('click', function(){
$('#create_tab').tab('show')
})
$('#login_btn').on('click', function(){
$('#login_tab').tab('show')
})
$('#create_btn').on('click', function(){
$('#create1_tab').tab('show')
})
$(".hover_btn").click(function(e){
e.preventDefault();
})
$(".hover_btn").mouseenter(function(e){
e.preventDefault();
$("#tab1default").css("opacity","1");
})
$(".hover_btn2").hover(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","1");
})
$(".hover_btn2").mouseleave(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","0");
})
$(".hover_btn1").click(function(e){
e.preventDefault();
})
$(".hover_btn1").mouseenter(function(e){
e.preventDefault();
$("#tab2default").css("opacity","1");
})
$(".hover_btn22").hover(function(e){
e.preventDefault();
$("#tab3default1").css("opacity","1");
})
$(".hover_btn22").mouseleave(function(e){
e.preventDefault();
$("#tab3default1").css("opacity","0");
})
$("#closeButton").click(function(e){
e.preventDefault();
$("#tab1default").css("opacity","0");
})
});
#customTab a {
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
#media (max-width: 576px) {
.container {
padding: 0;
}
.btn {
padding: 3px 6px;
font-size: 12px;
}
.flex .panel-default{
margin-right: 4px;
}
.flex .panel-default>.panel-heading{
padding: 0;
}
.flex .panel-default>.panel-body .btn:last-child{
margin-top: 4px;
}
}
.btn-dark {
background-color: #343a40;
color: #fff;
}
.btn-dark:hover,.btn.focus, .btn:focus {
color: #fff;
}
.btn.focus, .btn:focus,.btn:active,.btn:hover , .active >a .btn{
color: #fff;
background: blue;
}
.nav-tabs{
border: none;
}
.hover_btn{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.hover_btn:hover{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.9;
}
<html lang="en">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<div class="container" id="customTab">
<ul class="nav " style="display: flex; justify-content: space-around; border: none;">
<li><span class="hover_btn">Water</span>
</li>
<li><span class="hover_btn1">soil</span></li>
</ul>
</div>
<div class="tab-content hover_btn2">
<div class="hover_btn2">
<div class="tab-pane fade" id="tab1default">
<div class="flex ">
<ul class="nav nav-tabs">
<li data-toggle="tab"><span class="btn btn-info">1</span></li>
</ul>
</div>
<div class="tab-pane fade" id="tab2default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><span class="btn btn-info">6</span></li>
</ul>
</div>
</div>
</div>
</main>
</body>
</html>
:

You dont need JQuery to do a hover, its simple if you do it with css.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<div>Hover me</div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>

I've implemented what you need in your code...but while editing your code, I noticed you really need to learn basic concepts in coding, many <divs> were unfinished, you added the same classes twice...I think you should really go for the basics rather than diving into it. Anyways, I've added the code to change the opacities to 0 when the focus is lost, and FYI you've included the jQuery library but you're using Javascript...Check the snippet :)
$(document).ready(function() {
$('#create_btn').on('click', function() {
$('#create_tab').tab('show')
})
$('#login_btn').on('click', function() {
$('#login_tab').tab('show')
})
$('#create_btn').on('click', function() {
$('#create1_tab').tab('show')
})
$(".hover_btn").click(function(e) {
e.preventDefault();
})
$(".hover_btn").mouseenter(function(e) {
e.preventDefault();
$("#tab1default").css("opacity", "1");
})
$(".hover_btn2").hover(function(e) {
e.preventDefault();
$("#tab2default1").css("opacity", "1");
})
$(".hover_btn2").mouseleave(function(e) {
e.preventDefault();
$("#tab2default").css("opacity", "0");
})
$(".hover_btn1").click(function(e) {
e.preventDefault();
})
$(".hover_btn1").mouseenter(function(e) {
e.preventDefault();
$("#tab2default").css("opacity", "1");
})
$(".hover_btn2").mouseleave(function(e) {
e.preventDefault();
$("#tab3default1").css("opacity", "0");
})
$(".hover_btn").mouseleave(function(e) {
e.preventDefault();
$("#tab1default").css("opacity", "0");
})
$("#closeButton").click(function(e) {
e.preventDefault();
$("#tab1default").css("opacity", "0");
})
});
#customTab a {
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
#media (max-width: 576px) {
.container {
padding: 0;
}
.btn {
padding: 3px 6px;
font-size: 12px;
}
.flex .panel-default {
margin-right: 4px;
}
.flex .panel-default>.panel-heading {
padding: 0;
}
.flex .panel-default>.panel-body .btn:last-child {
margin-top: 4px;
}
}
.btn-dark {
background-color: #343a40;
color: #fff;
}
.btn-dark:hover,
.btn.focus,
.btn:focus {
color: #fff;
}
.btn.focus,
.btn:focus,
.btn:active,
.btn:hover,
.active>a .btn {
color: #fff;
background: blue;
}
.nav-tabs {
border: none;
}
.hover_btn {
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.hover_btn:hover {
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.9;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<div class="container" id="customTab">
<ul class="nav " style="display: flex; justify-content: space-around; border: none;">
<li><span class="hover_btn">Water</span>
</li>
<li><span class="hover_btn1">soil</span></li>
</ul>
</div>
<div class="tab-content">
<div class="hover_btn2">
<div class="tab-pane fade" id="tab1default">
<div class="flex ">
<ul class="nav nav-tabs">
<li data-toggle="tab"><span class="btn btn-info">1</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade hover_btn3" id="tab2default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><span class="btn btn-info">6</span></li>
</ul>
</div>
</div>
</div>
</div>
</main>
</body>
</html>

Related

automatically resizing the menu bar by javascript

I want to resize my navigation bar items, so there will be enough distance between them and the sticky logo. How can I achieve that? I tried to edit the container, but it didn't resize and instead overlapping appeared. I mean, it should be put to the right side and leave enough distance between the logo and the menu bar.
body {
font-family: Arial, sans-serif;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.testmonial {
background-image: url(images/testimonial-bg.jpg);
position: relative;
background-repeat: no-repeat;
}
.testmonial:after {
content: "";
background: #1baaba;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .6;
z-index: 1;
}
.owl-wrapper {
padding: 80px 20px;
z-index: 999;
position: relative;
}
.owl-testmonial {
background: #FFF;
/* max-width: 400px; */
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.owl-testmonial:before {
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
text-align: center;
display: block;
font-size: 92px;
color: #e7e7e7;
margin-top: -106px;
}
.owl-testmonial .owl-prev {
position: absolute;
left: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
line-height: 17px !important;
color: #FFF;
}
.owl-testmonial .owl-next {
position: absolute;
right: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
color: #FFF;
line-height: 17px !important;
}
nav {
overflow: hidden;
background-color: #333;
}
nav.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
}
nav li {
margin: 0 30px;
}
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ffeb3b;
color: black;
}
a.active {
background-color: #2196f3;
color: white;
}
.content {
padding: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
.sticky ul {
height: 50px;
/* or any other desired height */
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sticky a {
height: 100%;
/* or any other desired height */
line-height: 50px;
padding: 0 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
background-color: #fff;
width: 30%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
float: left;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #ccc;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #ffeb3b;
color: #2196f3;
border-radius: 10px;
border: 1px solid #2196f3;
margin-top: 20px;
cursor: pointer;
}
.office-map {
margin-top: 50px;
}
/* Responsive styles */
#media screen and (max-width: 992px) {
nav li {
margin: 0 10px;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 80%;
}
}
#media screen and (max-width: 768px) {
header {
height: 60vh;
}
nav {
top: 60vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 90%;
}
}
#media screen and (max-width: 576px) {
header {
height: 40vh;
}
nav {
top: 40vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 95%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add JS for owl carousel -->
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.theme.default.min.css">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>My Homepage</title>
</head>
<body>
<div class="testmonial">
<div class="container">
<div class="owl-wrapper">
<div class="owl-carousel owl-testmonial">
<div class="slide-item">
<img src="testimony/slider1585663811.png" alt="Slide 1">
</div>
<div class="slide-item">
<img src="testimony/slider1589942091.png" alt="Slide 2">
</div>
<div class="slide-item">
<img src="testimony/slider1590030001.png" alt="Slide 3">
</div>
</div>
</div>
</div>
</div>
<!-- 7 items sticky menu bar -->
<nav id="navbar">
<ul id="nav-ul">
<li><a class="active" href="#home">Home</a></li>
<li>About Us</li>
<li>Tabungan</li>
<li>Kredit</li>
<li>Deposito</li>
<li>Berita</li>
<li>Pengajuan Kredit</li>
</ul>
</nav>
<main class="content">
<!-- 3 static benefits -->
<section class="benefits">
<div class="card">
<h3>Benefit 1</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 2</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 3</h3>
<p>Description</p>
</div>
</section>
<!-- 3 types of product -->
<section class="products">
<h2>Products</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</section>
<!-- ID tracking -->
<section class="id-tracking">
<h2>ID Tracking</h2>
<p>Description</p>
</section>
<!-- 3 dynamic testimonies -->
<section class="testimonies">
<h2>Testimonies</h2>
<div class="owl-carousel owl-theme">
<div class="testimony-1">Testimony 1</div>
<div class="testimony-2">Testimony 2</div>
<div class="testimony-3">Testimony 3</div>
</div>
</section>
<!-- 4 dynamic slider of news -->
<section class="news">
<h2>News</h2>
<div class="owl-carousel owl-theme">
<div class="news-1">News 1</div>
<div class="news-2">News 2</div>
<div class="news-3">News 3</div>
<div class="news-4">News 4</div>
</div>
</section>
<!-- suggestion box -->
<section class="suggestion-box">
<h2>Suggestion Box</h2>
<form action="#">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phone-number">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<button type="submit">Submit</button>
</form>
</section>
<!-- static map to the office -->
<section class="map">
<h2>Map to the Office</h2>
<img src="map.jpg" alt="Map to the Office">
</section>
</main>
<script src="owlcarousel/jquery.min.js"></script>
<script src="owlcarousel/dist/owl.carousel.min.js"></script>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var logo = document.createElement("img");
logo.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
logo.style.height = "50px";
logo.style.marginLeft = "40px";
logo.style.float = "left";
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
if (!navbar.classList.contains("logo")) {
navbar.classList.add("logo");
navbar.insertBefore(logo, navbar.firstChild);
navbar.style.height = "50px";
}
} else {
navbar.classList.remove("sticky");
navbar.classList.remove("logo");
navbar.removeChild(logo);
navbar.style.height = "auto";
}
}
window.onscroll = function() {
myFunction();
};
</script>
</body>
</html>

How can I re-use the same navigation bar on many responsive pages?

I wanna use the same navbar and footer across multiple pages, using the JQuery, as we can see here. However, I want a responsive navbar (see the hamburger menu at the corner). So, to do that, I had to load these tags from files. Unfortunately, the script doesn't work anymore. How can I fix it?
[EDIT] Everything works fine by replacing <div id="nav-placeholder"></div> with the content of nav.html, but I would like to keep the code distributed. The console returns the following error:
Uncaught TypeError: toggleButton is null
<anonymous> file:///home/myProject/script.js:3
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dummy website</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div id="nav-placeholder"></div>
</header>
<main>
<p>home content</p>
</main>
<footer>
<div id="footer-placeholder"></div>
</footer>
<script src="script.js"></script>
</body>
</html>
nav.html
<p>logo</p>
<div class="menu" id="toggleButton">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
<nav class="nav-links" id="nav-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
footer.html
<p>footer content</p>
style.css
*{
box-sizing: border-box;
padding: 0;
margin: 0;
color: white;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: green;
}
.nav-links {
list-style: none;
}
.nav-links li {
display: inline-block;
text-align: center;
padding-right: 5px;
}
.menu {
display: none;
cursor: pointer;
}
.menu-line {
background-color: white;
width: 21px;
height: 2px;
margin-top: 5px;
}
main {
height: 200px;
}
main p{
color: black;
}
footer {
background-color: red;
}
#media all and (max-width: 480px){
.menu {
display: block;
}
.nav-links {
display: none;
width: 100%;
}
.active {
display: flex;
}
.nav-links ul{
justify-content: center;
width: 100%;
}
.nav-links li {
display: block;
border-top: 1px solid white;
padding: 5px 0 5px 0;
}
}
script.js
const toggleButton = document.getElementById('toggleButton');
const navList = document.getElementById('nav-list');
toggleButton.addEventListener('click', () => {
navList.classList.toggle('active');
});
$(function(){
$("#nav-placeholder").load("nav.html");
$("#footer-placeholder").load("footer.html");
});

Flickity carousel is overlapping dropdown menu. How can I fix this?

I'm building a website with Flickity image carousels on the homepage. It's more customized than a regular nav menu, and now I'm starting to question my choices in life.
The dropdown menus I crafted are appearing behind the Flickity scrollers, even when I set the z-index to z-index: 1000 !important or try to force it with inline styling. I've seen other people ask about this same issue, but the solutions I found work when the nav bar is a element, which mine is not.
Here's a video showing the problem: https://imgur.com/a/qosY8JI
What can I do to make the dropdown menus appear above the carousel?
// ---------------------------------------- GLOBAL VARIABLES
const mobileNavbar = document.querySelector(".mobile-navbar");
const desktopNavbar = document.querySelector(".desktop-navbar");
const stickyDesktop = desktopNavbar.offsetTop;
const stickyMobile = mobileNavbar.offsetTop;
window.onscroll = function () {
stickyNav()
};
function stickyNav() {
if (window.pageYOffset >= stickyDesktop || window.pageYOffset >= stickyMobile) {
desktopNavbar.classList.add("sticky");
mobileNavbar.classList.add("sticky");
}
else {
desktopNavbar.classList.remove("sticky");
mobileNavbar.classList.remove("sticky");
}
}
// ---------------------------------------- DESKTOP NAVBAR
document.addEventListener('click', e => {
const isDropdownButton = e.target.matches("[data-dropdown-button]")
if (!isDropdownButton && e.target.closest('[data-dropdown]') != null) return
let currentDropdown;
if (isDropdownButton) {
currentDropdown = e.target.closest('[data-dropdown]')
currentDropdown.classList.toggle('active')
}
document.querySelectorAll('[data-dropdown].active').forEach(dropdown => {
if (dropdown === currentDropdown) return
dropdown.classList.remove('active')
})
})
// ---------------------------------------- MOBILE NAVBAR
const toggleButton = document.getElementsByClassName('fa-bars')[0]
const mobileNavBar = document.getElementsByClassName('mobile-navbar-links')[0]
toggleButton.addEventListener('click', () => {
mobileNavBar.classList.toggle('active')
})
// ---------------------------------------- FLICKITY ---------------------------------------- //
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
// options
cellAlign: 'left',
contain: true
});
// element argument can be a selector string
// for an individual element
var flkty = new Flickity('.main-carousel', {
// options
});
/* ---------------------------------------- UNIVERSAL STYLES ---------------------------------------- */
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
body {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + body {
padding-top: 60px;
}
.scrollDown {
position: absolute;
top: 93%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.scrollDown a {
text-decoration: none;
}
.scrollDown p {
margin: 0;
font-family: 'Nunito', sans-serif;
font-size: 20px;
color: #fff;
}
.fa-chevron-down,
.fa-chevron-up {
width: 50px;
height: 50px;
font-size: 32px;
color: #fff;
;
}
.scrollDown:hover {
transition: .2s ease;
}
#website-name {
margin-right: 1.5em;
}
/* ---------------------------------------- ANIMATIONS ---------------------------------------- */
#keyframes bounce {
0% {
transform: translateY(0);
}
5% {
transform: translateY(0);
}
10% {
transform: translateY(-25%);
}
15% {
transform: translateY(0);
}
20% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
.fa-chevron-down,
.fa-chevron-up {
animation: bounce 10s infinite;
}
/* ---------------------------------------- FLICKITY ---------------------------------------- */
.carousel-cell {
width: 100%;
height: 100vh;
margin-right: 10px;
}
.homeSection1 .carousel-cell {
background-color: #02cd82;
}
.homeSection2 .carousel-cell {
background-color: #cd4902;
}
.homeSection3 .carousel-cell {
background-color: #0249cd;
}
#media screen and (max-width: 600px) {
/* ------------------------------- MOBILE NAVBAR */
.desktop-navbar {
display: none;
}
.mobile-navbar {
display: flex;
overflow: hidden;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
z-index: 1000;
}
.mobile-brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.mobile-navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.mobile-navbar-links li {
list-style: none;
}
.mobile-navbar-links li a {
color: #fff;
padding: 1rem;
display: block;
}
.mobile-navbar-links li:hover {
background-color: #555;
}
.mobile-navbar .fa-bars {
position: absolute;
display: none;
flex-direction: column;
justify-content: space-between;
top: .75rem;
right: 1rem;
color: #fff;
width: 1rem;
height: 1rem;
cursor: pointer;
}
.mobile-navbar .fa-bars {
display: flex;
}
.mobile-navbar-links {
display: none;
width: 100%;
}
.mobile-navbar {
flex-direction: column;
align-items: flex-start;
}
.mobile-navbar-links ul {
width: 100%;
flex-direction: column;
}
.mobile-navbar-links li {
text-align: center;
}
.mobile-navbar-links.active {
display: flex;
}
}
#media screen and (min-width: 601px) {
/* ------------------------------- DESKTOP NAVBAR */
.mobile-navbar {
display: none;
}
.desktop-navbar {
background-color: #f3f3f3;
overflow: hidden;
display: flex;
align-items: baseline;
padding: .5rem;
gap: 1rem;
z-index: 1000;
}
.link {
background: none;
border: none;
text-decoration: none;
color: #777;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
}
.dropdown.active+.link,
.link:hover {
color: #000;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
left: 0;
top: calc(100% + .25rem);
background-color: #fff;
padding: .75rem;
border-radius: .25rem;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease, transform 150ms ease;
transform: translateY(-10px);
}
.dropdown.active>.link+.dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
.information-grid {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 2rem;
}
.dropdown-links {
display: flex;
flex-direction: column;
gap: .25rem;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Fox Bank</title>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links/Styles -->
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/responsive.css">
<link rel="stylesheet" href="styles/flickity.min.css" media="screen">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<!-- Javascript -->
<script src="https://kit.fontawesome.com/8821130486.js" crossorigin="anonymous"></script>
<script src="js/jquery.js" defer></script>
<script src="js/app.js" async defer></script>
<script src="js/flickity.min.js" defer></script>
</head>
<body>
<!--------------------- DESKTOP NAVBAR -->
<!--------------------------------------->
<div class="desktop-navbar">
<div>
<a href="#">
<h1 id="website-name">Big Bank</h1>
</a>
</div>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>About</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Meet Our Team</div>
<div class="dropdown-links">
Staff
Board of Directors
</div>
</div>
<div>
<div class="dropdown-heading">Our History</div>
<div class="dropdown-links">
Overview
Future
</div>
</div>
<div>
<div class="dropdown-heading">Blog</div>
<div class="dropdown-links">
Latest Posts
In The Community
Security & Fraud Prevention
National & International Money
</div>
</div>
<div>
<div class="dropdown-heading">Contact Us</div>
<div class="dropdown-links">
Support Center
Phone & Mailing Information
Social Media
</div>
</div>
</div>
</div>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>Products</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Checking</div>
<div class="dropdown-links">
Basic Checking
Teens Checking
Prime Checking
Elite Checking
</div>
</div>
<div>
<div class="dropdown-heading">Savings</div>
<div class="dropdown-links">
Basic Savings
Teens Savings
Prime Savings
Elite Savings
</div>
</div>
<div>
<div class="dropdown-heading">Borrow</div>
<div class="dropdown-links">
Personal Loans
Auto Loans
Credit Cards
Mortgage
Shark Loans
</div>
</div>
<div>
<div class="dropdown-heading">Retirement</div>
<div class="dropdown-links">
Traditional IRA
Roth IRA
Self Employment IRA
</div>
</div>
</div>
</div>
<button>Login</button>
</div>
<!---------------------- MOBILE NAVBAR -->
<!--------------------------------------->
<nav class="mobile-navbar">
<div class="mobile-brand-title">Fox Bank</div>
<i class="fa-solid fa-bars"></i>
<div class="mobile-navbar-links">
<ul>
<li>About</li>
<li>Products</li>
<li>Login</li>
</ul>
</div>
</nav>
<!------------------ FLICKITY CAROUSEL -->
<!--------------------------------------->
<div id="homeSection1">
<div class="main-carousel homeSection1" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#homeSection2">
<i id="scrollDownArrow" class="fas fa-chevron-down"></i>
<p>Scroll</p>
</a>
</div>
</div>
<div id="homeSection2" style="position: relative;">
<div class="main-carousel homeSection2" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#homeSection3">
<i id="scrollDownArrow" class="fas fa-chevron-down"></i>
<p>Scroll</p>
</a>
</div>
</div>
<div id="homeSection3" style="position: relative;">
<div class="main-carousel homeSection3" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#">
<i id="scrollDownArrow" class="fas fa-chevron-up"></i>
<p>Back to Top</p>
</a>
</div>
</div>
</body>
</html>
Remove overflow: hidden; from your .desktop-navbar
The height of the menu is more than the height of the nav bar so if you have overflow: hidden it hides what goes beyond the dimensions of the parent container.
MDN hidden - Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container.
// ---------------------------------------- GLOBAL VARIABLES
const mobileNavbar = document.querySelector(".mobile-navbar");
const desktopNavbar = document.querySelector(".desktop-navbar");
const stickyDesktop = desktopNavbar.offsetTop;
const stickyMobile = mobileNavbar.offsetTop;
window.onscroll = function () {
stickyNav()
};
function stickyNav() {
if (window.pageYOffset >= stickyDesktop || window.pageYOffset >= stickyMobile) {
desktopNavbar.classList.add("sticky");
mobileNavbar.classList.add("sticky");
}
else {
desktopNavbar.classList.remove("sticky");
mobileNavbar.classList.remove("sticky");
}
}
// ---------------------------------------- DESKTOP NAVBAR
document.addEventListener('click', e => {
const isDropdownButton = e.target.matches("[data-dropdown-button]")
if (!isDropdownButton && e.target.closest('[data-dropdown]') != null) return
let currentDropdown;
if (isDropdownButton) {
currentDropdown = e.target.closest('[data-dropdown]')
currentDropdown.classList.toggle('active')
}
document.querySelectorAll('[data-dropdown].active').forEach(dropdown => {
if (dropdown === currentDropdown) return
dropdown.classList.remove('active')
})
})
// ---------------------------------------- MOBILE NAVBAR
const toggleButton = document.getElementsByClassName('fa-bars')[0]
const mobileNavBar = document.getElementsByClassName('mobile-navbar-links')[0]
toggleButton.addEventListener('click', () => {
mobileNavBar.classList.toggle('active')
})
// ---------------------------------------- FLICKITY ---------------------------------------- //
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
// options
cellAlign: 'left',
contain: true
});
// element argument can be a selector string
// for an individual element
var flkty = new Flickity('.main-carousel', {
// options
});
/* ---------------------------------------- UNIVERSAL STYLES ---------------------------------------- */
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
body {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + body {
padding-top: 60px;
}
.scrollDown {
position: absolute;
top: 93%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.scrollDown a {
text-decoration: none;
}
.scrollDown p {
margin: 0;
font-family: 'Nunito', sans-serif;
font-size: 20px;
color: #fff;
}
.fa-chevron-down,
.fa-chevron-up {
width: 50px;
height: 50px;
font-size: 32px;
color: #fff;
;
}
.scrollDown:hover {
transition: .2s ease;
}
#website-name {
margin-right: 1.5em;
}
/* ---------------------------------------- ANIMATIONS ---------------------------------------- */
#keyframes bounce {
0% {
transform: translateY(0);
}
5% {
transform: translateY(0);
}
10% {
transform: translateY(-25%);
}
15% {
transform: translateY(0);
}
20% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
.fa-chevron-down,
.fa-chevron-up {
animation: bounce 10s infinite;
}
/* ---------------------------------------- FLICKITY ---------------------------------------- */
.carousel-cell {
width: 100%;
height: 100vh;
margin-right: 10px;
}
.homeSection1 .carousel-cell {
background-color: #02cd82;
}
.homeSection2 .carousel-cell {
background-color: #cd4902;
}
.homeSection3 .carousel-cell {
background-color: #0249cd;
}
#media screen and (max-width: 600px) {
/* ------------------------------- MOBILE NAVBAR */
.desktop-navbar {
display: none;
}
.mobile-navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
z-index: 1000;
}
.mobile-brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.mobile-navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.mobile-navbar-links li {
list-style: none;
}
.mobile-navbar-links li a {
color: #fff;
padding: 1rem;
display: block;
}
.mobile-navbar-links li:hover {
background-color: #555;
}
.mobile-navbar .fa-bars {
position: absolute;
display: none;
flex-direction: column;
justify-content: space-between;
top: .75rem;
right: 1rem;
color: #fff;
width: 1rem;
height: 1rem;
cursor: pointer;
}
.mobile-navbar .fa-bars {
display: flex;
}
.mobile-navbar-links {
display: none;
width: 100%;
}
.mobile-navbar {
flex-direction: column;
align-items: flex-start;
}
.mobile-navbar-links ul {
width: 100%;
flex-direction: column;
}
.mobile-navbar-links li {
text-align: center;
}
.mobile-navbar-links.active {
display: flex;
}
}
#media screen and (min-width: 601px) {
/* ------------------------------- DESKTOP NAVBAR */
.mobile-navbar {
display: none;
}
.desktop-navbar {
background-color: #f3f3f3;
display: flex;
align-items: baseline;
padding: .5rem;
gap: 1rem;
z-index: 1000;
}
.link {
background: none;
border: none;
text-decoration: none;
color: #777;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
}
.dropdown.active+.link,
.link:hover {
color: #000;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
left: 0;
top: calc(100% + .25rem);
background-color: #fff;
padding: .75rem;
border-radius: .25rem;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease, transform 150ms ease;
transform: translateY(-10px);
}
.dropdown.active>.link+.dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
.information-grid {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 2rem;
}
.dropdown-links {
display: flex;
flex-direction: column;
gap: .25rem;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Fox Bank</title>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links/Styles -->
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/responsive.css">
<link rel="stylesheet" href="styles/flickity.min.css" media="screen">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<!-- Javascript -->
<script src="https://kit.fontawesome.com/8821130486.js" crossorigin="anonymous"></script>
<script src="js/jquery.js" defer></script>
<script src="js/app.js" async defer></script>
<script src="js/flickity.min.js" defer></script>
</head>
<body>
<!--------------------- DESKTOP NAVBAR -->
<!--------------------------------------->
<div class="desktop-navbar">
<div>
<a href="#">
<h1 id="website-name">Big Bank</h1>
</a>
</div>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>About</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Meet Our Team</div>
<div class="dropdown-links">
Staff
Board of Directors
</div>
</div>
<div>
<div class="dropdown-heading">Our History</div>
<div class="dropdown-links">
Overview
Future
</div>
</div>
<div>
<div class="dropdown-heading">Blog</div>
<div class="dropdown-links">
Latest Posts
In The Community
Security & Fraud Prevention
National & International Money
</div>
</div>
<div>
<div class="dropdown-heading">Contact Us</div>
<div class="dropdown-links">
Support Center
Phone & Mailing Information
Social Media
</div>
</div>
</div>
</div>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>Products</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Checking</div>
<div class="dropdown-links">
Basic Checking
Teens Checking
Prime Checking
Elite Checking
</div>
</div>
<div>
<div class="dropdown-heading">Savings</div>
<div class="dropdown-links">
Basic Savings
Teens Savings
Prime Savings
Elite Savings
</div>
</div>
<div>
<div class="dropdown-heading">Borrow</div>
<div class="dropdown-links">
Personal Loans
Auto Loans
Credit Cards
Mortgage
Shark Loans
</div>
</div>
<div>
<div class="dropdown-heading">Retirement</div>
<div class="dropdown-links">
Traditional IRA
Roth IRA
Self Employment IRA
</div>
</div>
</div>
</div>
<button>Login</button>
</div>
<!---------------------- MOBILE NAVBAR -->
<!--------------------------------------->
<nav class="mobile-navbar">
<div class="mobile-brand-title">Fox Bank</div>
<i class="fa-solid fa-bars"></i>
<div class="mobile-navbar-links">
<ul>
<li>About</li>
<li>Products</li>
<li>Login</li>
</ul>
</div>
</nav>
<!------------------ FLICKITY CAROUSEL -->
<!--------------------------------------->
<div id="homeSection1">
<div class="main-carousel homeSection1" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#homeSection2">
<i id="scrollDownArrow" class="fas fa-chevron-down"></i>
<p>Scroll</p>
</a>
</div>
</div>
<div id="homeSection2" style="position: relative;">
<div class="main-carousel homeSection2" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#homeSection3">
<i id="scrollDownArrow" class="fas fa-chevron-down"></i>
<p>Scroll</p>
</a>
</div>
</div>
<div id="homeSection3" style="position: relative;">
<div class="main-carousel homeSection3" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#">
<i id="scrollDownArrow" class="fas fa-chevron-up"></i>
<p>Back to Top</p>
</a>
</div>
</div>
</body>
</html>

Sticky nav isn't working, what's going on?

So I'm trying to make my nav bar stick to the top of the page when people scroll, but it doesn't want to work. For some reason, the console keeps throwing an error saying the classList.remove() attributes are undefined. Yet at the same time, when I remove them, the navbars don't stick.
If it helps, I built two navbars. One for mobile/tablet and another for desktops.
What's going on with this?
// ---------------------------------------- GLOBAL VARIABLES
const mobileNavbar = document.getElementsByClassName("mobile-navbar");
const desktopNavbar = document.getElementsByClassName("desktop-navbar");
const stickyDesktop = desktopNavbar.offsetTop;
const stickyMobile = mobileNavbar.offsetTop;
window.onscroll = function () {
stickyNav()
};
function stickyNav() {
if (window.pageYOffset >= stickyDesktop || window.pageYOffset >= stickyMobile) {
desktopNavbar.classList.add("sticky");
mobileNavbar.classList.add("sticky");
}
else {
desktopNavbar.classList.remove("sticky");
mobileNavbar.classList.remove("sticky");
}
}
// ---------------------------------------- DESKTOP NAVBAR
document.addEventListener('click', e => {
const isDropdownButton = e.target.matches("[data-dropdown-button]")
if (!isDropdownButton && e.target.closest('[data-dropdown]') != null) return
let currentDropdown
if (isDropdownButton) {
currentDropdown = e.target.closest('[data-dropdown]')
currentDropdown.classList.toggle('active')
}
document.querySelectorAll('[data-dropdown].active').forEach(dropdown => {
if (dropdown === currentDropdown) return
dropdown.classList.remove('active')
})
})
// ---------------------------------------- MOBILE NAVBAR
const toggleButton = document.getElementsByClassName('fa-bars')[0]
const mobileNavBar = document.getElementsByClassName('mobile-navbar-links')[0]
toggleButton.addEventListener('click', () => {
mobileNavBar.classList.toggle('active')
})
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
body {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + body {
padding-top: 60px;
}
.scrollDown {
position: absolute;
top: 93%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.scrollDown a {
text-decoration: none;
}
.scrollDown p {
margin: 0;
font-family: 'Nunito', sans-serif;
font-size: 20px;
color: #fff;
}
.fa-chevron-down,
.fa-chevron-up {
width: 50px;
height: 50px;
font-size: 32px;
color: #fff;
;
}
.scrollDown:hover {
transition: .2s ease;
}
#media screen and (max-width: 600px) {
/* ------------------------------- MOBILE NAVBAR */
.desktop-navbar {
display: none;
}
.mobile-navbar {
display: flex;
overflow: hidden;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
}
.mobile-brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.mobile-navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.mobile-navbar-links li {
list-style: none;
}
.mobile-navbar-links li a {
color: #fff;
padding: 1rem;
display: block;
}
.mobile-navbar-links li:hover {
background-color: #555;
}
.mobile-navbar .fa-bars {
position: absolute;
display: none;
flex-direction: column;
justify-content: space-between;
top: .75rem;
right: 1rem;
color: #fff;
width: 1rem;
height: 1rem;
cursor: pointer;
}
.mobile-navbar .fa-bars {
display: flex;
}
.mobile-navbar-links {
display: none;
width: 100%;
}
.mobile-navbar {
flex-direction: column;
align-items: flex-start;
}
.mobile-navbar-links ul {
width: 100%;
flex-direction: column;
}
.mobile-navbar-links li {
text-align: center;
}
.mobile-navbar-links.active {
display: flex;
}
}
#media screen and (min-width: 601px) {
/* ------------------------------- DESKTOP NAVBAR */
.mobile-navbar {
display: none;
}
.desktop-navbar {
background-color: #f3f3f3;
overflow: hidden;
display: flex;
align-items: baseline;
padding: .5rem;
gap: 1rem;
}
.link {
background: none;
border: none;
text-decoration: none;
color: #777;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
}
.dropdown.active+.link,
.link:hover {
color: #000;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
left: 0;
top: calc(100% + .25rem);
background-color: #fff;
padding: .75rem;
border-radius: .25rem;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease, transform 150ms ease;
transform: translateY(-10px);
}
.dropdown.active>.link+.dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
.information-grid {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 2rem;
}
.dropdown-links {
display: flex;
flex-direction: column;
gap: .25rem;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Fox Bank</title>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links/Styles -->
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/responsive.css">
<link rel="stylesheet" href="styles/flickity.min.css" media="screen">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<!-- Javascript -->
<script src="https://kit.fontawesome.com/8821130486.js" crossorigin="anonymous"></script>
<script src="js/jquery.js" defer></script>
<script src="js/app.js" async defer></script>
<script src="js/flickity.min.js" defer></script>
</head>
<body>
<!--------------------- DESKTOP NAVBAR -->
<!--------------------------------------->
<div class="desktop-navbar">
<div>
<a href="#">
<h1>Big Bank</h1>
</a>
</div>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>About</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Meet Our Team</div>
<div class="dropdown-links">
Staff
Board of Directors
</div>
</div>
<div>
<div class="dropdown-heading">Our History</div>
<div class="dropdown-links">
Overview
Future
</div>
</div>
<div>
<div class="dropdown-heading">Blog</div>
<div class="dropdown-links">
Latest Posts
In The Community
Security & Fraud Prevention
National & International Money
</div>
</div>
<div>
<div class="dropdown-heading">Contact Us</div>
<div class="dropdown-links">
Support Center
Phone & Mailing Information
Social Media
</div>
</div>
</div>
</div>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>Products</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Checking</div>
<div class="dropdown-links">
Basic Checking
Teens Checking
Prime Checking
Elite Checking
</div>
</div>
<div>
<div class="dropdown-heading">Savings</div>
<div class="dropdown-links">
Basic Savings
Teens Savings
Prime Savings
Elite Savings
</div>
</div>
<div>
<div class="dropdown-heading">Borrow</div>
<div class="dropdown-links">
Personal Loans
Auto Loans
Credit Cards
Mortgage
Shark Loans
</div>
</div>
<div>
<div class="dropdown-heading">Retirement</div>
<div class="dropdown-links">
Traditional IRA
Roth IRA
Self Employment IRA
</div>
</div>
</div>
</div>
<button>Login</button>
</div>
<!---------------------- MOBILE NAVBAR -->
<!--------------------------------------->
<nav class="mobile-navbar">
<div class="mobile-brand-title">Fox Bank</div>
<i class="fa-solid fa-bars"></i>
<div class="mobile-navbar-links">
<ul>
<li>About</li>
<li>Products</li>
<li>Login</li>
</ul>
</div>
</nav>
<div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>CONTENT GOES HERE</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>CONTENT GOES HERE</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>CONTENT GOES HERE</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>CONTENT GOES HERE</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
The navbar variables contain node lists, not navigation bar elements, and hence don't have a classList property.
Try replacing
const mobileNavbar = document.getElementsByClassName("mobile-navbar");
const desktopNavbar = document.getElementsByClassName("desktop-navbar");
with
const mobileNavbar = document.querySelector(".mobile-navbar");
const desktopNavbar = document.querySelector(".desktop-navbar");
or add [0] to after node list values to select the first element in each list.

Overlay when click on menu (and remove border)

my name is Daniel and im working on my portfolio website. I want an overlay when i click on my hamburger menu so that everything becomes darker and the focus lays on the menu. And i want it to go away when you click on the menu again, or click on one of the menu items or click on the overlay self. (only for my mobile version)
Also i have weird border-line when i open my hamburger menu on mobile and i don't know how to remove it
Link to my website so far: http://20162.hosts.ma-cloud.nl/portfoliowebsite/
(the latest version isn't online yet)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="author" content="Daniel Gotz">
<title>Daniel Gotz | Porfolio </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="dist/hamburgers.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<section id="intro" class="intro-section">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header page-scroll">
<button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class=" hamburger-box">
<span class=" hamburger-inner"></span> </span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav right">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#intro">Intro</a> </li>
<li> <a class="page-scroll" href="#mijnwerk">Mijn werk</a> </li>
<li> <a class="page-scroll" href="#overdaniel">Over Daniel</a> </li>
<li> <a class="page-scroll" href="#contact">Contact</a> </li>
</ul>
</div>
</nav>
<div class="overlay" id="overlay"></div>
<div class="title">
<h1> Every mountain top is within reach if you just keep climbing</h1> </div>
<div class="berg">
<img src="berg.svg">
</div>
</section>
<section id="mijnwerk" class="about-section"> </section>
<section id="overdaniel" class="services-section"> </section>
<section id="contact" class="contact-section"> </section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/hamburgers.js"></script>
</body>
</html>
CSS:
.overflow {
overflow-x: hidden;
position: relative;
}
.home {
height: 100vh;
width: 100vw;
background-color: #2ecc71;
}
.mijnwerk {
height: 100vh;
width: 100vw;
background-color: #27ae60;
}
.navbar-default {
background: none;
border-color: transparent;
z-index: 3;
}
.right {
float: right;
text-align: right;
}
.navbar-default .navbar-nav>li>a {
font-family: 'Roboto', sans-serif;
color: #ecf0f1;
font-size: 14px;
}
.nav>li>a {
padding: 15px 25px;
border-style: none;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #ecf0f1;
border-style: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background: none
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-style: none;
}
h1 {
font-family: 'Exo 2' , sans-serif;
font-weight: 900;
font-size: 37px;
line-height: 60px;
}
.title {
font-family: 'Exo 2', sans-serif;
text-align: center;
width: 350px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.berg {
position: absolute;
width: 100%;
bottom: 0;
margin: 0 0 -2px 0;
}
.overlay {
position: fixed;
top: 0;
z-index: 2;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: #333;
}
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
background: #2ecc71;
color: white;
text-align: center;
}
.about-section {
height: 100%;
background: #27ae60;
}
.services-section {
height: 100%;
background: #3498db;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
JS:
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
I hope someone can help me out with these problems! :)
With this config you just pass background to the menu, and the close button will not be included and remove the border.
.navbar-collapse navbar-ex1-collapse collapse in {
background: rgba(27, 27, 62, 0.5);
}
.navbar-default {
background: none;
border: none;
z-index: 3;
}

Categories

Resources