I have been trying to build a website layout with a responsive sidebar and a bottom navbar --both of which have a fixed position--
I want the bottom navbar to get pushed and resized by the sidebar in wider viewports.
I have tried using flexbox utility in css and bootstrap , but that didn't solve anything. I had the position property of the bottom navbar set to absolute and i wrapped it in a container with the maion content of the page, but that also didn't work
var sideBarOpen = false;
function openNav(){
document.getElementById("sideNav").style.width = "250px";
// document.getElementById("main").style.marginLeft = "250px";
// document.getElementById("main").style.opacity = "0.1";
document.getElementById("main").style.filter = "blur(2px)";
sideBarOpen = true;
}
function closeNav(){
document.getElementById("sideNav").style.width = "0";
// document.getElementById("main").style.marginLeft = "0";
// document.getElementById("main").style.opacity = "1";
document.getElementById("main").style.filter = "blur(0)";
sideBarOpen = false;
}
$( document ).click(function( event ) {
var target = $( event.target );
if(!target.is("#sideNav") && !$("#sideNav").has(event.target).length && !target.is(".sidebar-toggle") && sideBarOpen){
closeNav();
}else if(target.is(".sidebar-toggle")){
openNav();
}
});
// $("body").click(function (e) {
// });
html{
height: 100%;
width: 100%;
margin: 0;
}
body{
width: 100%;
height: 100%;
margin: 0;
font-family: "Lato", sans-serif;
}
/* .wrapper {
height: 100%;
width: 100%;
margin: 0;
}
.container{
min-height: 100vh;
min-width: 100vh;
margin: 0;
transition: .2s;
} */
/* .container {
margin: 270px;
transition: .2s;
} */
.side-nav {
width: auto;
min-width: 270px;
/* min-height: 100vh; */
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x:hidden ;
padding-top: 60px;
transition: 0.2s;
}
.side-nav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #f1f1f1;
}
.side-nav .close-btn {
position: absolute;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
background-color: inherit;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
display: none;
}
#main {
padding: 20px;
width: 100%;
margin-left: 270px;
transition: all .2s;
}
.bottom-nav{
position: fixed;
display: flex;
justify-content:space-evenly;
align-content:stretch;
background-color: #0080ffd7;
width: 100%;
bottom: 0;
margin: 0;
/* max-width: inherit;
min-width: inherit; */
overflow: auto;
/* text-align: center; */
}
.bottom-nav a{
float: left;
width: 100%;
text-align: center;
padding: 12px 0;
transition: all 0.3 ease;
color: azure;
font-size: 25px;
text-decoration: none;
border: none;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 1px solid;
outline-color: #6eaec280;
outline-offset: 0px;
text-shadow: none;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.sidebar-toggle{
display: none;
transition: .1s;
}
.bottom-nav span{
color: azure;
font-size: 15px;
display: block;
}
.bottom-nav i{
color: azure;
font-size: 25px;
display: block;
}
.bottom-nav a:hover{
background-color: #4355aa;
border: 1px solid;
border-color:#6eaec280;
box-shadow: inset 0 0 20px hsla(241, 49%, 55%, 0.5), 0 0 20px rgba(58, 174, 219, 0.2);
outline-color: rgba(199, 42, 42, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #427388;
}
a.active {
background-color:#af684c ;
}
#media screen and (max-height:450px){
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#media screen and (max-width: 992px){
.side-nav{
width: 0;
min-width: 0;
min-height: 0;
}
#main {
margin: 0;
}
/* .container {
min-height: 100vh;
min-width: 100vh;
margin: 0;
} */
.bottom-nav{
margin: 0;
}
.sidebar-toggle{
display: inline;
}
}
<!doctype html>
<html lang="en">
<head>
<title>UI look</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="side-nav" id="sideNav">
<span class="close-btn" onclick="closeNav()">× </span>
<div>
<section>
<h3>Services</h3>
Home
About
</section>
<section>
<h3>Account</h3>
Login
Register
</section>
</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<div id="main">
<span class="sidebar-toggle" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis doloremque, natus cum nulla quos, aperiam id non enim, quo incidunt alias. Tempore mollitia incidunt asperiores dignissimos accusamus ducimus expedita excepturi!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio dolorum tenetur corrupti eum sunt ut excepturi tempora magnam, quisquam doloribus, error veritatis possimus quidem saepe. Error totam facilis quod harum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid aliquam veritatis, esse necessitatibus neque officia, error iste ipsum non recusandae praesentium odit fugiat atque, eveniet dignissimos! Earum dolore voluptates iure.</p>
</div>
<div class="bottom-nav" id="bottomNav">
<i class="fas fa-home"></i><span>main</span>
<i class="fas fa-bell"></i><span>notifications</span>
<i class="fas fa-question"></i><span>help</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.3/umd/popper.min.js" integrity="sha512-53CQcu9ciJDlqhK7UD8dZZ+TF2PFGZrOngEYM/8qucuQba+a+BXOIRsp9PoMNJI3ZeLMVNIxIfZLbG/CdHI5PA==" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
As I see it you have 2 options:
1.Leave the HTMl as is, and using jQuery determine the width of the bottom bar when the sidebar is open:
$(window).resize(function(){
if($(window).width() > 1024){
$('.bottom-nav').width($(window).width() - $('.side-nav').width())
}
})
2.Use a container for both the side-nav and the bottom-nav and set its position to fixed or absolute. (this will only work if as I understood when the sidebar is open, the main content shouldn't be accessible and should be blurred)
Related
I have a problem when I hover my article with class="card" name inside my div class="container", it looks like the article overlaps the nav. How do I fix this without removing my transform scale in .card:hover? I want to make it without overlapping with the nav when I hover over it.
window.onscroll = function() {
myFunction()
};
var navbar = document.querySelector(".myNav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#400;500;700&display=swap');
* {
text-decoration: none;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: url('/Website/Images/SPY_X_FAMILY.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 200vh;
margin: 0;
padding: 0;
}
.header-container {
margin: 0;
opacity: 0.885;
}
.container {
padding: 10px;
background-color: #FFA1C9;
float: left;
width: 75%;
display: flex;
flex-direction: column;
}
nav {
background-color: #F94892;
margin: 0 50px 50px 50px;
border-radius: 5px;
transition: 0.3s;
}
nav:hover {
transform: scale(1.005);
transition: 0.3s;
}
nav li {
color: rgb(227, 118, 118);
text-align: center;
padding: 10px;
}
nav ul {
margin-top: 0;
}
nav a {
color: white;
font-family: 'Quicksand';
font-size: 20px;
}
.myHeader {
text-align: center;
background-color: #FFC4C4;
margin: 20px 20px 0 20px;
border-radius: 10px;
padding: 12px;
}
header h1>img {
width: 42%;
}
nav li {
margin: 0;
}
nav a {
color: #fff;
font-size: 20px;
font-weight: 700;
position: relative;
z-index: 0;
font-family: 'Quicksand';
}
nav a::before {
content: "";
position: absolute;
width: 0;
height: 15px;
background: rgb(182, 1, 32);
bottom: 0;
left: 0;
z-index: -1;
transition: 0.2s linear;
}
nav a:hover::before {
width: 100%;
}
.card {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card:hover {
transform: scale(1.0025);
transition: 0.2s;
position: relative;
}
.content-container>h2 {
margin: 10px;
}
/* text font-size */
h2 {
font-size: 2.25em;
color: rgb(212, 27, 58);
font-family: sans-serif;
font-weight: 700;
margin: 20px;
}
p {
font-size: 1.25em;
color: F94892;
}
h3 {
font-size: 1.25em;
color: rgb(212, 27, 58);
}
h1 {
margin: 0;
}
/* image */
.image-style {
text-align: center;
width: 100%;
max-height: 300%;
object-fit: cover;
object-position: center;
}
/* sticky navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
margin: 0;
transition: 0.3s;
transform: scale(1.0025);
}
.sticky li {
display: inline-block;
padding-left: 50px;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky+nav {
padding-top: 60px;
}
/* profile things */
.card-v2 {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card-v2:hover {
transform: scale(1.0025);
transition: 0.2s;
box-shadow: 0 5px 10px 5px #F94892;
}
.profile {
background-color: #FFA1C9;
padding: 5px;
margin: 0;
float: right;
width: 25%
}
.profile img {
width: 200px;
}
.profile header {
text-align: center;
}
.profile-head {
display: inline;
}
#aside {
background-color: #FFA1C9;
margin: 0;
}
.card-v3 {
background-color: #FFC4C4;
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card-v3:hover {
box-shadow: 0 4px 8px 8px #efd6d6;
}
/* table */
.table-style {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My Problem</title>
</head>
<body>
<header class="header-container header-scroll">
<div class="myHeader">
<h1>
<img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
</h1>
</div>
<nav class="myNav">
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about'>About<a/></li>
<li><a href='#other'>Other</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<article id="home" class="content-container-column card ">
<h2>Header 2</h2>
<img src="/Website/Images/3774625814.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto culpa ab enim tempora atque corporis nam rem, exercitationem quasi cumque et quam quisquam odio, labore fugit molestias, quo quod?</p>
<p>Lorem</p>
<h3>Header 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore nisi provident quasi reiciendis odit reprehenderit ut non, voluptatum perspiciatis blanditiis illo a! Rem, recusandae ab commodi provident ex praesentium.</p>
</article>
<article id="about" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/357396304.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi expedita soluta nihil, praesentium perferendis cum rerum similique ab? Natus saepe molestias reiciendis voluptas voluptatibus consectetur adipisci praesentium asperiores deleniti
odio.</p>
</article>
<article id="other" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/spy-x-family-yor-forger.gif" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores tempora doloribus dicta quibusdam, corrupti quam maiores laboriosam quo voluptatum autem ea ad quaerat id suscipit magnam unde cupiditate, voluptates harum.</p>
</article>
</div>
<aside id="aside" class="profile">
<article class="card-v2">
<header class="profile-head">
<h2>About Me</h2>
<figure class="card-v3">
<img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
</figure>
</header>
<section>
<table class="table-style">
<tr>
<th>Name:</th>
<td></td>
</tr>
<tr>
<th>Tempat, tanggal lahir:</th>
<td></td>
</tr>
<tr>
<th>Alamat:</th>
<td></td>
</tr>
<tr>
<th>Agama:</th>
<td></td>
</tr>
<tr>
</tr>
</table>
</section>
</article>
</aside>
</main>
<script src="muscle.js"></script>
</body>
</html>
If anything is missing from the snippet, you can check my jsfiddle here
What you're experiencing is something referred to as The Stacking Context which, if you think about it from a top-down perspective, is how elements are rendered in the browser. To solve this, you can set the parent element -- in this case the header-container -- to position: relative; and give it a z-index of 1 to override the default of 0. That will elevate it above the card which is using the default of 0 even when hovered.
Here's another good explanation for it as well: https://www.joshwcomeau.com/css/stacking-contexts/
window.onscroll = function() {
myFunction()
};
var navbar = document.querySelector(".myNav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#400;500;700&display=swap');
* {
text-decoration: none;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: url('/Website/Images/SPY_X_FAMILY.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 200vh;
margin: 0;
padding: 0;
}
.header-container {
margin: 0;
opacity: 0.885;
position: relative;
z-index: 1;
}
.container {
padding: 10px;
background-color: #FFA1C9;
float: left;
width: 75%;
display: flex;
flex-direction: column;
}
nav {
background-color: #F94892;
margin: 0 50px 50px 50px;
border-radius: 5px;
transition: 0.3s;
z-index: 2;
}
nav:hover {
transform: scale(1.005);
transition: 0.3s;
}
nav li {
color: rgb(227, 118, 118);
text-align: center;
padding: 10px;
}
nav ul {
margin-top: 0;
}
nav a {
color: white;
font-family: 'Quicksand';
font-size: 20px;
}
.myHeader {
text-align: center;
background-color: #FFC4C4;
margin: 20px 20px 0 20px;
border-radius: 10px;
padding: 12px;
}
header h1>img {
width: 42%;
}
nav li {
margin: 0;
}
nav a {
color: #fff;
font-size: 20px;
font-weight: 700;
position: relative;
z-index: 0;
font-family: 'Quicksand';
}
nav a::before {
content: "";
position: absolute;
width: 0;
height: 15px;
background: rgb(182, 1, 32);
bottom: 0;
left: 0;
z-index: -1;
transition: 0.2s linear;
}
nav a:hover::before {
width: 100%;
}
.card {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
transition: 0.2s;
}
.card:hover {
transform: scale(1.0025);
transition: 0.2s;
}
.content-container>h2 {
margin: 10px;
}
/* text font-size */
h2 {
font-size: 2.25em;
color: rgb(212, 27, 58);
font-family: sans-serif;
font-weight: 700;
margin: 20px;
}
p {
font-size: 1.25em;
color: F94892;
}
h3 {
font-size: 1.25em;
color: rgb(212, 27, 58);
}
h1 {
margin: 0;
}
/* image */
.image-style {
text-align: center;
width: 100%;
max-height: 300%;
object-fit: cover;
object-position: center;
}
/* sticky navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
margin: 0;
transition: 0.3s;
transform: scale(1.0025);
z-index: 1;
}
.sticky li {
display: inline-block;
padding-left: 50px;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky+nav {
padding-top: 60px;
}
/* profile things */
.card-v2 {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
z-index: 0;
}
.card-v2:hover {
transform: scale(1.0025);
transition: 0.2s;
box-shadow: 0 5px 10px 5px #F94892;
}
.profile {
background-color: #FFA1C9;
padding: 5px;
margin: 0;
float: right;
width: 25%
}
.profile img {
width: 200px;
}
.profile header {
text-align: center;
}
.profile-head {
display: inline;
}
#aside {
background-color: #FFA1C9;
margin: 0;
}
.card-v3 {
background-color: #FFC4C4;
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
z-index: 0;
}
.card-v3:hover {
box-shadow: 0 4px 8px 8px #efd6d6;
}
/* table */
.table-style {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My Problem</title>
</head>
<body>
<header class="header-container header-scroll">
<div class="myHeader">
<h1>
<img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
</h1>
</div>
<nav class="myNav">
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about'>About</a>a></li>
<li><a href='#other'>Other</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<article id="home" class="content-container-column card ">
<h2>Header 2</h2>
<img src="/Website/Images/3774625814.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto culpa ab enim tempora atque corporis nam rem, exercitationem quasi cumque et quam quisquam odio, labore fugit molestias, quo quod?</p>
<p>Lorem</p>
<h3>Header 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore nisi provident quasi reiciendis odit reprehenderit ut non, voluptatum perspiciatis blanditiis illo a! Rem, recusandae ab commodi provident ex praesentium.</p>
</article>
<article id="about" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/357396304.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi expedita soluta nihil, praesentium perferendis cum rerum similique ab? Natus saepe molestias reiciendis voluptas voluptatibus consectetur adipisci praesentium asperiores deleniti
odio.
</p>
</article>
<article id="other" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/spy-x-family-yor-forger.gif" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores tempora doloribus dicta quibusdam, corrupti quam maiores laboriosam quo voluptatum autem ea ad quaerat id suscipit magnam unde cupiditate, voluptates harum.</p>
</article>
</div>
<aside id="aside" class="profile">
<article class="card-v2">
<header class="profile-head">
<h2>About Me</h2>
<figure class="card-v3">
<img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
</figure>
</header>
<section>
<table class="table-style">
<tr>
<th>Name:</th>
<td></td>
</tr>
<tr>
<th>Tempat, tanggal lahir:</th>
<td></td>
</tr>
<tr>
<th>Alamat:</th>
<td></td>
</tr>
<tr>
<th>Agama:</th>
<td></td>
</tr>
<tr>
</tr>
</table>
</section>
</article>
</aside>
</main>
<script src="muscle.js"></script>
</body>
</html>
try to set the z-index of the nav to 100
nav {
z-index: 100;
}
So I want to change the active class in navbar whenever a user scrolls. Like,
initially the Home element has active class and hence the background of Home is violet.
But as soon as I scroll down to the About Me section, I want the background of Home in navbar to be white and that of About to be violet.
But I'm not much experienced with JavaScript. I found a codepen in a YouTube video which showed the navbar links changing the active class on scrolling.
Here's the codepen that I got from YouTube:
https://codepen.io/Web_Cifar/pen/LYRBbVE
That code snippet from YouTube:
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll("nav .container ul li");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
#import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: "Roboto Mono";
font-size: 24px;
scroll-behavior: smooth;
}
section {
height: 100vh;
width: 100%;
background-color: gray;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
#home {
background-color: royalblue;
}
#about {
background-color: aquamarine;
}
#footer {
background-color: crimson;
}
nav {
position: sticky;
top: 0;
background-color: white;
}
nav .container {
width: 90%;
max-width: 1000px;
margin: 0 auto;
text-align: center;
padding: 10px;
}
nav .container ul li {
display: inline-block;
}
nav .container ul li a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
color: black;
}
nav .container ul li.active {
background-color: crimson;
transition: 0.3s ease background-color;
}
nav .container ul li.active a {
color: rgb(255, 255, 255);
}
/* ********************* */
/* This Code is for only the floating card in right bottom corner */
/* ********************** */
#import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
padding: 0;
margin: 0;
color: var(--color-4);
text-decoration: none;
}
#webCifar-sidebox {
position: fixed;
right: 0px;
bottom: 0px;
overflow-x: clip;
width: 300px;
font-size: 16px;
}
#webCifar-sidebox p {
padding: 0;
margin: 0;
}
#webCifar {
--color-1: #17bcb4;
--color-2: #24252a;
--color-3: #244044;
--color-4: #f3f8f7;
background: var(--color-2);
display: inline-block;
color: var(--color-4);
padding: 10px 17px;
border-radius: 6px;
font-family: "Roboto Mono", monospace;
text-align: center;
position: absolute;
right: 5px;
bottom: 5px;
-webkit-transform: translateX(calc(100% + 5px));
transform: translateX(calc(100% + 5px));
-webkit-transition: 0.5s ease-out transform;
transition: 0.5s ease-out transform;
z-index: 4;
}
#webCifar.active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#webCifar .logo {
font-size: 25px;
}
#webCifar .author {
margin-top: 10px;
margin-bottom: 20px;
}
#webCifar .author span {
background-color: var(--color-3);
padding: 3px;
border-radius: 4px;
}
#webCifar .items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#webCifar .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
padding: 5px;
border-radius: 4px;
text-align: left;
}
#webCifar .item:hover {
background-color: var(--color-3);
}
#webCifar svg {
max-width: 20px;
}
#webCifar .close {
position: absolute;
display: inline-block;
height: 30px;
width: 30px;
right: 5px;
top: 5px;
padding: 5px;
background-color: var(--color-3);
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}
#webCifar-icon {
--color-2: #24252a;
--color-3: #244044;
font-family: "Roboto Mono", monospace;
text-align: left;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: var(--color-2);
color: white;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 5px;
border-radius: 4px;
gap: 5px;
margin: 5px;
cursor: pointer;
z-index: 1;
position: relative;
right: -27%;
border: 1px solid #ffffff7d;
}
#webCifar-icon svg {
max-width: 20px;
}
<nav>
<div class="container">
<ul>
<li class="home active">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="footer">Footer</li>
</ul>
</div>
</nav>
<section id="home">
<h1>Home</h1>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
<section id="footer">
<h1>Footer</h1>
</section>
<!-- ******************* -->
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<!-- This Code is for only the floating card in right bottom corner -->
<!-- ******************** -->
<div id="webCifar-sidebox">
<div id="webCifar">
<h2 class="logo">Web Cifar</h2>
<p class="author">Coded By <span>Shaif Arfan</span> </p>
<div class="items">
<a href="https://www.youtube.com/channel/UCdxaLo9ALJgXgOUDURRPGiQ" target="_blank" class="item youtubeLink">
<svg title="watch how we made this" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
</svg>
<p>Watch how we made this.
</p>
</a>
<a href="https://webcifar.com" target="_blank" class="item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<p>https://webcifar.com</p>
</a>
</div>
<div class="close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</div>
<div id="webCifar-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>Info About the pen</p>
</div>
</div>
This is my snippet:
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll(".navbar .nav-container a");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
#import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght#0,300;0,400;0,700;1,300;1,400;1,700&family=Nunito+Sans:ital,wght#0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
#font-face {
font-family: "neoneon";
src: url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.ttf) format('truetype'), /* ../../<repo-name>Fonts/<font-name>.<format> is for using custom fonts on github*/
url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.eot) format('embedded-opentype'), url(./Assets/Fonts/Neoneon/Neoneon.woff) format('woff'), /* ../Fonts/<font-name>.<format> is for using locally and on live server */
url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.svg) format('svg'), url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.woff2) format('woff2');
font-weight: normal;
font-style: normal;
}
html,
body {
height: 100%;
margin: 0;
max-width: 100vw;
overflow-x: hidden;
}
body {
scroll-behavior: smooth;
font-family: 'Nunito Sans', sans-serif;
}
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: rgba(225, 0, 225, 0.469);
}
::-webkit-scrollbar-thumb:hover {
background: rgb(225, 0, 225);
}
.navbar {
overflow: hidden;
background-color: white;
box-shadow: 0 2px #88888853;
width: 100vw;
position: fixed;
z-index: 2;
}
.nav-container {
float: right;
width: 35%;
display: flex;
justify-content: space-around;
}
.nav-container a {
padding: 16px;
color: black;
text-decoration: none;
}
.nav-container .active {
background-color: rgba(225, 0, 225, 0.469);
}
.nav-container a:hover:not(.active) {
background-color: rgba(0, 0, 0, 0.265);
}
#brief {
width: 100vw;
display: flex;
justify-content: center;
padding: 140px 0 140px;
background-image: url('./Assets/images/bg.jpg');
background-repeat: no-repeat;
background-size: cover;
}
#brief-container {
width: 40%;
display: flex;
flex-direction: column;
}
#brief-container .brief-pic {
display: flex;
justify-content: center;
z-index: 1;
}
#brief-container img {
border: 3px solid white;
border-radius: 50%;
width: 150px;
}
#brief-container .brief-text {
background-color: white;
gap: 20px;
text-align: center;
display: flex;
flex-direction: column;
margin: -70px;
padding: 90px 30px 40px;
}
#brief-container .brief-name {
font-family: neoneon;
font-size: 30px;
font-style: italic;
font-weight: bold;
}
#brief-container .brief-name span,
#about .about-title span {
color: rgb(225, 0, 225);
}
#brief-container .brief-description {
font-family: 'Comic Neue', cursive;
font-size: 20px;
}
#about {
width: 70vw;
display: flex;
flex-direction: column;
margin: 30px auto;
padding: 50px 0;
gap: 20px;
top: 0;
}
#about .about-title {
font-family: neoneon;
font-size: 40px;
font-weight: bold;
}
#about .about-content {
text-align: justify;
font-size: 20px;
}
#about,
#projects,
#contact {
scroll-margin-top: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
<title>Web</title>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a class="brief active" href="index.html">Home</a>
<a class="about" href="#about">About</a>
<a class="project" href="#">Projects</a>
<a class="contact" href="#">Contact</a>
</div>
</nav>
<section id="brief">
<div id="brief-container">
<div class="brief-pic">
<img src="./Assets/images/pfp.jpg" alt="profile picture">
</div>
<div class="brief-text">
<div class="brief-name">
Web <span>Web</span>
</div>
<div class="brief-description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus molestiae sit earum consectetur quae id eius esse magnam hic, cumque, consequuntur numquam possimus doloremque rem vitae. Illo exercitationem accusantium laboriosam.
</div>
</div>
</div>
</section>
<section id="about">
<div class="about-title">
About <span>Me</span>
</div>
<div class="about-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae ab consequatur, beatae architecto quidem sequi doloremque quam animi quasi est. Placeat impedit facere reiciendis ab deleniti, dolorum accusamus illo libero. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Recusandae, numquam quidem. Ratione qui neque esse aliquid quod impedit hic facilis aut, perspiciatis suscipit exercitationem sunt. Repudiandae ex accusamus blanditiis. Sed.</div>
</section>
</body>
</html>
So basically my HTML is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a class="brief active" href="#brief">Home</a>
<a class="about" href="#about">About</a>
<a class="contact" href="#">Contact</a>
</div>
</nav>
<section id="brief">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam facere unde itaque ea, minus commodi voluptate in a quibusdam minima dolores veniam, consectetur, quam eveniet architecto esse aut culpa iure!
</section>
<section id="about">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ipsa tenetur sapiente magnam, reprehenderit odit ex. Delectus laborum omnis laudantium ea recusandae nihil, sequi, atque voluptatem tenetur inventore vero voluptatibus.
</section>
</body>
</html>
And JavaScript is:
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll(".navbar .nav-container a");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
I've looked a lot but I'm unable to find a solution.
Please help me find and correct the error in my code.
Remove overflow-x: hidden; from html and body.
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll(".navbar .nav-container a");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
#import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght#0,300;0,400;0,700;1,300;1,400;1,700&family=Nunito+Sans:ital,wght#0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
#font-face {
font-family: "neoneon";
src: url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.ttf) format('truetype'), /* ../../<repo-name>Fonts/<font-name>.<format> is for using custom fonts on github*/
url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.eot) format('embedded-opentype'), url(./Assets/Fonts/Neoneon/Neoneon.woff) format('woff'), /* ../Fonts/<font-name>.<format> is for using locally and on live server */
url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.svg) format('svg'), url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.woff2) format('woff2');
font-weight: normal;
font-style: normal;
}
html,
body {
height: 100%;
margin: 0;
max-width: 100vw;
/* overflow-x: hidden; */
}
body {
scroll-behavior: smooth;
font-family: 'Nunito Sans', sans-serif;
}
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: rgba(225, 0, 225, 0.469);
}
::-webkit-scrollbar-thumb:hover {
background: rgb(225, 0, 225);
}
.navbar {
overflow: hidden;
background-color: white;
box-shadow: 0 2px #88888853;
width: 100vw;
position: fixed;
z-index: 2;
}
.nav-container {
float: right;
width: 35%;
display: flex;
justify-content: space-around;
}
.nav-container a {
padding: 16px;
color: black;
text-decoration: none;
}
.nav-container .active {
background-color: rgba(225, 0, 225, 0.469);
}
.nav-container a:hover:not(.active) {
background-color: rgba(0, 0, 0, 0.265);
}
#brief {
width: 100vw;
display: flex;
justify-content: center;
padding: 140px 0 140px;
background-image: url('./Assets/images/bg.jpg');
background-repeat: no-repeat;
background-size: cover;
}
#brief-container {
width: 40%;
display: flex;
flex-direction: column;
}
#brief-container .brief-pic {
display: flex;
justify-content: center;
z-index: 1;
}
#brief-container img {
border: 3px solid white;
border-radius: 50%;
width: 150px;
}
#brief-container .brief-text {
background-color: white;
gap: 20px;
text-align: center;
display: flex;
flex-direction: column;
margin: -70px;
padding: 90px 30px 40px;
}
#brief-container .brief-name {
font-family: neoneon;
font-size: 30px;
font-style: italic;
font-weight: bold;
}
#brief-container .brief-name span,
#about .about-title span {
color: rgb(225, 0, 225);
}
#brief-container .brief-description {
font-family: 'Comic Neue', cursive;
font-size: 20px;
}
#about {
width: 70vw;
display: flex;
flex-direction: column;
margin: 30px auto;
padding: 50px 0;
gap: 20px;
top: 0;
}
#about .about-title {
font-family: neoneon;
font-size: 40px;
font-weight: bold;
}
#about .about-content {
text-align: justify;
font-size: 20px;
}
#about,
#projects,
#contact {
scroll-margin-top: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
<title>Web</title>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a class="brief active" href="index.html">Home</a>
<a class="about" href="#about">About</a>
<a class="project" href="#">Projects</a>
<a class="contact" href="#">Contact</a>
</div>
</nav>
<section id="brief">
<div id="brief-container">
<div class="brief-pic">
<img src="./Assets/images/pfp.jpg" alt="profile picture">
</div>
<div class="brief-text">
<div class="brief-name">
Web <span>Web</span>
</div>
<div class="brief-description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus molestiae sit earum consectetur quae id eius esse magnam hic, cumque, consequuntur numquam possimus doloremque rem vitae. Illo exercitationem accusantium laboriosam.
</div>
</div>
</div>
</section>
<section id="about">
<div class="about-title">
About <span>Me</span>
</div>
<div class="about-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae ab consequatur, beatae architecto quidem sequi doloremque quam animi quasi est. Placeat impedit facere reiciendis ab deleniti, dolorum accusamus illo libero. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Recusandae, numquam quidem. Ratione qui neque esse aliquid quod impedit hic facilis aut, perspiciatis suscipit exercitationem sunt. Repudiandae ex accusamus blanditiis. Sed.</div>
</section>
</body>
</html>
I am quite new to this, so I do not know if I have something that clashes with each other.
But I want the "textbox" to be stuck to the position under the navbar, and that it is scrollable when the information within exceeds the screen size. I also do not want the box to move when the screen gets resized, I just want the text to get smaller, like using a min-width.
I have a bit of JavaScript connected to this website too, but I do not know if it's needed to include it.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins";
}
.background {
background: linear-gradient(
to bottom left,
rgba(0, 0, 0, 0.7),
rgba(255, 255, 255, 0.4)
),
url(./Revendreth111.jpg);
width: 100%;
height: 1600px;
background-size: cover cover;
overflow: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
position: fixed;
top: 0;
right: 0;
width: 100%;
z-index: 999;
}
li {
/* float: right; */
float: left;
border-right: 1px solid rgb(87, 87, 87);
}
li a {
display: block;
color: rgb(161, 161, 161);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: rgb(27, 27, 27);
}
a:hover {
color: #800a0a;
font-weight: normal;
}
.active {
background-color: #610707;
}
#media screen and (max-width: 600px) {
ul.navbar li.right,
ul.topnav li {
float: none;
}
}
/* Textbox */
.text-box {
background: rgba(12, 12, 12, 0.555);
color: rgb(161, 161, 161);
margin-top: -80%;
width: 70%;
height: 150%;
margin-left: auto;
margin-right: auto;
padding: 20px;
/* text-align: center; */
filter: drop-shadow(0 0.2rem 0.9rem rgba(0, 0, 0, 0.418));
backdrop-filter: blur(0.11rem);
padding: 20px;
position: relative;
/* top: 0px; */
}
#sidebar {
background-color: rgba(0, 0, 0, 0.418);
padding: 20px;
width: 40%;
}
.paragraph {
width: 90%;
padding: 20px;
}
.row {
display: flex;
}
.column {
flex: 50%;
margin-left: 3%;
}
#logo {
width: 40px;
margin: 10px;
position: relative;
/* Adjust these values accordingly */
top: 18px;
left: 5px;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: rgba(179, 179, 179, 0.568); /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 50%; /* Rounded corners */
font-size: 18px; /* Increase font size */
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.377));
}
#myBtn:hover {
background-color: #0e0e0e69; /* Add a dark-grey background on hover */
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.377));
}
/* Scroll bar customization */
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f100;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(27, 27, 27, 0.911);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.171);
}
.footer {
margin-top: 20px;
color: white;
text-align: center;
font-family: arial;
font-size: 13px;
font-style: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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=Poppins:wght#100;300;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./Test1.css" />
<title>PLACE HOLDER / DRAENOR-EU</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<li>home</li>
<li>about</li>
<li>progress</li>
<li>apply</li>
</ul>
<div class="background"></div>
<div class="text-box">
<div class="row">
<div class="column"><h1><img src="./logo.png" alt="" id="logo"> Welcome to Place Holder</h1>
<p class="paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima non aspernatur ab architecto asperiores nemo odit dolorum explicabo autem eaque hic deserunt facere impedit maiores debitis obcaecati quibusdam vel et eveniet blanditiis recusandae nihil, modi earum odio? Repellendus dolorem atque dolor quisquam, fugit et ipsa. Dolorem facilis totam dolore aliquam.
</p>
<p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis repellat minus quas. Debitis explicabo, laborum quasi at facilis assumenda alias itaque eum! Maiores dolores neque mollitia odit nulla cumque, illum cum reiciendis deserunt eveniet! Est beatae architecto, minus, aut, alias soluta tempore quos numquam quod accusantium quidem corrupti ex suscipit?</p></div>
<div class="column" id="sidebar"><h2>RECRUITMENT</h2>
<p class="paragraph">Temporibus sed, quidem quo amet animi explicabo beatae illo aperiam numquam asperiores.</p></div>
</div>
</div>
</div>
</div>
<div class="footer">
Copyright © Place Holder 2021. All rights reserved.
<button onclick="topFunction()" id="myBtn" title="Go to top">▲</button>
</div>
<!-- FOOTER -->
</body>
</html>
<script type="text/javascript" src="./test1.js"></script>
not sure but....
Try using
Width="" or height=""
(IN SIDE THE DIV BLOCK)
{not verified to work}
Also! welcome to stackoverflow NEW MEMBER!
I built a simple side navigation. If you run the snippet and resize the window to smaller size you'll see a red square. If you click on it, the menu opens.
The menu opens fine, however I'd like to close the menu when I click the dark area, not the X. I tried adding a "click" eventListener to the body itself and remove the "is-open" class but didn't work. I spent several hours thinking what could be the problem and finally decided to post here and ask for your suggestion.
"use strict";
const menuToggle = document.querySelector(".menu-toggle");
const menuClose = document.querySelector(".menu-close");
const nav = menuToggle.parentElement;
menuToggle.addEventListener("click", event => {
event.preventDefault();
nav.classList.add("is-open");
document.body.style.backgroundColor = "rgba(0,0,0,0.5)";
});
menuClose.addEventListener("click", event => {
event.preventDefault();
menuToggle.nextElementSibling.style.width = null;
document.body.style.backgroundColor = null;
nav.classList.remove("is-open");
});
:root {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.menu-toggle {
width: 40px;
height: 40px;
border: 1px solid red;
cursor: pointer;
}
.menu-container {
position: absolute;
background: lightskyblue;
height: 100vh;
width: 0;
transition: width 0.4s ease-in-out;
top: 0;
left: 0;
overflow: auto;
z-index: 1;
}
.menu-close {
position: absolute;
right: 1em;
}
.nav-menu {
list-style: none;
padding-left: 0;
margin: 50px 0 0 0;
}
.nav-menu > li + li {
border-top: 1px solid #fff;
}
.nav-menu > li > a {
display: block;
color: #000;
padding: 0.8em 1em;
font-size: 1.1rem;
text-decoration: none;
text-transform: uppercase;
}
.nav.is-open .menu-container {
width: 200px;
}
.menu-close::before {
content: "\00d7";
font-size: 2.6rem;
}
/*#media screen and (min-width: 37.5em) {*/
#media screen and (min-width: 40.5em) {
body {
background: #fff !important;
}
.menu-toggle {
display: none;
}
.nav.is-open .menu-container {
width: auto;
height: auto;
}
.menu-container {
position: initial;
height: auto;
width: auto;
overflow: hidden;
}
.menu-close {
display: none;
}
.nav-menu {
display: flex;
position: static;
justify-content: center;
margin: 0;
}
.nav-menu > li {
margin-left: 1em;
}
.nav-menu > li + li {
border-top: initial;
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="hamburgerside.css">
<title>Hamburger Menu Side</title>
</head>
<body>
<nav class="nav">
<div class="menu-toggle">
<span class="menu-toggle__linecenter"></span>
</div>
<div class="menu-container">
<span class="menu-close"></span>
<ul class="nav-menu">
<li>Home</li>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
</nav>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus accusantium aliquid consequatur facere illum
incidunt magnam magni maiores nam neque numquam omnis
perferendis porro quae quibusdam, quos sed tenetur ullam.
</p>
</main>
<script src="hamburgerside.js"></script>
</body>
</html>
So if I understand correctly what you are trying to do, you will need to use document rather than body for the click event. You will also need to use event.stopImmediatePropagation() rather than event.preventDefault() which will allow the first click but not the second. Also in the condition you would need to only run the click event if anywhere but the menu is clicked.
NOTE: I had to remove your media query as it was preventing the toggle-menu from being displayed.
"use strict";
const menuToggle = document.querySelector(".menu-toggle");
const menuClose = document.querySelector(".menu-close");
const nav = menuToggle.parentElement;
menuToggle.addEventListener("click", event => {
event.stopImmediatePropagation();
nav.classList.add("is-open");
document.body.style.backgroundColor = "rgba(0,0,0,.5)";
});
document.addEventListener("click", event => {
if (nav.classList.contains("is-open") && !event.target.classList.contains("nav-menu")) {
menuToggle.nextElementSibling.style.width = null;
document.body.style.backgroundColor = "#fff";
nav.classList.remove("is-open");
}
});
:root {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.menu-toggle {
width: 40px;
height: 40px;
border: 1px solid red;
cursor: pointer;
}
.menu-container {
position: absolute;
background: lightskyblue;
height: 100vh;
width: 0;
transition: width 0.4s ease-in-out;
top: 0;
left: 0;
overflow: auto;
z-index: 1;
}
.menu-close {
position: absolute;
right: 1em;
}
.nav-menu {
list-style: none;
padding-left: 0;
margin: 50px 0 0 0;
}
.nav-menu > li + li {
border-top: 1px solid #fff;
}
.nav-menu > li > a {
display: block;
color: #000;
padding: 0.8em 1em;
font-size: 1.1rem;
text-decoration: none;
text-transform: uppercase;
}
.nav.is-open .menu-container {
width: 200px;
}
.menu-close::before {
content: "\00d7";
font-size: 2.6rem;
}
}
<nav class="nav">
<div class="menu-toggle">
<span class="menu-toggle__linecenter"></span>
</div>
<div class="menu-container">
<span class="menu-close"></span>
<ul class="nav-menu">
<li>Home</li>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
</nav>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus accusantium aliquid consequatur facere illum
incidunt magnam magni maiores nam neque numquam omnis
perferendis porro quae quibusdam, quos sed tenetur ullam.
</p>
</main>
Here is what you want, I added a new div next to the menu with a class hidden and for the script when the event.target is equal to that div or the close button then will fire the function. check it out and let me know if you have any questions.
const menuToggle = document.querySelector(".menu-toggle");
const menuClose = document.querySelector(".menu-close");
const menuActive = document.querySelector(".menu_active");
const nav = menuToggle.parentElement;
const log = console.log;
const app = {
init: () => {
app.menuToggle();
},
menuToggle: () => {
menuToggle.addEventListener("click", event => {
event.preventDefault();
nav.classList.add("is-open");
menuActive.classList.remove('hidden');
app.closeMenu();
});
log('working')
},
closeMenu: () => {
if (nav.classList.contains('is-open')) {
document.addEventListener("click", event => {
event.preventDefault();
let closeMenu = event.target.className;
if (closeMenu === 'menu_active' || closeMenu === 'menu-close') {
//log(event.target.className)
menuToggle.nextElementSibling.style.width = null;
menuActive.classList.add('hidden');
nav.classList.remove("is-open");
}
});
}
}
};
document.addEventListener('DOMContentLoaded', app.init())
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.menu_active {
background: rgba(0, 0, 0, 0.5);
position: absolute;
height: 100vh;
width: calc(100vw - 200px);
top: 0;
right: 0;
}
.hidden {
visibility: hidden;
display: none;
}
.menu-toggle {
width: 40px;
height: 40px;
border: 1px solid red;
cursor: pointer;
}
.menu-container {
position: absolute;
background: lightskyblue;
height: 100vh;
width: 0;
transition: width 0.4s ease-in-out;
top: 0;
left: 0;
overflow: auto;
z-index: 1;
}
.menu-close {
position: absolute;
right: 1em;
}
.nav-menu {
list-style: none;
padding-left: 0;
margin: 50px 0 0 0;
}
.nav-menu>li+li {
border-top: 1px solid #fff;
}
.nav-menu>li>a {
display: block;
color: #000;
padding: 0.8em 1em;
font-size: 1.1rem;
text-decoration: none;
text-transform: uppercase;
}
.nav.is-open .menu-container {
width: 200px;
}
.menu-close::before {
content: "\00d7";
font-size: 2.6rem;
}
/*#media screen and (min-width: 37.5em) {*/
#media screen and (min-width: 40.5em) {
body {
background: #fff !important;
}
.menu-toggle {
display: none;
}
.nav.is-open .menu-container {
width: auto;
height: auto;
}
.menu-container {
position: initial;
height: auto;
width: auto;
overflow: hidden;
}
.menu-close {
display: none;
}
.nav-menu {
display: flex;
position: static;
justify-content: center;
margin: 0;
}
.nav-menu>li {
margin-left: 1em;
}
.nav-menu>li+li {
border-top: initial;
}
}
<body>
<nav class="nav">
<div class="menu-toggle">
<span class="menu-toggle__linecenter"></span>
</div>
<div class="menu-container">
<span class="menu-close"></span>
<ul class="nav-menu">
<li>Home</li>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
<div class="menu_active hidden"></div>
</nav>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium aliquid consequatur facere illum incidunt magnam magni maiores nam neque numquam omnis perferendis porro quae quibusdam, quos sed tenetur ullam.
</p>
</main>
</body>
I'm using Refills by Bourbon modals, and are great. But, now that I need to trigger by JS the modal, I don't know how to do it, since it's pure CSS and doesn't have any docs or JS methods.
The modal is only CSS3:
<div class="modal">
<label for="modal-1">
<div class="btn js-btn">Click for Modal</div>
</label>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal-window">
<div class="modal-inner">
<label class="modal-close" for="modal-1"></label>
<h1>Modal Title</h1>
<p class="intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi minima.</p>
<p class="body">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam.</p>
</div>
</div>
</div>
The CSS
.modal {
$modal-padding: 3em;
$modal-background: $base-background-color;
$modal-close-color: $light-gray;
$modal-image-height: 135px;
$modal-image-width: $modal-image-height;
label {
cursor: pointer;
margin-bottom: 0;
}
label img {
$img-width: 300px;
border-radius: $img-width/2;
display: block;
max-width: $img-width;
}
input[type="checkbox"] {
display: none;
}
.btn {
#include button(simple, $base-background-color);
font-size: $base-font-size;
margin-bottom: $base-line-height;
}
.modal-open {
overflow: hidden;
}
.modal-window { // overlay
#include transition(opacity .25s ease);
#include position(fixed, 0px 0px 0px 0px);
background: rgba(0,0,0, .85);
opacity: 0;
text-align: left;
visibility: hidden;
z-index: 99999999999;
.modal-bg {
#include position(absolute, 0px 0px 0px 0px);
cursor: pointer;
}
}
.modal-close {
#include position(absolute, ($modal-padding /2) ($modal-padding /2) 0 0);
#include size(1.5em);
cursor: pointer;
background: $modal-background;
&:after,
&:before {
#include position(absolute, 3px 3px 0 50%);
#include transform(rotate(45deg));
#include size(.15em 1.5em);
background: $modal-close-color;
content: '';
display: block;
margin: -3px 0 0 -1px;
}
&:hover:after,
&:hover:before {
background: darken($modal-close-color, 10);
}
&:before {
#include transform(rotate(-45deg));
}
}
.modal-inner {
#include transition(opacity .25s ease);
border-radius: $base-border-radius;
background: $modal-background;
margin: auto;
max-height: 95%;
position: relative;
overflow: auto;
width: 95%;
padding: $modal-padding /2;
margin-top: .6em;
#include media($medium-screen) {
padding: $modal-padding;
width: 60%;
max-height: 60%;
margin-top: 10em;
}
#include media($large-screen) {
width: 50%;
margin-top: 10em;
}
h1 {
color: $base-font-color;
margin-bottom: .6em;
text-align: left;
text-transform: capitalize;
}
p.body, p.intro {
font-size: $base-font-size;
max-width: 100% !important;
text-align: left;
&.intro {
color: $blue;
line-height: 1.6em;
}
&.body {
color: $base-font-color;
line-height: 1.45em;
#include media($medium-screen) {
#include columns(2 8em);
}
}
}
a.cta {
color: white;
display: inline-block;
margin-right: .5em;
margin-top: 1em;
&:last-child {
padding: 0 2em;
}
}
}
.modal-state:checked + .modal-window {
opacity: 1;
visibility: visible;
}
.modal-state:checked + .modal-window .modal-inner {
top: 0;
}
}
I need to trigger it to open when a user clicks a button.
First: User clicks button and goes to routes
<%= link_to "Guardar en spotbook".html_safe, photo_album_modal_path(#photo.id), remote: true %>
Second: Routes point to the controller action
get '/photo/:id/album-modal', to: 'photos#albums_add_modal', as: :photo_album_modal
Third: It responds with a js
def albums_add_modal
#albums = current_user.albums.includes(:photos).reverse_order
#photo = Photo.find(params[:id])
respond_to do |format|
format.js
end
end
Fourth: It will append some html to a div in the view
$("#modal-open").html("<%= escape_javascript(render 'add_to_album_modal') %>");
$("#modal-open").HERE SHOULD BE A METHOD TO OPEN THE MODAL, BUT SINCE ITS CSS3-ONLY I DON'T KNOW HOW TO TRIGGER IT.
Thanks
Simple solution would be triggering the click
$("#modal-1").trigger("click");
I triggered the checked-state from the modal by JS.
$("#modal").prop("checked", true);