this is my html, css and js code below for side bar menu in bootstrap. the problem is is the header toggle and any other icon is not showing on the menu so i can't expand the menu also all the icons i used from box icons are not showing (also i imported https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css) , is there a way to fix this?
thanks in advance
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap");
:root {
--header-height: 3rem;
--nav-width: 68px;
--first-color: #4723D9;
--first-color-light: #AFA5D9;
--white-color: #F7F6FB;
--body-font: 'Nunito', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 100
}
*,
::before,
::after {
box-sizing: border-box
}
body {
position: relative;
margin: var(--header-height) 0 0 0;
padding: 0 1rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s
}
a {
text-decoration: none
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--white-color);
z-index: var(--z-fixed);
transition: .5s
}
.header_toggle {
color: var(--first-color);
font-size: 1.5rem;
cursor: pointer
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed)
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
}
.nav_logo {
margin-bottom: 2rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link {
position: relative;
color: var(--first-color-light);
margin-bottom: 1.5rem;
transition: .3s
}
.nav_link:hover {
color: var(--white-color)
}
.nav_icon {
font-size: 1.25rem
}
.show {
left: 0
}
.body-pd {
padding-left: calc(var(--nav-width) + 1rem)
}
.active {
color: var(--white-color)
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color)
}
.height-100 {
height: 100vh
}
#media screen and (min-width: 768px) {
body {
margin: calc(var(--header-height) + 1rem) 0 0 0;
padding-left: calc(var(--nav-width) + 2rem)
}
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.show {
width: calc(var(--nav-width) + 156px)
}
.body-pd {
padding-left: calc(var(--nav-width) + 188px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="/assets/images/logo.png" rel="icon" type="icon"> -->
<link rel="stylesheet" href="assets/css/style.css">
<script src="js/scripts.js"> </script>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js'></script>
<link href='https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css'>
</head>
<body id="body-pd">
<header class="header" id="header">
<div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div> <i class='bx bx-layer nav_logo-icon'></i> <span class="nav_logo-name">BBBootstrap</span>
<div class="nav_list"> <i class='bx bx-grid-alt nav_icon'></i> <span class="nav_name">Dashboard</span> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> <i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span> <i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Stats</span> </div>
</div> <i class='bx bx-log-out nav_icon'></i> <span class="nav_name">SignOut</span>
</nav>
</div>
<!--Container Main start-->
<div class="height-100 bg-light">
<h4>Main Components</h4>
</div>
<!--Container Main end-->
You can keep the following code in your head tag. Found this cdn link from there official web page.
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
This worked for me
Change your bootstrap cdn with this
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
And add some css code
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: 0px;
}
MUST work
Related
You want to implement the Top Menu and Left Side Menu.
The top menu is fixed to the top.
I want to implement the Left Side Menu so that it can be seen right below the Top Menu, but it is not going well.
If we open the Left Side Menu, we would like to solve the problem of covering the top menu, so please give us some advice.
index.html code
<!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">
<!-- CSS Link -->
<link rel="stylesheet" href="assets/css/left_sidemenu.css">
<link rel="stylesheet" href="assets/css/top_menu.css">
<!---Fontawsome CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<!----Jquery CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<title>SideBar sub menus</title>
</head>
<body id="body-pd">
<!-- top_menu -->
<nav class="navbar ">
<!-- logo_link -->
<div class="navbar__logo">
<i class="fa-solid fa-laptop-code"></i>
Project
</div>
<!-- menu_link -->
<ul class="navbar__menu">
<li>Login</li>
<li>Sign</li>
</ul>
</nav>
<!-- top_menu -->
<!-- left_sidemenu -->
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
Bedimcode
</div>
<div class="nav__list">
<a href="#" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<ion-icon name="chatbubbles-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Messenger</span>
</a>
<div href="#" class="nav__link collapse">
<ion-icon name="folder-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Projects</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Analytics</span>
</a>
<div href="#" class="nav__link collapse">
<ion-icon name="people-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Team</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="settings-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Settings</span>
</a>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Log out</span>
</a>
</div>
</nav>
</div>
<!-- left_sidemenu -->
<h1>Componentes</h1>
<!-- IONICONS -->
<script src="https://unpkg.com/ionicons#5.2.3/dist/ionicons.js"></script>
<!-- JS -->
<script src="assets/js/main.js"></script>
</body>
</html>
left_sidemenu.css code
/* left_sidemenu.css */
/* GOOGLE FONTS */
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap");
/* VARIABLES CSS */
:root {
--nav--width: 92px;
/* Colores */
--first-color: #0c5df4;
--bg-color: #12192c;
--sub-color: #b6cefc;
--white-color: #fff;
/* Fuente y tipografia */
--body-font: 'Poppins', sans-serif;
--normal-font-size: 1rem;
--small-font-size: .875rem;
/* z index */
--z-fixed: 100;
}
/* BASE */
*, ::before, ::after {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
h1 {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
/* l NAV */
.l-navbar {
position: fixed;
/* top: 0; */
left: 0;
width: var(--nav--width);
height: 100vh;
background-color: var(--bg-color);
color: var(--white-color);
padding: 1.5rem 1.5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
/* NAV */
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__brand {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.nav__toggle {
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
.nav__logo {
color: var(--white-color);
font-weight: 600;
}
.nav__link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
}
.nav__link:hover {
background-color: var(--first-color);
}
.nav__icon {
font-size: 1.25rem;
}
.nav_name {
font-size: var(--small-font-size);
}
/* Expander menu */
/* width: calc(var(--nav--width) + 9.25rem); */
.expander {
width: calc(var(--nav--width) + 12rem);
}
/* Add padding body*/
.body-pd {
padding: 2rem 0 0 16rem;
}
/* Active links menu */
.active {
background-color: var(--first-color);
}
/* COLLAPSE */
.collapse {
grid-template-columns: 20px max-content 1fr;
}
.collapse__link {
justify-self: flex-end;
transition: .5;
}
.collapse__menu {
display: none;
padding: .75rem 2.25rem;
/*
padding: 0px;
margin: 0px;
overflow: auto;
position: fixed;
*/
}
.collapse__sublink {
color: var(--sub-color);
font-size: var(--small-font-size);
}
.collapse__sublink:hover {
color: var(--white-color);
}
/* Show collapse */
.showCollapse {
display: block;
}
/* Rotate icon */
.rotate {
transform: rotate(180deg);
transition: .5s;
}
left_sidemenu.js code
/* left_sidemenu.js */
/* EXPANDER MENU */
const showMenu = (toggleId, navbarId, bodyId) => {
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if( toggle && navbar ) {
toggle.addEventListener('click', ()=>{
navbar.classList.toggle('expander');
bodypadding.classList.toggle('body-pd')
})
}
}
showMenu('nav-toggle', 'navbar', 'body-pd')
/* LINK ACTIVE */
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
/* COLLAPSE MENU */
const linkCollapse = document.getElementsByClassName('collapse__link')
var i
for(i=0;i<linkCollapse.length;i++) {
linkCollapse[i].addEventListener('click', function(){
const collapseMenu = this.nextElementSibling
collapseMenu.classList.toggle('showCollapse')
const rotate = collapseMenu.previousElementSibling
rotate.classList.toggle('rotate')
});
}
top_menu.css code
/* top_menu.css */
:root {
--text-color: #f0f4f5;
--background-color: #12192c;
--accent-color: orange;
--icons-color: rgb(152, 187, 201);
--bodybackground-color: rgb(255, 255, 255);
}
body {
margin: 0;
background-color: var(--bodybackground-color);
font-family: 'STIX Two Math';
padding-top: 75px;
}
a {
font-size: 20px;
text-decoration: none;
color: var(--text-color);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--background-color);
padding: 8px 12px;
font-family: 'STIX Two Math';
position: fixed;
/* width: 100% */
top: 0;
left: 0;
right: 0;
}
.navbar__logo i {
color: var(--accent-color);
padding-left: 0;
}
.navbar__menu {
list-style: none;
display: flex;
margin: 0;
padding-left: 0;
}
.navbar__menu li {
padding: 8px 30px;
}
.navbar__menu li:hover {
background-color: var(--accent-color);
border-radius: 3px;
}
#media screen and (max-width: 700px) {
}
#font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve#1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100vw;
height: 100vh;
font: normal 1rem/1.5rem 'Cafe24Oneprettynight', serif;
background: url('https://images.unsplash.com/photo-1505312926838-645f295a20e1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1234&q=80')no-repeat center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.box {
padding: 50px;
background: rgba(0, 0, 0, .4);
}
p {
color: #aaa;
margin-bottom: 10px;
}
p:hover {
color: #fff
}
p:hover {
width: 100%;
transition: width .3s;
}
Screenshot 1
Screenshot 2
This is happening bcs you've added padding to the top_menu item. It can be fixed by reducing the padding you've given in the top_menu.css file like so:
body {
margin: 0;
background-color: var(--bodybackground-color);
font-family: 'STIX Two Math';
padding-top: 45px;
}
As for the nav bar covering the header once expanded. The reason it is happening is because you're adding padding to the existing element. I would change the left_sidemenu.css file like so:
/* Add padding body*/
.body-pd {
/* padding: rem 0 0 16rem; */
}
Either that or you can simply not add top padding so that the nav bar only expands to the side. One other option I could suggest instead, is to change the z-index so that the nav bar comes behind the header.
I have added a lottie hamburger menu for a responsive one page site for the mobile break point. I would like two things happen as follows:
When clicked on one of the links the menu disappears.
at the same time the lottie animation goes back to hamburger icon state when clicked on a link, (it staying in X state)
Here is the link
https://codepen.io/OralYildiz/pen/abwvazw
/*--Lottie Animation and Mobile Menu Appear---*/
const pageHeader = document.querySelector(".header");
const toggleMenu = document.querySelector(".toggle-menu");
const player = document.querySelector("lottie-player");
const menuWrapper = document.querySelector(".nav__menu");
const menuOpenedClass = "menu-open";
const noTransitionClass = "no-transition";
let timer;
toggleMenu.addEventListener("click", function (e) {
e.preventDefault();
pageHeader.classList.toggle(menuOpenedClass);
if (pageHeader.classList.contains(menuOpenedClass)) {
this.setAttribute("aria-label", "Close navigation");
this.setAttribute("aria-expanded", "true");
player.getLottie().playSegments([0, 45], true);
} else {
this.setAttribute("aria-label", "Open navigation");
this.setAttribute("aria-expanded", "false");
player.getLottie().playSegments([45, 0], true);
//player.getLottie().playSegments([46, 90], true);
}
});
window.addEventListener("resize", function () {
menuWrapper.classList.add(noTransitionClass);
clearTimeout(timer);
timer = setTimeout(function () {
menuWrapper.classList.remove(noTransitionClass);
}, 500);
});
/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader() {
const header = document.getElementById("header");
// When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
if (this.scrollY >= 50) header.classList.add("scroll-header");
else header.classList.remove("scroll-header");
}
window.addEventListener("scroll", scrollHeader);
/*=============== SHOW SCROLL UP ===============*/
function scrollUp() {
const scrollUp = document.getElementById("scroll-up");
// When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag with the scroll-top class
if (this.scrollY >= 200) scrollUp.classList.add("show-scroll");
else scrollUp.classList.remove("show-scroll");
}
window.addEventListener("scroll", scrollUp);
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll("section[id]");
function scrollActive() {
const scrollY = window.pageYOffset;
sections.forEach((current) => {
const sectionHeight = current.offsetHeight;
const sectionTop = current.offsetTop - 50;
sectionId = current.getAttribute("id");
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document
.querySelector(".nav__menu a[href*=" + sectionId + "]")
.classList.add("active-link");
} else {
document
.querySelector(".nav__menu a[href*=" + sectionId + "]")
.classList.remove("active-link");
}
});
}
window.addEventListener("scroll", scrollActive);
/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
distance: "60px",
duration: 2500,
delay: 400
// reset: true
});
sr.reveal(`.home__header, .section__title`, { delay: 600 });
sr.reveal(`.home__footer`, { delay: 700 });
sr.reveal(`.home__img`, { delay: 900, origin: "top" });
sr.reveal(
`.sponsor__img, .products__card, .footer__logo, .footer__content, .footer__copy`,
{ origin: "top", interval: 100 }
);
sr.reveal(`.specs__data, .discount__animate`, {
origin: "left",
interval: 100
});
sr.reveal(`.specs__img, .discount__img`, { origin: "right" });
sr.reveal(`.case__img`, { origin: "top" });
sr.reveal(`.case__data`);
/*=============== GOOGLE FONTS ===============*/
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3rem;
/*========== Colors ==========*/
--hue-color: 206;
--black-color: hsl(var(--hue-color), 4%, 4%);
--black-color-alt: hsl(var(--hue-color), 4%, 8%);
--title-color: hsl(var(--hue-color), 4%, 95%);
--text-color: hsl(var(--hue-color), 4%, 75%);
--text-color-light: hsl(var(--hue-color), 4%, 65%);
--white-color: #FFF;
--body-color: hsl(var(--hue-color), 4%, 6%);
--container-color: hsl(var(--hue-color), 4%, 10%);
--text-gradient: linear-gradient(hsl(var(--hue-color), 4%, 24%), hsl(var(--hue-color), 4%, 8%));
--scroll-thumb-color: hsl(var(--hue-color), 4%, 16%);
--scroll-thumb-color-alt: hsl(var(--hue-color), 4%, 20%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--biggest-font-size: 5rem;
--bigger-font-size: 3.5rem;
--big-font-size: 2.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
--text-line-height: 2rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== Margenes Bottom ==========*/
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
#media screen and (min-width: 968px) {
:root {
--biggest-font-size: 7.5rem;
--bigger-font-size: 4.5rem;
--big-font-size: 4rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h1, h2, h3 {
color: var(--title-color);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
button,
input {
border: none;
outline: none;
}
button {
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.section {
padding: 4rem 0 2rem;
}
.section__title {
font-size: var(--bigger-font-size);
text-align: center;
margin-bottom: var(--mb-2-5);
}
.section__title-gradient {
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/*=============== LAYOUT ===============*/
.main {
overflow: hidden;
}
.container {
max-width: 968px;
margin-left: var(--mb-1-5);
margin-right: var(--mb-1-5);
}
.grid {
display: grid;
}
/*=============== HEADER ===============*/
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background: transparent;
}
/*=============== NAV ===============*/
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo {
display: flex;
width: 1.5rem;
}
/*.header .nav__menu {
transform: translateY(-200px);
transition: transform 1s ease-in-out;
}*/
.header.menu-open .nav__menu{
transform: translateY(80px);
}
.header .toggle-menu {
width: 50px;
}
#media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
background-color: var(--body-color);
transform: translateY(-200px);
left: 0;
width: 100%;
padding: 4rem 0 3rem;
transition: .4s;
}
}
.nav__list {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1rem;
}
.nav__link {
color: var(--white-color);
font-size: var(--h2-font-size);
text-transform: uppercase;
font-weight: var(--font-semi-bold);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: .4s;
}
.nav__link:hover {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/* show menu */
.nav__menu.active {
top: 0;
}
/* Change background header */
.scroll-header {
background-color: var(--body-color);
}
/* Active link */
.active-link {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/*=============== HOME ===============*/
.home__img {
width: 250px;
position: absolute;
top: -16rem;
right: 1.5rem;
}
.home__data {
padding-top: 5rem;
}
.home__header {
position: relative;
}
.home__title {
position: absolute;
top: -4rem;
left: 1rem;
line-height: 6rem;
font-size: var(--biggest-font-size);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.home__subtitle {
font-size: var(--big-font-size);
margin-bottom: var(--mb-2-5);
}
.home__title-description {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-1);
}
.home__description {
margin-bottom: var(--mb-2-5);
line-height: var(--text-line-height);
}
.home__price {
font-size: var(--h3-font-size);
font-weight: var(--font-semi-bold);
margin-left: var(--mb-0-75);
}
/*=============== BUTTONS ===============*/
.button {
display: inline-block;
background-color: var(--black-color);
color: var(--white-color);
padding: 1rem 1.25rem;
border-radius: .5rem;
transition: .3s;
}
.button:hover {
background-color: var(--black-color-alt);
}
.button__icon {
font-size: 1.2rem;
}
.button--flex {
display: inline-flex;
align-items: center;
column-gap: .75rem;
}
/*=============== SPONSOR ===============*/
.sponsor__img {
width: 90px;
}
.sponsor__container {
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
row-gap: 5rem;
justify-items: center;
align-items: center;
}
/*=============== SPECS ===============*/
.specs__container {
position: relative;
}
.specs__content {
row-gap: 1.5rem;
}
.specs__data {
display: grid;
row-gap: .25rem;
}
.specs__icon {
font-size: 1.2rem;
color: var(--white-color);
}
.specs__title {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.specs__subtitle {
font-size: var(--smaller-font-size);
}
.specs__data:nth-child(1), .specs__data:nth-child(4) {
margin-left: 1.5rem;
}
.specs__img {
width: 250px;
position: absolute;
top: 2rem;
right: -4rem;
}
/*=============== CASE ===============*/
.case__container {
position: relative;
grid-template-columns: repeat(2, 1fr);
}
.case__data {
padding: 5rem 0 3rem;
}
.case__img {
width: 250px;
position: absolute;
left: -7rem;
}
.case__description {
margin-bottom: var(--mb-1-5);
line-height: var(--text-line-height);
}
/*=============== DISCOUNT ===============*/
.discount__container {
position: relative;
background-color: var(--container-color);
padding: 2rem 1.5rem;
border-radius: .75rem;
}
.discount__title {
font-size: var(--h3-font-size);
margin-bottom: var(--mb-0-75);
}
.discount__description {
margin-bottom: var(--mb-1);
}
.discount__img {
width: 300px;
position: absolute;
top: 4rem;
right: -11rem;
}
/*=============== SCROLL UP ===============*/
.scrollup {
position: fixed;
right: 1rem;
bottom: -20%;
display: flex;
background-color: var(--container-color);
border-radius: .25rem;
padding: .45rem;
opacity: 9;
z-index: var(--z-tooltip);
transition: .4s;
}
.scrollup:hover {
background-color: var(--black-color);
opacity: 1;
}
.scrollup__icon {
color: var(--white-color);
font-size: 1.35rem;
}
/* Show Scroll Up*/
.show-scroll {
bottom: 5rem;
}
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
width: .60rem;
border-radius: .5rem;
}
::-webkit-scrollbar-thumb {
background-color: var(--scroll-thumb-color);
border-radius: .5rem;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--scroll-thumb-color-alt);
}
/*=============== MEDIA QUERIES ===============*/
/* For small devices */
#media screen and (max-width: 340px) {
.container {
margin-left: var(--mb-1);
margin-right: var(--mb-1);
}
.section__title {
font-size: var(--big-font-size);
}
.home__img {
width: 200px;
top: -13rem;
}
.home__title {
top: -4rem;
font-size: var(--bigger-font-size);
}
.home__data {
padding-top: 1rem;
}
.home__description {
font-size: var(--small-font-size);
}
.specs__img {
width: 200px;
}
.case__container {
grid-template-columns: .6fr 1fr;
}
.case__img {
width: 220px;
top: -2rem;
left: -9rem;
}
.case__data {
padding: 0;
}
.products__container {
grid-template-columns: 142px;
justify-content: center;
}
}
/* For medium devices */
#media screen and (min-width: 576px) {
.home__container {
grid-template-columns: .8fr 1fr;
}
.home__data {
padding-top: 2rem;
}
.home__img {
top: -7rem;
left: 0;
}
.specs__img {
position: initial;
}
.specs__container {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.case__img {
position: initial;
}
.case__data {
padding: 0;
}
.case__container {
grid-template-columns: max-content 250px;
justify-content: center;
align-items: center;
column-gap: 2rem;
}
.discount__img {
position: initial;
}
.discount__container {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.products__container {
grid-template-columns: repeat(3, 142px);
justify-content: center;
}
}
#media screen and (min-width: 767px) {
body {
margin: 0;
}
.section {
padding: 6rem 0 2rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem);
}
.nav__logo {
width: 2rem;
}
.nav__list {
flex-direction: row;
column-gap: 3.5rem;
}
.nav__link {
font-size: var(--normal-font-size);
text-transform: initial;
}
.toggle-menu {
display: none;
}
.home__container {
position: relative;
grid-template-columns: repeat(2, 1fr);
}
.home__img {
top: -9rem;
left: 4rem;
}
.home__data {
padding-top: 8rem;
}
.specs__img {
width: 300px;
}
.case__container {
column-gap: 5rem;
}
.case__img {
width: 300px;
}
.case__description {
margin-bottom: var(--mb-2);
}
.discount__container {
grid-template-columns: 250px max-content;
justify-content: center;
column-gap: 5rem;
padding: 3rem 0;
}
.discount__title {
font-size: var(--h2-font-size);
margin-bottom: var(--mb-1);
}
.discount__description {
margin-bottom: var(--mb-2);
}
.products__container {
grid-template-columns: repeat(3, 162px);
gap: 6rem 3rem;
padding-top: 5rem;
}
.products__card {
height: 152px;
padding: .85rem;
}
.products__img {
width: 95px;
}
.footer__container {
grid-template-columns: .4fr .7fr .7fr 1fr;
}
}
/* For large devices */
#media screen and (min-width: 1024px) {
.container {
margin-left: auto;
margin-right: auto;
}
.home__img {
width: 300px;
top: -15rem;
}
.home__title {
top: -5rem;
left: 3.5rem;
}
.home__description {
padding-right: 5rem;
}
.sponsor__img {
width: 100px;
}
.discount__img {
width: 350px;
}
.footer__container {
padding-top: 3rem;
}
.footer__copy {
margin-top: 9rem;
}
}
<!DOCTYPE html>
<html lang="en" class="sr"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--=============== FAVICON ===============-->
<link rel="shortcut icon" href="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/favicon.png?raw=true" type="image/x-icon">
<!--=============== REMIX ICONS ===============-->
<link href="https://cdn.jsdelivr.net/npm/remixicon#2.5.0/fonts/remixicon.css" rel="stylesheet">
<title>Responsive landing page headphones</title>
</head>
<body>
<!--=============== HEADER ===============-->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/logo.png?raw=true" alt="">
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
Home
</li>
<li class="nav__item">
Specs
</li>
<li class="nav__item">
Case
</li>
</ul>
</div>
<a href="" class="toggle-menu" role="button" aria-controls="menu-wrapper" aria-label="Open navigation" aria-expanded="false">
<lottie-player src="https://assets8.lottiefiles.com/packages/lf20_nzuitqg1.json"></lottie-player>
</a>
</nav>
</header>
<main class="main">
<!--=============== HOME ===============-->
<section class="home section" id="home">
<div class="home__container container grid">
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/home.png?raw=true" alt="" class="home__img">
</div>
<div class="home__data">
<div class="home__header">
<h1 class="home__title">On ear</h1>
<h2 class="home__subtitle">Beats 3</h2>
</div>
<div class="home__footer">
<h3 class="home__title-description">Overview</h3>
<p class="home__description">Enjoy award-winning Beats sound with wireless listening freedom and a sleek,
streamlined design with comfortable padded earphones, delivering first-rate playback.
</p>
<a href="#" class="button button--flex">
<span class="button--flex">
<i class="ri-shopping-bag-line button__icon"></i></i> Add to Bag
</span>
<span class="home__price">$299</span>
</a>
</div>
</div>
</div>
</section>
<!--=============== SPONSOR ===============-->
<section class="sponsor section">
<div class="sponsor__container container grid">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor1.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor2.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor3.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor4.png?raw=true" alt="" class="sponsor__img">
</div>
</section>
<!--=============== SPECS ===============-->
<section class="specs section grid" id="specs">
<h2 class="section__title section__title-gradient">Specs</h2>
<div class="specs__container container grid">
<div class="specs__content grid">
<div class="specs__data">
<i class="ri-bluetooth-line specs__icon"></i>
<h3 class="specs__title">Connection</h3>
<span class="specs__subtitle">Bluetooth v5.2</span>
</div>
<div class="specs__data">
<i class="ri-battery-charge-line specs__icon"></i>
<h3 class="specs__title">Battery</h3>
<span class="specs__subtitle">Duration 40h</span>
</div>
<div class="specs__data">
<i class="ri-plug-line specs__icon"></i>
<h3 class="specs__title">Load</h3>
<span class="specs__subtitle">Fast charge 4.2-AAC</span>
</div>
<div class="specs__data">
<i class="ri-mic-line specs__icon"></i>
<h3 class="specs__title">Microphone</h3>
<span class="specs__subtitle">Supports Apple Siri <br> and Google</span>
</div>
</div>
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/specs.png?raw=true" alt="" class="specs__img">
</div>
</div>
</section>
<!--=============== CASE ===============-->
<section class="case section grid" id="case">
<h2 class="section__title section__title-gradient">Case</h2>
<div class="case__container container grid">
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/case.png?raw=true" alt="" class="case__img">
</div>
<div class="case__data">
<p class="case__description">With a comfortable and adaptable case so that you can
store it whenever you want, and keep your durability forever.
</p>
<a href="#" class="button button--flex">
<i class="ri-information-line button__icon"></i> More info
</a>
</div>
</div>
</section>
<!--=============== DISCOUNT ===============-->
<section class="discount section">
<div class="discount__container container grid">
<div class="discount__animate">
<h2 class="discount__title">Immerse yourself in <br> your music</h2>
<p class="discount__description">Get it now, up to 50% off.</p>
<a href="#" class="button button--flex">
<i class="ri-shopping-bag-line button__icon"></i> Shop Now
</a>
</div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/discount.png?raw=true" alt="" class="discount__img">
</div>
</section>
</main>
<!--=============== SCROLL UP ===============-->
<a href="#" class="scrollup" id="scroll-up">
<i class="ri-arrow-up-s-line scrollup__icon"></i>
</a>
<!--=============== SCROLL REVEAL ===============-->
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
</body></html>
Following worked:
define a variable with array of all 3 menu-link:
// querySelectorAll gets you all 3 menu-links
const menuLink = document.querySelectorAll(".nav__link");
define a function() that closes the menu and plays backwards the lottie player:
function closeMenu() {
// pageHeader.classList.toggle(menuOpenedClass); // would also work;
pageHeader.classList.remove("menu-open");
// play lottie player segment backwards
player.getLottie().playSegments([45, 0], true);
}
Add event listener to all 3 menu-links:
menuLink.forEach(function (element) {
element.addEventListener("click", function () {
closeMenu();
})
});
I have a problem with a transition in JS. What i want is that once the div has opacity 0, js remove it automatically. The problem is that, i have to exit the div area, and then it removes it. That is because i have a mouseleave, but my question is. How can i delete that div without my mouse leaving the div area? Here's the CodePen link:
https://codepen.io/SpeedItaly/pen/PoGPGJZ
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
});
logo.addEventListener("mouseleave", (e) => {
header.removeChild(logo);
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->
You can use the transitionend event instead.
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
});
logo.addEventListener("transitionend", (e) => {
header.removeChild(logo);
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->
Just use a setTimeout. Specifically, setTimeout(function() {header.removeChild(logo)},1200).
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
setTimeout(function() {header.removeChild(logo)},1200)
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->
You can use the following code to receive your current browser's Transition Events:
const getTransitionEvents = () => {
let t,
el = document.createElement("fakeelement");
let transitions = {
transition: {
Start: "transitionstart",
Run: "transitionrun",
Cancel: "transitioncancel",
End: "transitionend"
},
OTransition: {
Start: "oTransitionStart",
Run: "oTransitionRun",
Cancel: "oTransitionCancel",
End: "oTransitionEnd"
},
MozTransition: {
Start: "transitionstart",
Run: "transitionrun",
Cancel: "transitioncancel",
End: "transitionend"
},
WebkitTransition: {
Start: "webkitTransitionStart",
Run: "webkitTransitionRun",
Cancel: "webkitTransitionCancel",
End: "webkitTransitionEnd"
}
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
After that you can just bind the return of this function to a variable
const transEvt = getTransitionEvents();
and bind eventListeners to it
document.addEventListener(transEvt.End, (evt) => {
// do some cool stuff when the Transition ends
});
I use this myself, in a #just-for-fun #work-in-progress pen called Simple Image Loop without duplicating slides where I rearrange the slides after the transform transition has ended.
You can listen for the transitionend CSS event, and remove the node in it.
Also, it is very recommended to declare your variables and move CSS declarations into the CSS code, where possible.
function style() {
const h4 = document.getElementById("hover_me");
const header = document.getElementById("header");
const logo = document.getElementById("hover_me1");
const menu = document.getElementById("menu")
logo.addEventListener("mouseover", (e) => {
logo.classList.add("hidden")
logo.addEventListener("transitionend", () => {
logo.remove()
menu.classList.remove("hidden")
})
});
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
transition: 1200ms ease-in-out opacity;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
transition: 1200ms ease-in-out opacity;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
.hidden{
opacity: 0;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu hidden" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->
Whenever I click on the hamburger icon the menu opens but when I click on it again it is supposed to get closed... But it's not. I am trying to debug but I have no idea what is going wrong. If anyone knows, please help
// Hamberger menu
const navSearch = document.querySelector('.nav-search');
const navLeft = document.querySelector('.nav-left');
document.querySelector('.toggle').addEventListener('click', () => {
console.log(navSearch.style.display);
console.log('1');
if(navSearch.style.display = "none") {
console.log('2');
navSearch.style.display = "inline-block";
navLeft.style.display = "inline-block";
console.log(navSearch.style.display);
} else if(navSearch.style.display = "inline-block") {
console.log('3');
navSearch.style.display = "none";
navLeft.style.display = "none";
}
console.log('......');
});
// Variables
$website-width: 1280px;
$color-main: #4bbf73;
$color-dark: #343a40;
$color-light: #fff;
$color-lightx2: #f7f7f9;
//General Styles
* {
margin: 0;
padding: 0;
}
body {
background-color: $color-light;
font-family: "Nunito", Arial, Helvetica, sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
color: $color-light;
}
ul {
list-style: none;
}
h2,
h3,
h4 {
text-transform: uppercase;
}
img {
width: 100%;
}
input {
border: none;
padding: 0.7rem 1rem;
background: $color-lightx2;
&:focus {
outline: none;
}
}
// Utilities
.container {
max-width: $website-width;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
// navbar
header {
background: $color-dark;
height: 100px;
#navbar {
padding-top: 1.3rem;
color: $color-light;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.nav-logo {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: 2px;
padding: 0.5rem 1rem;
}
ul {
display: flex;
justify-content: center;
li {
padding-left: 1.5rem;
}
}
input[type="submit"] {
margin-left: 0.4rem;
background-color: inherit;
border: $color-main 2px solid;
color: $color-main;
&:hover {
background-color: $color-main;
color: $color-light;
transition: all 0.2s ease-in-out;
}
}
input[type="text"] {
padding: 0.7rem 1rem;
}
}
.toggle {
position: absolute;
top: 2.2rem;
right: 6rem;
transform: scale(2);
display: none;
}
}
#import 'media';
#media (max-width: 850px) {
header {
height: auto;
#navbar {
flex-direction: column;
align-items: start;
input[type="text"] {
margin: 1rem 0 1.4rem 3rem;
}
ul {
padding-bottom: 1rem;
}
}
.toggle {
display: inline-block;
}
.nav-search,
.nav-left {
display: none;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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="https://use.fontawesome.com/releases/v5.15.0/css/all.css"
integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="scss/style.css">
<title>AllMart</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<div class="nav-logo">
AllMart
</div>
<div class="nav-search">
<form>
<input type="text" placeholder="Search Product...">
<input type="submit" value="SEARCH">
</form>
</div>
<div class="nav-left">
<ul>
<li id="cart"><i class="fas fa-shopping-cart"></i> CART</li>
<li id="profile"><i class="fas fa-user"></i> SIGN IN</li>
</ul>
</div>
</nav>
<span class="toggle"><i class="fas fa-bars"></i></span>
</div>
</header>
<script src="js/index.js"></script>
</body>
</html>
and this is the output I get whenever I click on the icon
I have no idea what is going wrong if anyone knows, please help
You need to use === or == in if statements, not =, which is the assignment operator. === is preferred because it tests for strict equality (no type conversion).
if(navSearch.style.display === "none")
else if(navSearch.style.display === "inline-block") {
I'm trying to create a multi-screen compatible navbar (mainly mobile and desktop users). I have created the styling I want for the navbar, however, I have a minor problem: When expanding the navbar on medium devices (768px or below) and then close it, if the user changes the resolution size to > 768px, the side navbar doesn't show.
function sideNavAction() {
let sidenav = document.getElementById("sideNavBar");
console.log(window.getComputedStyle(sidenav).display);
if (window.getComputedStyle(sidenav).display == "none") {
sidenav.style.display = "block";
} else {
sidenav.style.display = "none";
}
}
html,
body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
font-family: "Poppins", sans-serif;
}
.mobile-nav {
height: 70px;
width: 100%;
position: fixed;
background-color: darkblue;
color: grey;
}
.nav-brand {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: #1a1a27;
}
.nav-heading {
display: inline-block;
}
.nav-heading h2 {
color: white;
white-space: nowrap;
}
.nav-icon {
text-align: center;
}
.sidenav {
display: none;
height: 100%;
width: 280px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: width 0.5s;
}
.sidenav .nav-brand {
padding: 25px 20px;
height: 50px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.sidenav .nav-heading h2 {
margin: 0;
color: white;
white-space: nowrap;
opacity: 1;
max-width: 0;
transition: 0.16s;
}
#expand-icon {
transition: transform 0.5s;
}
#sidenav-links {
margin: 15px 0px;
}
.sidenav-links a {
padding: 10px 18px;
display: block;
text-decoration: none;
color: #9697aa;
white-space: nowrap;
}
.link {
display: inline-block;
font-size: 20px;
padding-left: 15px;
vertical-align: middle;
color: #9697aa;
opacity: 1;
max-width: 100vw;
}
.active {
background-color: #1b1b28;
}
.active i {
color: #5d78ff;
}
.active .link {
color: white;
}
.fas {
vertical-align: middle;
}
#media only screen and (min-width: 768px) {
.mobile-nav {
display: none;
}
.sidenav {
display: block;
}
.sidenav .nav-brand {
display: flex;
}
.sidenav:not(:hover) {
width: 75px;
}
.sidenav:not(:hover) .nav-heading h2 {
opacity: 0;
max-width: 0;
visibility: hidden;
transition: 0.1s 0.2s;
}
.sidenav:not(:hover) #expand-icon {
transform: rotate(180deg);
}
.sidenav-links a:hover {
background-color: #1b1b28;
color: #5d78ff;
}
.sidenav-links a:hover .link {
color: white;
transition: none;
}
.sidenav:not(:hover) .link {
opacity: 0;
max-width: 0;
visibility: hidden;
transition: 0.1s 0.2s;
}
}
#media only screen and (max-width: 768px) {
.sidenav .nav-brand {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Online CV</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<link
href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/6cc49d804e.js"
crossorigin="anonymous"
></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="mobile-nav">
<div class="nav-brand">
<div class="nav-heading">
<h2>Navbar</h2>
</div>
<div class="nav-icon">
<button onclick="sideNavAction()">
<i id="collapse-icon" class="fas fa-fw fa-bars fa-2x"></i>
</button>
</div>
</div>
</div>
<div class="sidenav" id="sideNavBar">
<div class="nav-brand">
<div class="nav-heading">
<h2>Navbar</h2>
</div>
<div class="nav-icon">
<i id="expand-icon" class="fas fa-fw fa-angle-double-left fa-2x"></i>
</div>
</div>
<div class="sidenav-links">
<a class="active" href="#">
<i class="fas fa-fw fa-id-card fa-2x"></i>
<p class="link">Link 1</p>
</a>
<a href="#">
<i class="fas fa-fw fa-graduation-cap fa-2x"></i>
<p class="link">Link 2</p>
</a>
<a href="#">
<i class="fas fa-fw fa-briefcase fa-2x"></i>
<p class="link">Link 3</p>
</a>
<a href="#">
<i class="fas fa-fw fa-smile-beam fa-2x"></i>
<p class="link">Link 4</p>
</a>
</div>
</div>
</body>
</html>
I realize that my JS function is the cause of this, as it sets the display of the side nav to 'none', but I am unable to think of an elegant solution.
A couple of things.
Inline eventlisteners are frowned upon.
Better to listen for click events via Javascript.
You added a stye of display: none; and there is no eventListener or media query to change it once the width increased beyond the threshold.
This codepen has the above adjustments:
https://codepen.io/riza-khan/pen/poJEOYE?editors=1111
And should work as intended.
However, I added a media query and targeted the nav class with a !important tag. That should, ideally, never be done. I would suggest, removing the !important and playing around with the code until it works without it.
Hope this helped.
Thanks to #chriskirknielsen, I was able to come up with this solution which fixed the problem I was having.
/* --- Function to Open/Close Mobile Nav --- */
function sideNavAction() {
let sidenav = document.getElementById("sideNavBar");
if (sidenav.classList.contains("sidenav-mobile-visible")) {
sidenav.classList.remove("sidenav-mobile-visible");
} else {
sidenav.classList.add("sidenav-mobile-visible");
}
}
Then added this in my css file
.sidenav-mobile-visible {
display: block;
}
Why aren't you using Bootstrap "navbar" component? This is the solution to your problem.
Bootstrap navbar is responsive for desktop and mobile devices. You are not required to mention screen sizes there in pixels. Here is the link of the Bootstrap library. You have to just integrate Bootstrap to your html document via Bootstrap CDN on the given link.
https://getbootstrap.com/docs/4.4/components/navbar/