I'm working on a project and using a code along to help me understand how to build an Nav Bar. I am using this tutorial: https://www.youtube.com/watch?v=gXkqy0b4M5g
I've haven't gone past 22:05 in the video.
I've built out the HTML, CSS and first JavaScript function which is supposed to show the navbar when you click on the hamburger menu which we've built out of div's. I've built out the function in JavaScript, I am receiving no errors, and everything matches the video to a "T" and looks 100% right but for whatever reason it will not run the function when I click the hamburger menu.
console.log("Hello!");
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
nav .nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #366576;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
nav .nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
<nav class="navbar">
<div class="logo">
<h4>Logo</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Skills
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
I've been at this for over 24 hours now and I cannot for the life of me find anything wrong. Everything is linked and again, I am not seeing any errors. It works exactly like this on the video I was following along with. Anyone have any clue what's going on here?
You can play with the media query and the screen sizes.
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
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.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #504954;
font-family: 'Popins', sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 768px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #504954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.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)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Document</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
<h4>Logo</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Skills
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
Looks like the classes line1, line2, and line3 are not defined and the "hamburger" occupies no screen space for you to click. I made .burger visible by:
<div class="burger">
<div class="line1">---</div>
<div class="line2">...</div>
<div class="line3">---</div>
</div>
and added some logging:
burger.addEventListener('click', () => {
console.log(nav.classList[1]);
nav.classList.toggle('nav-active');
console.log(nav.classList[1]);
});
If you click the "hamburger" repeatedly, the console should show alternating undefined and nav-active each time.
Related
I want my mobile displayed nav bar to close after one of the links is clicked. I have tried a few different options but can't seem to get it to work. Any suggestions? If theres anything else thats needed to better understand the situation just let me know and I will add it. I will add my code below.
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 + .5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
<header class="l-header">
<nav class="nav bd-grid">
<a class="nav__logo" href="#">
<div class="logo-image">
<img src="assets/img/logo.png" class="nav__logo-icon">
</div>
</a>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>The Team</li>
<li>Portfolio</li>
<li>Hire</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
CSS
.bd-grid{
max-width: 1024px;
display: grid;
grid-template-columns: 100%;
grid-column-gap: 2rem;
width: calc(100% - 2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--first-color);
}
.nav-links {
display: flex;
justify-content: space-around;
width: 60%;
}
.nav-links a{
text-decoration: none;
color: #fafaff;
font-size: 16px;
font-weight: 100;
font-family: 'Open Sans', sans-serif;
margin: 0px 5px 0px 5px;
}
.nav-links li{
list-style: none;
}
.burger div{
width:25px;
height: 2px;
background-color: rgb(228, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
.burger {
display: none;
cursor: pointer;
}
#media screen and (max-width: 1024px){
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.nav-links a{
color: var(--first-color);
font-size: 17px;
}
.nav-links {
position: absolute;
right: 0px;
height: 91vh;
top: 7.5vh;
background-color: #f3f1f1;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: inline-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 screen and (max-width: 428px){
.nav-links {
height: 93vh;
top: 6.9vh;
}
}
.invisible {
display: none;
}
#media screen and (max-width: 415px){
.nav-links {
height: 93vh;
top: 7.1vh;
}
}
#media screen and (max-width: 390px){
.nav-links {
height: 93vh;
top: 7.9vh;
}
}
#media screen and (max-width: 375px){
.nav-links {
height: 93vh;
top: 7.8vh;
}
}
You can hide it by adding a class that hides it
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinkContainer = document.querySelector('.nav-links');
const navLinks = navLinkContainer.querySelectorAll('li a');
//ANIMATE LINKS
navLinks.forEach((link, index)=>{
link.addEventListener("click", function() {
if(link.style.animation){
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + .5}s`;
}
setTimeout(function() {
navLinkContainer.classList.add("invisible");
}, 500);
return false;
});
});
burger.addEventListener("click", function() {
navLinkContainer.classList[navLinkContainer.classList.contains("invisible") ? "remove" : "add"]("invisible");
})
}
navSlide();
.invisible {
display: none;
}
<header class="l-header">
<nav class="nav bd-grid">
<a class="nav__logo" href="#">
<div class="logo-image">
<img src="assets/img/logo.png" class="nav__logo-icon">
</div>
</a>
<ul class="nav-links invisible">
<li>Home</li>
<li>About</li>
<li>The Team</li>
<li>Portfolio</li>
<li>Hire</li>
<li>Contact</li>
</ul>
<div class="burger">
HAM BURGER
</div>
</nav>
</header>
I have a home page with a responsive navbar. When you shrink the size of the window, it collapses into a burger for mobile/tablet, which then shows the menu options vertically down the right-hand side of the page.
The home page also has an image slide show that runs automatically that is in the centre of the page.
When the window size reduces i.e to mobile size and it collapses into a burger, I can't see some of the menu options over the image slide show. Any ideas on how to accomplish this? I am a newbie to HTML, CSS & also JS... any help much appreciated (:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/style.css" rel = "stylesheet" type="text/css" >
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#300&display=swap" rel="stylesheet">
<script> src="app.js"</script>
<title>Rogue Concept</title>
</head>
<body>
<!-- Navigation Menu Bar-->
<nav>
<div class="logo">
<h4>Rogue Concept</h4>
</div>
<ul class="nav-links">
<li>Home
</li>
<li>
About Us
</li>
<li>
Restoration
</li>
<li>
Hire
</li>
<li>
Contact Us
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<!--image slider start-->
<div class="slider">
<div class="slides">
<!--radio buttons start-->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide first">
<img src="assets/img/grant-ritchie-j0YPbvXu4t0-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/grant-ritchie-jYk96oRbPwg-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/jan-de-keijzer-8eudveAaeFU-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/jon-flobrant-lRSChvh1Mhs-unsplash.jpeg" alt="" class="center">
</div>
<!--slide images end-->
<!--automatic navigation start-->
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<!--automatic navigation end-->
</div>
<!--manual navigation start-->
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
<!--manual navigation end-->
</div>
<!--image slider end-->
<script src="assets/app.js"></script>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* Navigation Tool Bar Start */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: whitesmoke;
font-family: 'Oswald', sans-serif;
}
.logo {
color: black;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
/* Navigation Tool Bar End */
/* Mobile Nav Tool Bar Start */
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color : black;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: whitesmoke;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.nav-active {
transform: translateX(0%);
}
}
/* Mobile Nav Tool Bar End */
/* Animation Start */
#keyframes navLinkFade{
from{
opacity: 0;
transfrom: 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);
}
.slider {
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slides {
width: 500%;
height: 500px;
display: flex;
}
.slides input{
display: none;
}
.slide {
width: 20%;
transition: 2s;
}
.slide img {
width: 800px;
height: 500px;
}
/*css for manual slide navigation*/
.navigation-manual {
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn {
border: 2px solid whitesmoke;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manual-btn:not(:last-child) {
margin-right: 40px;
}
.manual-btn:hover {
background: whitesmoke;
}
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -20%;
}
#radio3:checked ~ .first {
margin-left: -40%;
}
#radio4:checked ~ .first {
margin-left: -60%;
}
/*css for automatic navigation*/
.navigation-auto {
position: absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div {
border: 2px solid whitesmoke;
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child) {
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1 {
background: whitesmoke;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
background: whitesmoke;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
background: whitesmoke;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
background: whitesmoke;
}
app.js
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();
You can use Z-index in CSS for superimpose elements.
Example:
nav{
z-index: 1000;
}
I would like to add a responsive navigation bar to my blog. I got a video from youtube about responsive navigation bar. But i met with a problem. On 768px the content of navigation menu is not showing. When I inspect with Chrome, those links are already there. But I can't see. I am looking for a solution
Please See this Image When Inspecting those Links are there But they are not visible
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>ATC</title>
</head>
<body>
<nav>
<div class="logo">
<h4>ATC</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Orders</li>
<li>Forms</li>
<li>Act & Rules</li>
<li>Students Corner</li>
<li>Schools Gallery</li>
<li>Useful Links</li>
<li>About</li>
<li>Contact Us</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226,226,226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 90%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226,226,226);
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: rgb(226,226,226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:1024px) {
.nav-links {
width: 100%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
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);
}
Javascript
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();
Please help me to find the solution
If you set an element’s position to absolute, its parent should be set to relative in order for it to appear. You can try setting the position of nav to relative when your screen size is 768px.
Edit:
Remove the following property:
.nav-links li {
opacity: 0;
}
Best of luck.
I've followed a youtube tutorial at [https://www.youtube.com/watch?v=H4MkGzoACpQ] to create a nice responsive Navbar.
The problem is when I try and personalise it and add a logo on the left side of the Nav, it seems to push the other nav links off the navbar when viewed in full screen.
As well as that, when the viewport goes below a certain width, there seems to be a circle visible around the hamburger icon.
Please help me to clean up this Navbar. Many thanks, I'm just a beginner at web design.
Here is a link to what the logo should be also - [https://www.google.com/search?q=rossnowlagh+surf+school+logo&sxsrf=ALeKk00Hg24OG5c7Wefc6jal-JyqLmB18Q:1586961567476&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjxpYHE1OroAhXXiVwKHQi3CEsQ_AUoAXoECAwQAw&biw=1440&bih=789#imgrc=36AEO3-lo_sGxM]
I've included my HTML, CSS and JS code here...
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
nav {
height: 12vh;
background: #5b78c7;
}
#nav-logo
{
padding-top: 5px;
margin-left: 20px;
height: 80px;
width: 80px;
}
.nav-links {
display: flex;
list-style: none;
width: 50%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.nav-links li a {
color: white;
text-decoration: none;
font-size: 16px;
}
.landing {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.landing h1 {
margin: 100px;
font-size: 50px;
color: #ae5fce;
}
#media screen and (max-width: 768px) {
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links {
position: fixed;
background: #5b78c7;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.landing {
flex-direction: column;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
li.fade {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Rossnowlagh Surf</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<img id="nav-logo" src="img/rossnowlagh-logo.png">
<ul class="nav-links">
<li>About</li>
<li>Packages</li>
<li>Contact</li>
</ul>
</nav>
<section class="landing">
<img src="./circles.svg" alt="dots" />
<h1>Dots</h1>
</section>
<script src="app.js"></script>
</body>
</html>
What's happening here is that your nav logo is taking up space, and is pushing things off the screen in a way that is breaking the layout.
There are probably a few ways to address this, including using a flexbox and arranging the items for your nav inside it, but I think that the following option is probably going to be the simplest for your task:
#nav-logo
{
padding-top: 5px;
margin-left: 20px;
height: 80px;
width: 80px;
position: absolute; // add this to take the logo out of the layout
z-index: 5; // add this to keep the logo in front of the other content
}
so I'm having issues with closing my mobile nav hamburger menu when a link is clicked. Only my top link is clickable right now just FYI.
The answer is on the tip of my tongue but I'm not quite there. I think mainly it's a syntax issue on my end. So yes the menu on mobile opens and closes when clicking the menu, but it doesn't close when a link is clicked.
I've looked all over, but all I could find were jQuery answers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css\style.css">
<title>eddiepearsonUX</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>Audio UX Study</li>
<li>Web App UX</li>
<li>Contact</li>
</ul>
</nav>
<section class="intro-section">
<h1 class="name">
<span>eddie</span>
<span>Pearson</span>
</h1>
<h3 class="intro">
<p>Audio<br>and Visual</p>
<p>UX</p>
</h3>
</section>
<h3 class="content-title">
<p>Audio UX Study</p>
</h3>
<ul style="list-style-type: none" id="Audio-UX-Study"class="content">
<li class="main-img"><img src="https://www.dl.dropboxusercontent.com/s/rktj2nhj07l2ne7/20191206-Screenshot%20%28223%29.jpg?dl=0" alt="Ableton screen with wavforms and effects stack"></li>
<li class="second-img"><img src="https://www.dl.dropboxusercontent.com/s/j1aipb71ccj3o64/Screenshot%20%28225%29.png?dl=0" alt="Wavforms from audio"></li>
<li class="copy">
</li>
<li class="main-img"></li>
<li class="second-img"></li>
<li class="copy">
</li>
</ul>
<script src="js\app.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Merriweather', serif;
}
body {
font-family: sans-serif;
background-color: #e6e6e0;
}
/* NAVIGATION */
nav {
height: 10vh;
background: #e6e6e0;
/* position: sticky; */
}
.name-div {
position: absolute;
width: 50%;
top: 1.8rem;
left: 2rem;
}
.name {
color: rgb(82, 82, 56);
font-size: calc(0.2rem + 1.1rem);
}
.nav-links {
display: flex;
position: relative;
list-style: none;
max-width: 75vw;
height: 100%;
justify-content: end;
align-items: center;
margin: auto;
}
.nav-links li a {
color:rgb(82, 82, 56);
font-weight: bold;
text-decoration: none;
font-size: 18px;
padding-left: 1em;
}
#media screen and (max-width: 768px) {
.nav-links {
position: fixed;
background: #e6e6e0;
height: 100vh;
width: 100%;
flex-direction: column;
justify-content: space-around;
margin-left: auto;
clip-path: circle(100px at 90% -20%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1100px at 90% -10%);
-webkit-clip-path: circle(1100px at 90% -10%);
pointer-events: all;
max-width: 95%;
}
.line {
width: 30px;
height: 3px;
background: rgb(82, 82, 56);
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links li {
opacity: 0;
}
.nav-links a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.1s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
}
/* INTRO SECTION */
.intro-section {
max-width: 75vw;
margin: auto;
/* background-color: #fff; */
}
.intro-section .name {
padding: 2rem 0 2rem 0rem;
font-size: calc(0.8rem + 3vw);
}
.intro-section .name span:nth-of-type(1) {
color: rgb(174, 177, 156);
}
.intro {
color:rgb(174, 177, 156);
font-size: calc(0.6rem + 2vw);
}
.intro p:nth-of-type(2) {
font-size: calc(0.6rem + 3vw);
color:rgb(82, 82, 56);
}
/* CONTENT SECTION */
.content-title {
display: block;
margin: auto;
margin-top: 5rem;
margin-bottom: 2rem;
max-width: 75vw;
font-size: calc(0.6rem + 1vw);
color:rgb(82, 82, 56);
}
.content {
max-width: 75vw;
margin: 3rem auto;
display: grid;
width: 100%;
height: auto;
display: grid;
margin-bottom: 3em;
grid-gap: 1em;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.main-img {
grid-column: 1 / 2;
}
.content > li > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});
The only thing you're listening for clicks on is the hamburger element.
Try adding a listener on the navLinks element, like so:
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});
navLinks.addEventListener('click', () => {
navLinks.classList.toggle('open')
links.forEach(link => {
link.classList.toggle('fade');
});
})
There might be more tweaks you need to make, but this should get you started.