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.
Related
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>
I am currently learning HTML, CSS and JS, for my first project I am working on making a basic calculator using these languages and so far I have almost completed the UI of the calculator. It looks like this so far:
Image of calculator display (sorry I still cant posts pictures directly with questions)
My question is: that say the user inputs a large number, I want the display to expand and have the number split across 2 lines, but no matter what I have tried I can't seem to get it working. (I have tried: word-wrap: breakword, word-break: break-all, overflow-wrap: break-word etc.)
What the display looks like when a large number is hardcoded to appear
How I want large numbers to appear on the display (a screenshot from someone else's calculator)
Can anyone help me figure this out.
My code:
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
/* white-space: normal; */
font-family: "calcFont", Helvetica;
font-size: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>
I haven't actually added any JS yet because I'm just trying to make sure the UI is good first then I'll move on to it.
Any help would be much appreciated. Thanks!
You can try word-break: break-all; this break the numbers into a separate when overflowed
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
/* white-space: normal; */
font-family: "calcFont", Helvetica;
font-size: 40px;
word-break: break-all;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can use word-wrap: anywhere; to achieve this effect.
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
font-family: "calcFont", Helvetica;
font-size: 40px;
word-wrap: anywhere;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://github.com/koukalcreativeco/Web-Store.git
Github code is above, I have a slide out shopping cart on this page. When I add too many items to the cart they start to go off the screen. I want to be able to scroll down on the cart. How would I go about doing that?
This one can be implemented quite easily by making use of the overflow attribute of your .shoppingcart class in CSS.
Simply add overflow: auto to the shopping cart class as shown below.
/* adding functions to buttons */
const ready = () => {
var removeCartItemButtons = document.getElementsByClassName('bt-remove');
for (let i = 0; i < removeCartItemButtons.length; i++){
var button = removeCartItemButtons[i];
button.addEventListener('click', removeCartItem);
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input');
for (let i = 0; i < quantityInputs.length; i++){
var input = quantityInputs[i];
input.addEventListener('click', quantityChanged);
}
var addToCartButtons = document.getElementsByClassName('add-item-button');
for(let i = 0; i < addToCartButtons.length; i++){
var button = addToCartButtons[i];
button.addEventListener('click', addToCartClicked);
}
document.getElementsByClassName('bt-purchase')[0].addEventListener('click', purchaseClicked);
}
/* In cart buttons and quantity */
function purchaseClicked() {
alert('Thank you for your purchase')
var cartItems = document.getElementsByClassName('cart-items')[0]
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
/* Adding Items to the Cart */
const addToCartClicked = (event) => {
var button = event.target;
var shopItem = button.parentElement.parentElement;
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText;
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText;
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src;
addItemToCart(title, price, imageSrc);
updateCartTotal();
}
const addItemToCart = (title, price, imageSrc) => {
var cartRow = document.createElement('div');
cartRow.classList.add('cart-row');
var cartItems = document.getElementsByClassName('cart-items')[0];
var cartItemNames = cartItems.getElementsByClassName('cart-item-title');
for(let i = 0; i < cartItemNames.length; i++){
if (cartItemNames[i].innerText == title){
alert('This item is already added to the cart')
return
}
}
var cartRowContents = `
<div class="cart-item cart-column">
<img class="cart-item-image" src="${imageSrc}" width="50" height="50">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="bt bt-remove" type="button">REMOVE</button>
</div>`
cartRow.innerHTML = cartRowContents;
cartItems.append(cartRow);
cartRow.getElementsByClassName('bt-remove')[0].addEventListener('click', removeCartItem);
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged);
}
/* Updating Total */
const updateCartTotal = () => {
var cartItemContainer = document.getElementsByClassName('cart-items')[0];
var cartRows = cartItemContainer.getElementsByClassName('cart-row');
var total = 0;
for (let i = 0; i < cartRows.length; i++){
var cartRow = cartRows[i];
var priceElement = cartRow.getElementsByClassName('cart-price')[0];
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0];
var price = parseFloat(priceElement.innerText.replace('$', ''));
var quantity = quantityElement.value;
total = total + (price * quantity);
}
total = Math.round(total * 100) / 100;
document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total;
}
/* Shopping Cart Animation */
const navSlide = () => {
const cart = document.querySelector('#cart');
const nav = document.querySelector('.shopping-cart');
cart.addEventListener('click', () =>{
nav.classList.toggle('nav-active')
});
}
/* Calling All Functions */
navSlide();
ready();
* {
color: #FF875B;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
overflow-x: hidden;
font-family: 'Roboto Flex', sans-serif;
}
.flex-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* Header section*/
header {
display: flex;
width: 100%;
position: fixed;
z-index: 20;
height: 75px;
background-color: #FED9CB;
align-items: center;
}
.nav {
display:flex;
justify-content: flex-end;
padding-right: 10px;
flex: 4 1 0%;
}
#cart{
cursor: pointer;
}
a {
margin-left: 25px;
margin-right: 5px;
}
#logo {
height: 75px;
width: 75px;
}
.material-icons {
font-size: 75px;
color: white;
}
/* Home Page Section*/
#feature {
height: 700px;
width: 100%;
background-image: url("./photos/feature.JPG");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-top: 70px;
display:flex;
margin: 0 auto;
justify-content: center;
}
#feature .content {
margin: auto;
background-color: #FFF4F0;
height: 100px;
width: 100%;
opacity: 0.8;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
letter-spacing: 5px;
}
/* Store Section */
#store {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Luxurious Roman', cursive;
font-weight: bold;
}
#store h3 {
letter-spacing: 3px;
font-family: 'Montserrat', sans-serif;
}
#items {
display: flex;
justify-content: space-around;
align-items: center;
font-family: 'Abel', sans-serif;
}
#store img {
height: 240px;
width: 240px;
border-radius: 25px;
border-color: #FED9CB;
border: 3px;
}
.store-info {
display: flex;
justify-content:center;
flex-flow:column wrap;
flex-wrap: wrap;
margin-bottom: 20px;
}
.bt {
border-radius: 15px;
background-color:#FF875B;
border-color: #FFF4F0;
color:#FFF4F0;
padding: 5px 10px;
}
.bt:hover {
background-color: #FFF4F0;
color: #FF875B;
cursor: pointer;
}
/* Footer Section */
footer {
background-color: #FED9CB;
width: 100%;
height: 100px;
bottom: 0px;
}
#footer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* Shopping Cart Section */
.cart-row {
display: flex;
justify-content: space-between;
align-items:flex-start;
flex-direction: column;
width: 75%;
margin: 20px;
}
.cart-item {
display: flex;
justify-content: center;
flex-direction: column;
}
.cart-quantity input {
border: none;
appearance: none;
background: #FFF4F0;
padding: 12px;
border-radius: 10px;
width: 100px;
}
.container {
position: relative;
width: 80px;
height: 50px;
border-radius: 40px;
border: 2px solid;
transition: 0.5s;
}
.container .next{
position: absolute;
top: 50%;
right: 10px;
display: block;
width: 12px;
height: 12px;
border-top: 2px solid #FFF4F0;
border-left: 2px solid #FFF4F0;
z-index: 1;
transform: translateY(-50%) rotate(135deg);
cursor: pointer;
}
.container .prev{
position: absolute;
top: 50%;
left: 10px;
display: block;
width: 12px;
height: 12px;
border-top: 2px solid #FFF4F0;
border-left: 2px solid #FFF4F0;
z-index: 1;
transform: translateY(-50%) rotate(315deg);
cursor: pointer;
}
#box span{
position: absolute;
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 46px;
color:#FFF4F0;
font-size: 24px;
font-weight: 700;
user-select: none;
}
.cart-item-image {
border-radius: 20px;
}
.shopping-cart h5{
letter-spacing: 5px;
}
.shopping-cart {
position:absolute;
right: 0px;
height: 93vh;
top:7vh;
background-color: #FED9CB;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
overflow: auto;
}
.nav-active {
transform: translateX(0%);
}
/*Phone Screen */
#media only screen and (max-width: 780px) {
.shopping-cart {
width: 50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css" />
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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=Luxurious+Roman&display=swap" rel="stylesheet">
<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=Roboto+Flex:opsz,wght#8..144,200&display=swap" rel="stylesheet">
<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=Abel&family=Montserrat:wght#200&family=Roboto+Flex:opsz,wght#8..144,200&display=swap" rel="stylesheet">
<title>Store</title>
</head>
<body>
<script type="text/babel" src="./index.js" async></script>
<header class="flex-container">
<img src="./photos/logo.png" id="logo"/>
<div class="nav">
<i class="material-icons">home</i>
<a id="cart-btn"><i id="cart" class="material-icons">shopping_cart</i></a>
</div>
<div class="shopping-cart">
<h5>Cart</h5>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$0</span>
</div>
<button class="bt bt-purchase" type="button">PURCHASE</button>
</div>
</header>
<main>
<div id="feature" class="flex-container">
<div class="content">
<h3>EVERMAY</h3>
</div>
</div>
<div id="store" class="flex-container">
<h3>ITEMS</h3>
<div class="flex-container" id="items">
<div class="item">
<img class="shop-item-image" src="./photos/IMG1.JPG" />
<div class="store-info">
<span class="shop-item-title">DAILY REMINDER</span>
<p class="shop-item-price">$9.99</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG2.JPG" />
<div class="store-info">
<span class="shop-item-title">CHECKERED</span>
<p class="shop-item-price">$4.99</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG3.JPG" />
<div class="store-info">
<span class="shop-item-title">LA LUNE</span>
<p class="shop-item-price">$12.99</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG4.JPG" />
<div class="store-info">
<span class="shop-item-title">LE SOLEIL</span>
<p class="shop-item-price">$5.95</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG5.JPG" />
<div class="store-info">
<span class="shop-item-title">ABSTRACT OCEAN</span>
<p class="shop-item-price">$7.50</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG6.JPG" />
<div class="store-info">
<span class="shop-item-title">GARDEN</span>
<p class="shop-item-price">$10.25</p>
<button class="bt add-item-button">+</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="flex-container" id="footer">
<h5>CONTACT</h5>
<P>Evermay#gmail.com</P>
<p>(111) 111-1111</p>
</footer>
</body>
</html>
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>
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>