I'm still beginner with JavaScript and ReactJS.
I'm doing a project to improve my knowledge. I have a layout with CSS and HTML already responsive. I'm trying to implement some logic wiht Javascript on my ReactJS project. When I click on my burger-icon, my nav open up, and when I click on my close icon, my nav close up. Can you tell me how can i do this?
As the layout is responsive only in HTML and CSS, for my nav to appear, it depends on the width of the screen.
Here's my code I put into codesandbox.io
import React, { useState } from "react";
import "./index.scss";
const Home = () => {
const [showMenu, setShowMenu] = useState(false);
const handleBurgerIcon = (e) => {
e.preventDefault();
setShowMenu(!showMenu);
};
return (
<div className="flex-container">
<nav className="nav-categories">
<div className="header">
<h2>Categories</h2>
<div className="close">
<svg width="1em" height="1em" viewBox="0 0 12 12">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g
transform="translate(-318.000000, -363.000000)"
fill="#000000"
fillRule="nonzero"
>
<path
d="M318.234315,373.616648 C317.921896,373.929067 317.921892,374.435597 318.23432,374.748025 C318.54673,375.060434 319.053273,375.060443 319.365691,374.748025 L329.548029,364.565687 C329.860447,364.253269 329.860438,363.746726 329.548029,363.434316 C329.235601,363.121888 328.729071,363.121892 328.416652,363.434311 L318.234315,373.616648 Z M319.365688,363.234318 C319.05327,362.921899 318.546746,362.921889 318.234318,363.234318 C317.921908,363.546727 317.921899,364.05327 318.234318,364.365688 L328.416655,374.548026 C328.729074,374.860445 329.235617,374.860435 329.548026,374.548026 C329.860454,374.235598 329.860445,373.729074 329.548026,373.416655 L319.365688,363.234318 Z"
fill="currentColor"
/>
</g>
</g>
</svg>
</div>
</div>
<ul className="nav-menu">
<li className="active">
Floral
</li>
<li>
Fresh
</li>
<li>
Gourmand
</li>
<li>
Woody
</li>
</ul>
</nav>
<section className="perfumes-list">
<header>
<div className="burguer-button" onClick={handleBurgerIcon}>
<div></div>
<div></div>
<div></div>
</div>
<input type="text" placeholder="Search by perfume" />
</header>
<ul>
<li>
<div className="perfume-item">
<div className="box-info">
<div className="box-info--content">
<div className="description">
<h1>Kim Kardashian</h1>
<p>
In 2009, Kim Kardashian launched a perfume line with her
signature fragrance, called Kim Kardashian by Kim
Kardashian.
</p>
</div>
<div className="tags">
<span>Woody</span> / <span>Oriental</span> /{" "}
<span>Gourmand</span>
</div>
</div>
<div className="box-info--footer">
<ul>
<li>
<span>Sample</span>{" "}
<h3>
Free<sup></sup>
</h3>
</li>
<li>
<span>Normal</span>{" "}
<h3>
38.00<sup>€</sup>
</h3>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</section>
</div>
);
};
export default Home;
:root {
--white: #ffffff;
--black: #111116;
--gray: #f4f7f6;
--gray-dark: #6c7680;
--orange: #ff8f32;
}
body,
html {
font-family: Helvetica, sans-serif;
font-weight: 300;
line-height: 1.5;
color: var(--black);
text-align: left;
background-color: var(--gray);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
p {
color: var(--gray-dark);
}
.tags {
color: var(--orange);
text-align: right;
}
h1 {
color: var(--orange);
font-weight: 400;
}
h2 {
font-size: 2.125rem;
padding: 0 1rem;
}
h3 {
font-size: 1.5rem;
padding: 0 0.5rem;
font-weight: 300;
}
.flex-container {
display: flex;
flex-flow: row wrap;
text-align: center;
max-width: 1400px;
margin: 2rem auto;
}
.flex-container > * {
padding: 15px;
flex: 1 100%;
}
header {
display: flex;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.burguer-button {
margin-right: 1rem;
cursor: pointer;
}
.burguer-button div {
width: 2rem;
height: 0.25rem;
background-color: var(--black);
margin-bottom: 0.3rem;
}
input[type="search"],
input[type="text"] {
font-size: 1rem;
font-weight: 300;
background-clip: padding-box;
transition: all 0.2s ease;
outline: 0;
-webkit-appearance: none;
width: 100%;
resize: none;
padding: 1rem;
border: 1px solid var(--gray);
}
input:hover,
input:focus {
transition: all 0.2s ease;
cursor: auto;
border: 1px solid var(--orange);
}
.nav-menu .active a {
color: var(--orange);
}
.nav-menu a {
position: relative;
display: block;
padding: 1rem;
font-size: 17px;
font-weight: 300;
color: #202121;
cursor: pointer;
background: #f4f7f6;
border-bottom: 1px solid #e6eaea;
text-decoration: none;
transition: all 0.3s ease;
}
.nav-menu a:hover {
background-color: var(--white);
-webkit-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.perfume-item {
position: relative;
width: 100%;
-webkit-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
box-shadow: 0 2px 3px 0 #e8ebed, 0 0 3px 0 #e8ebed;
}
.box-info {
transition: all 0.3s ease-in-out;
padding: 1.5rem;
flex: 1;
position: relative;
clear: both;
background-color: var(--white);
margin-bottom: 1.5rem;
}
.box-info--content {
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.box-info--footer {
display: flex;
}
.box-info--footer ul {
display: inline-flex;
}
.box-info--footer li {
display: inline-flex;
align-items: baseline;
padding: 0 1rem 0 0;
}
.box-info--footer li span {
color: var(--gray-dark);
}
/*Nav Categories*/
.nav-categories {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 75%;
padding-top: 3rem;
text-align: left;
z-index: -1;
background-color: var(--gray);
}
.nav-categories .header {
position: relative;
}
.nav-categories .close {
position: absolute;
top: 0;
right: 0;
}
.nav-categories ul {
list-style-type: none;
}
.nav-categories li {
cursor: pointer;
}
.nav-categories li.selected {
background-color: rgb(87, 87, 206);
color: #ffffff;
}
.perfumes-list {
flex: 1;
order: 2;
text-align: left;
}
.perfume {
margin: 10px;
text-align: left;
border-bottom: 1px solid black;
}
.perfume ul {
list-style-type: none;
}
/*Pagination*/
.pagination {
text-align: center;
order: 3;
}
.pagination {
width: 100%;
}
.pagination {
display: inline-flex;
align-items: center;
padding-left: 0;
margin-bottom: 0;
justify-content: center;
}
.pagination li {
margin-right: 0.25rem;
}
.pagination li:last-child {
margin-right: 0;
}
.pagination li a {
transition: all 0.3s ease-in-out;
color: var(--gray-dark);
padding: 0.375rem 0.4375rem;
text-decoration: none;
}
.pagination li a:hover {
background: var(--orange);
color: var(--white);
}
.pagination li a:focus {
box-shadow: inset 0 0 0 2px var(--orange);
}
.pagination li a:active {
background: var(--gray-dark);
color: var(--white);
}
.pagination .active a {
background: var(--orange);
color: var(--white);
pointer-events: none;
}
// 48em -> 768px
#media (min-width: 48em) {
.nav-categories {
width: 40%;
}
}
// 64em -> 1024px
#media (min-width: 64em) {
.nav-categories {
position: relative;
top: unset;
left: unset;
display: block;
width: 100%;
flex: 0;
order: 1;
padding-top: 1rem;
z-index: 0;
display: block;
}
.nav-categories .close {
display: none;
}
.burguer-button {
display: none;
}
}
Thank you advance!!
First of all you cannot just use class attribute in react. In react it's className. Click here for more info.
Handling events with React elements is very similar to handling events on DOM elements. There are just some syntax differences.
You can simply add an onClick listener to your burger-icon element and call a function that you create in your Home.js, like this.
<div className="burguer-button" onClick={handleBurgerIcon}>
Now we are going to create a boolean state and change the value everytime when button is clicked. This is how you create a state in a functional react.
const [showMenu, setShowMenu] = React.useState(false);
You can represent this like a variable with a getter and setter. And as default value we use false.
Now we create the function to handle the click.
const handleBurgerIcon = (e) => {
e.preventDefault();
setShowMenu(!showMenu);
}
The function setShowMenu toggles the value of our showMenu state.
Finally we use a conditional rendering for our nav-menu. So it only gets visible, when our showMenu is true. This is how you can do it.
{showMenu &&
<ul className="nav-menu">
<li className="active">
Floral
</li>
<li>
Fresh
</li>
<li>
Gourmand
</li>
<li>
Woody
</li>
</ul>
}
Related
I have been struggling with this all day so I guess I'll ask the community. I am trying to get my social links / icons to fit side-by-side on one line, rather than taking up 5 lines.
It seems that whatever rules I have set for the other list items (which is actually a separate ul) are also being applied to these social links.
Thanks a ton if you can help!
I'll take notes. lol
Updated Website
What I am trying to do.
What I am currently dealing with.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>
Make the element with class .mobile-social-links to display: flex;. There's also a bit of work to do to position them centrally as you're doing some odd stuff with the anchor links but see below. All changes are annotated. There's a bit of animation to do but I'll leave you to sort that out.
Just as an aside you're making life difficult for yourself having two menus, one for desktop and one for mobile. If you can, have one menu but style it for both.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links {
/* added this */
display: none;
padding-block: 19px;
justify-content: center;
gap: 0.5rem;
}
.mobile-nav.is-active .mobile-social-links {
/*added this */
display: flex;
}
.mobile-social-links a {
/* added this */
display: inline;
padding: 0;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active,
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li>
<img src="images/social-icons/twitter-icon.png">
</li>
<li>
<img src="images/social-icons/linkedin-icon.png">
</li>
<li>
<img src="images/social-icons/youtube-icon.png">
</li>
<li>
<img src="images/social-icons/facebook-icon.png">
</li>
<li>
<img src="images/social-icons/instagram-icon.png">
</li>
</ul>
</div>
</nav>
I've also done a version with grid but it means only one menu is needed. See below:
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: opacity 0.3s;
cursor: pointer;
}
#header-logo:hover {
opacity: 50%;
}
.hamburger {
grid-area: hamburger;
justify-self: end;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: var(--light);
transform-origin: 0 0;
transition: transform 0.4s;
}
.hamburger.is-active span {
margin-bottom: 6px;
background-color: #757575;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
}
.container {
display: grid;
grid-template-columns: fit-content(0) 1fr;
grid-template-areas: "icon hamburger" "menu menu";
}
.image-container {
grid-area: icon;
}
.menu {
grid-area: menu;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #222222;
transition: max-height 1s, margin-top 1s;
}
.menu a {
text-align: center;
color: var(--light);
font-size: 1.5rem;
margin: 0 1rem;
text-decoration: none;
transition: color 0.4s;
padding: 19px 0;
border-bottom: solid 1px #363636;
}
.menu.is-active {
max-height: 100vh;
margin-top: 1rem;
}
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
.mobile-social-links {
padding: 19px;
}
.mobile-social-links>ul {
display: flex;
justify-content: center;
width: 100%;
}
.mobile-social-links a {
padding: 0;
}
#media only screen and (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
justify-content: flex-end;
flex-direction: row;
background: none;
display: flex;
max-height: initial;
margin-top: 0;
}
.menu a {
text-align: left;
font-size: 1rem;
border-bottom: none;
}
.mobile-social-links {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
grid-template-areas: "icon menu";
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="image-container">
<img src="https://www.fillmurray.com/500/500" id="header-logo">
</div>
<div class="menu">
about
services
portfolio
blog
contact
<div class="mobile-social-links">
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-youtube"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
Try adding display: flex to the ul with the .mobile-social-links class.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
ul.mobile-social-links{
display: flex;
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>
The rules are still being applied to your links in the other ul as they still match.
I.e. Your mobile social links are still being given the width of 100vw because they are still elements within the 'mobile-nav' element. You'd need the rules below to take higher precedence, So where you've applied 'width: 28px;' to the '.mobile-social-links li' you'd want to apply it to the '.mobile-social-links li a' so it can overwrite the initial css
I would like to ask how can I make my existing navbar a sticky one?
I've tried adding in the Javascript..But the alignments seem to be off.
i am taking reference from https://codingartistweb.com/2021/12/responsive-navigation-bar-html-css-js/#comment-4063 and also https://codingartistweb.com/2020/10/sticky-navbar-html-css-and-javascript-tutorial/.
document.addEventListener('DOMContentLoaded', function(){
var nav = document.getElementById("navbar");
var current_pos = nav.offsetTop;
window.onscroll = function(){
var window_pos = document.documentElement.scrollTop;
if(window_pos>=current_pos){
nav.classList.add("sticky");
}
else{
nav.classList.remove("sticky");
}
}
} )
const navToggler = document.querySelector(".nav-toggler");
const navMenu = document.querySelector(".site-navbar ul");
const navLinks = document.querySelectorAll(".site-navbar a");
allEventListners();
function allEventListners() {
navToggler.addEventListener("click", togglerClick);
navLinks.forEach((elem) => elem.addEventListener("click", navLinkClick));
}
// togglerClick function
function togglerClick() {
navToggler.classList.toggle("toggler-open");
navMenu.classList.toggle("open");
}
// navLinkClick function
function navLinkClick() {
if (navMenu.classList.contains("open")) {
navToggler.click();
}
}
/* Nav Bar */
.sticky {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
background: linear-gradient(30deg, #000000, #69b962);
position: fixed;
z-index: 99;
top: 0;
}
.sticky a {
color: white;
}
/*Styling Buttons*/
.login-button {
background-color: transparent;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: #131418;
background-color: #063b0a;
transition: all ease-in-out 350ms;
}
.join-button {
color: #131418;
background-color: #1b878f;
font-size: 1rem;
cursor: pointer;
}
.join-button:hover {
color: #f2f5f7;
background-color: transparent;
}
/* default css start */
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
}
/* navbar regular css start */
.navbar-area {
background: linear-gradient(30deg, #000000, #69b962);
}
.site-navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
a.site-logo {
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.site-navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.site-navbar ul li a {
color: #fff;
padding: 20px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.site-navbar ul li a:hover {
background: rgba(255, 255, 255, 0.1);
}
/* nav-toggler css start */
.nav-toggler {
border: 3px solid #fff;
padding: 5px;
background-color: transparent;
cursor: pointer;
height: 39px;
display: none;
}
.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
width: 28px;
height: 3px;
background-color: #fff;
display: block;
transition: 0.3s;
position: relative;
z-index: 99;
}
.nav-toggler span:before {
content: "";
transform: translateY(-9px);
}
.nav-toggler span:after {
content: "";
transform: translateY(6px);
}
.nav-toggler.toggler-open span {
background-color: transparent;
}
.nav-toggler.toggler-open span:before {
transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
transform: translateY(-3px) rotate(-45deg);
}
/* intro-area css start */
.intro-area {
height: calc(100vh - 61px);
display: flex;
align-items: center;
text-align: center;
color: #fff;
}
.intro-area h2 {
font-size: 50px;
font-weight: 300;
line-height: 50px;
margin-bottom: 25px;
}
.intro-area p {
font-size: 18px;
}
/* mobile breakpoint start */
#media screen and (max-width: 767px) {
.container {
max-width: 720px;
}
/* navbar css for mobile start */
.nav-toggler {
display: block;
}
.site-navbar {
min-height: 60px;
}
.site-navbar ul {
position: absolute;
width: 100%;
height: calc(100vh - 60px);
left: 0;
top: 60px;
flex-direction: column;
align-items: center;
border-top: 1px solid #444;
background-color: rgba(0, 0, 0, 0.75);
max-height: 0;
overflow: hidden;
transition: 0.3s;
}
.site-navbar ul li {
width: 100%;
text-align: center;
}
.site-navbar ul li a {
padding: 25px;
}
.site-navbar ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.site-navbar ul.open {
max-height: 100vh;
overflow: visible;
}
.intro-area h2 {
font-size: 36px;
margin-bottom: 15px;
}
}
<!-- site-navbar start -->
<div class="navbar-area">
<div class="container">
<nav class="site-navbar" id="navbar">
<!-- site logo -->
<a href="index.html">
<img src="images/org_logo.png" alt="logo" width="50" height="44" />
</a>
<!-- site menu/nav -->
<ul>
<li>Home</li>
<li>Race Information</li>
<li>FAQ</li>
<li>Contact Us</li>
<li class="login-button ">My Account</li>
<li class="join-button">Register</li>
</ul>
<!-- nav-toggler for mobile version only -->
<button class="nav-toggler">
<span></span>
</button>
</nav>
</div>
</div>
I have been trying to resolve this for quite some time, but I am able to find the solution.
On the mobile view, the NAV bar goes under the footer. I think there is some kind of mistake in HTML or CSS code. I tried adjusting the values also added many elements on CSS but nothing worked. Please check the codes for me.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* For footer but can be used for everything*/
text-decoration: none;
list-style: none;
}
body {
background-color: #ffffff;
}
nav {
font-family: 'Roboto', sans-serif;
align-items: center;
min-height: 9vh;
background-color: #3b9aff;
display: flex;
justify-content: space-around;
}
.nav-links li a:hover{
padding: 14px 22px;
background-color: #ffba30;
transition: 0.3s;
}
.logo{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-between;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
padding: 16px 24px;
transition: 0.3s;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #b3bae6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 2px solid red;
}
.dropdown-content a {
display: flex;
color: white;
text-decoration: none;
display: block;
padding: 12px 16px;
}
.footer{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #3b9aff;
position: fixed;
bottom: 0;
}
.inner_footer{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container{
width: 35%;
float: left;
height: 100;
display: block;
}
.inner_footer .logo_container img{
width: 65px;
height: auto;
}
.inner_footer .footer_third{
width: calc(21.6666666667% - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child{
margin-right: 0;
}
.inner_footer .footer_third h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a{
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
padding-bottom: 5px;
}
.inner_footer .footer_third li{
display: inline-block;
padding: 0 5px;
font-size: 20px;
}
.inner_footer .footer_third span{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-family: 200;
display: block;
width: 100%;
padding-top: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
transition: 0.3s;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background: #3b9aff;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
/*Mistake*/
nav-links{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
#media(max-width:900px){
.footer .inner_footer{
width: 90%;
}
.inner_footer .logo_container,
.inner_footer .footer_third{
width: 100px;
margin-bottom: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>e-commerce</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://kit.fontawesome.com/dadb58458c.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<div class="logo">
<h4>First Education</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li class="dropdown">
Projects
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="footer">
<div class="inner_footer">
<div class="logo_container">
<img src="logo.jpg">
</div>
<div class="footer_third">
<h1>Need Help?</h1>
Terms & Conditions
Privacy Policy
</div>
<div class="footer_third">
<h1>More Intel</h1>
Redeem Voucher
Free Courses
Redeem Voucher
Free Courses
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<span>11 th Floor, 15 St Botolph St, London EC3A 7BB, United Kingdom</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Add the following property in your css classname
.nav {
position: relative;
z-index: 1000;
...previous properties
}
Your nav has a min-height of 9vh. If the footer winds up being more than 91vh, then it'll overlap.
You're footer is also position:fixed and the text is quite long, which makes it likely to exceed that height. One thing that could work is position:sticky instead of position: fixed if you want the footer to move along with the page.
Basically, as you will see, when i preview the device in mobile S, the footer does not fill the entire browser width unlike the nav bar. This problem is happening from mobile S size to laptop L size!
The code in jsFiddle is more complete!
https://imgur.com/l131R3E
How can i get rid of this white space?
Code: https://jsfiddle.net/84td5z1x/
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.ulSecções');
const navLinks = document.querySelectorAll('.ulSecções li');
//Toggle Nav
burger.addEventListener('click', () => {
nav.classList.toggle('navActive');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
/*Ignore this*/
div.whiteSpace {
width: 100%;
height: 1000px;
}
/*Mobile navBar Burger*/
.burger {
display: none;
float: right;
padding: 31px 49px;
cursor: pointer;
}
.burger div {
width: 27px;
height: 3px;
margin: 5px;
background-color: rgb(192, 163, 68);
transition: all 0.3s ease;
border-radius: 2px;
}
/*Background Menu*/
nav.menu {
width: 100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu {
position: fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img {
width: 180px;
float: left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li {
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
padding: 0px 18px;
}
nav ul.ulSecções li a i {
font-size: 16px;
}
nav ul.ulSecções li a.loja {
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
}
/*Footer*/
body footer div.footer {
width: 100%;
height: 170px;
background-color: rgb(24, 24, 24);
}
footer div.icons {
width: 100%;
height: auto;
margin: auto;
padding: 20px 0px;
}
body footer div.icons ul {
margin: 0px;
padding: 0px;
text-align: center;
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 10px 10px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 28px;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*Toggle burger*/
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/*Mobile screen adjustments*/
/*Mobile S*/
#media screen and (max-width: 980px) {
nav.menu {
width: 100%;
height: 140px;
}
.ulLogo li {
margin-left: 25%;
}
.ulLogo li a img {
width: 400px;
}
.ulSecções {
position: absolute;
right: 0px;
height: 40vh;
top: 139px;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
overflow: scroll;
transform: translateX(100%);
transition: transform 400ms ease-out 0s;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 40px;
letter-spacing: 0em;
opacity: 0.9;
padding: 0px 10px;
}
nav ul.ulSecções li a.loja {
font-size: 35px;
}
nav ul.ulSecções li a i {
font-size: 35px;
}
div.burger {
display: block;
padding-right: 100px;
padding-top: 57px;
}
.burger div {
width: 40px;
height: 5px;
margin: 4px;
}
/*Footer*/
body footer div.footer {
width: 100%;
/*Erro aqui!!*/
height: 250px;
background-color: rgb(24, 24, 24);
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 15px 30px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 50px;
}
}
.navActive {
transform: translateX(0%)
}
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li title="Logo Carla Ornelas">
<img id="espiral" src="../Logo.png">
</li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> Home </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
</li>
<li>Cursos
</li>
</li>
<li>Conteúdos Especiais
</li>
<li>Recursos
</li>
<li> Contatos </li>
<li> </i> </li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<div class="whiteSpace"></div>
<!--Footer-->
<footer>
<div class="footer">
<div class="icons">
<ul>
<li> <i class="fa fa-instagram" aria-hidden="true"></i> </li>
<li> <i class="fa fa-facebook-square" aria-hidden="true"></i> </li>
<li> <i class="fa fa-youtube-play" aria-hidden="true"> </i> </li>
</ul>
</div>
</div>
</footer>
Add body {margin: 0;} to reset default margin.
At the top of your CSS, add.
*{
margin: 0;
}
This should remove the pre-existing margin, that is present by default on browsers.
I always start my css with
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Know more about the CSS universal selector (*)
The body is set to margin 8px, set it to 0. The above answer is correct.
https://imgur.com/a/Vy2i5YR
This is my first question so apologies if not following standard practice.
I need help with this mobile nav menu. I got the code of the below youtube video. The issue is, while it is a good attempt at a pure CSS mobile nav, the menu does not auto remove when a list item is clicked.
.nav {
opacity: 1;
position: fixed;
z-index: 999;
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
width: 100%;
background: rgb(66,65,65);
background: grey;
transition: all 1s ease;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: #fff;
margin: 0 10px;
line-height: 70px;
font-size: 2em;
transition: all 0.5s ease;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media (max-width: 850px) {
.ml14 {
font-size: 5em;
}
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
background: rgb(66,65,65);
background: linear-gradient(90deg, rgb(180, 180, 180) 0%, rgba(231,221,221,1) 72%);
}
#toggle:checked ~ .menu {
display: block;
}
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
<a class="section1" href="#">About</a>
<a class="contact-sec" href="#">Contact</a>
<a class="section3" href="#">Gallery</a>
<i class="fab fa-facebook"></i>
<i class="fa fa-instagram fa-5x"></i>
</div>
</div>
Codepen with menu
Youtube video showing original source of menu
I simple add function when click on link input check will be false and menu close.
function CloseMenu(){
document.getElementById("toggle").checked = false;
}
.nav {
opacity: 1;
position: fixed;
z-index: 999;
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
width: 100%;
background: rgb(66,65,65);
background: grey;
transition: all 1s ease;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: #fff;
margin: 0 10px;
line-height: 70px;
font-size: 2em;
transition: all 0.5s ease;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media (max-width: 850px) {
.ml14 {
font-size: 5em;
}
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
background: rgb(66,65,65);
background: linear-gradient(90deg, rgb(180, 180, 180) 0%, rgba(231,221,221,1) 72%);
}
#toggle:checked ~ .menu {
display: block;
}
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu" id="menu">
<a class="section1" href="#" onclick="CloseMenu()">About</a>
<a class="contact-sec" href="#" onclick="CloseMenu()">Contact</a>
<a class="section3" href="#" onclick="CloseMenu()">Gallery</a>
<i class="fab fa-facebook" onclick="CloseMenu()"></i>
<i class="fa fa-instagram fa-5x" onclick="CloseMenu()"></i>
</div>
</div>