im not much of a coder but this code has worked for many people and I've spent hours trying to find my error. when I click the hamburger menu the slide menu off to the right is supposed to slide into view and fade the buttons in from opacity 0 to opacity 1. none of this happens at all which makes me think I have a js error.
any help would be great.
jsfiddle below
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links')
burger.addEventListener('click', ()=>{
nav.classlist.toggle('nav-active');
});
}
navSlide();
#charset "UTF-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css?family=Raleway:100,200,400,600,700,900&display=swap');
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
height: 2.5em;
background-color:#7BC58A;
position: sticky;
top: 0;
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
font-size: .8rem;
text-align: left;
padding-left: 6em;
padding-top: .4em;
}
.logo-image{
width: 50px;
height: 50px;
overflow: hidden;
margin: 0 0em;
}
nav{
display:flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
}
.nav-links{
display:flex;
justify-content: space-around;
width:45%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color:#5A5A5A;
font-size:.75em;
text-transform:uppercase;
text-decoration: none;
font-family: 'Raleway', sans-serif;
font-weight:600;
}
.nav-links a:hover{
color:#7BC58A;
}
.nav-links a:active {
color: #D1D1D1;
}
.burger{
display: none;
float:right;
position: relative;
top:0px;
}
.burger div{
width:25px;
height:3px;
background-color:#5a5a5a;
margin: 3px;
border-radius: 40px;
cursor: pointer;
}
#media screen and (max-width:1024px){
.nav-links{
width:55%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height:92vh;
top: 8vh;
background-color: #7BC58A;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translate(100%);
}
.nav-links li{
opacity:1;
}
.burger{
display:block;
}
}
.nav-active{
transform:translatex(100%)
}
#keyframes navLinksFade{
from{
opacity:0;
transform:translateX(50px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="header">
<i class="fa fa-phone"></i> (209)838-1934 <i class="fa fa-envelope"></i> inquiry#allseasonlawn.net
</section>
<!-- NAVIGATION STARTS-->
<nav id="nav">
<a class="navbar-brand" href="/">
<div class="logo-image">
<img src="images/navbar_logo_50x50.png" class="img-fluid">
</div>
</a>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Reviews</li>
<li>Gallery</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>
https://jsfiddle.net/robertrlamb96/3yuzok8r/1/
You had two problems with adding the class. First was you were trying to attach the event listener before the browser has parsed (read) the full html. In other words, the browser didn't know what "burger" or "nav" referred to. To overcome this you need to run the script as part of an onload method. Note, in JSFiddle you have to set the Load type to "no wrap bottom of " to have access to this and I do not believe SO snippets support this feature.
The second error was that "classList" was misspelled (the 'l' is capitalized). I believe you still have some work to do to get it working, but this gets the script running.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links')
burger.addEventListener('click', ()=>{
nav.classList.toggle('nav-active');
});
}
onload = ()=>{
navSlide();
};
https://jsfiddle.net/6qj0kwmg/
Related
I am a beginner in web design and development and I am trying to make the navigation bar be more responsive when it is viewed on phones and tablets but for some reason it appears really buggy on the phone, I have used a meta tag so that the browser renders it correctly but it doesn't, it comes out all buggy like the picture below:
Click on the link to see picture -> As you can see it's coming out half and half
I have enabled overflow-x:hidden but some how am still able to browse towards the right and see the nav bar which isn't meant to be visible unless clicked, I don't understand why that's happening.
Click on the link to see picture -> This is how it is when you load it.
I have also tried to put the screen resolution as follows:
`#media screen and (max-width:1024px){
.nav-links
{
width:48%;
}
}
#media screen and (max-width:768px)`
This is also running on my firebase server and is available to view through this link:https://test-response-5f60c.web.app/PAGES/quotes.html
I am sorry for any code inconsistencies and mistakes, please help me out, I don't understand what I am doing wrong in the CSS. This is the tutorial I followed: Click on the link -> Tutorial
Following is my code:
function 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 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
navSlide();
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #000000;
color: #f9f9f9;
font-family: 'Open Sans', sans-serif;
font-size: large;
}
.logo{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 20px;
}
.nav-links {
list-style-type: none;
padding: 1.2%;
margin:0;
overflow: hidden;
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
}
.nav-links li a {
font-size: 18px;
font-weight: bold;
display: inline-block;
color: white;
text-align: center;
padding: 26px 26px;
text-decoration: none;
transition: 0.3s;
}
li a:hover {
background-color: #3498DB ;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: #f9f9f9;
margin: 5px;
}
.head {
font-family: sans-serif;
font-weight: bold;
margin: auto;
width: 60%;
border: 3px solid #3498DB ;
padding: 40px;
text-align: center;
opacity: 5.9;
animation-duration: 3s;
animation-name: fadein;
}
#media screen and (max-width:1024px){
.nav-links{
width:48%;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden !important;
}
.nav-links{
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #000000;
display: flex;
flex-direction: column;
align-items:center;
width: 50%;
transform: translate(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.nav-active {
transform: translate(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);
}
#googleForm {
margin-left: 20px;
text-align: center;
margin-top: 20px;
}
<!doctype html>
<html>
<head>
<style>
body {
background-image: url('../IMG/land2.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: auto ;
}
</style>
<title> Quotes </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
<h4> Edge Concreting and Landscaping </h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Quotes</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div id="googleForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5uy_5vc6ozsY1kcGRliC8hYH9w_WqEU1acN0tJQ6rrqEJmg/viewform?embedded=true" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
<script src="../JS/app.js"></script>
</body>
</html>
Set your media queries to a lower max width and position absolute.
For example.
#media (max-width: 768px){.logo h4 {position: absolute;
right: 50px;}}
That should enable you to select your logo and adjust it for mobile device.
#media (max-width: 768px){.nav-links{position: absolute;
right: 50px;}}
Should enable you to select and adjust your dropdown. You can change or substitute rightor left or top or bottom or width within the same media query.
Try reducing the width of nav-links.
This worked for me:
html, body {
overflow-x: hidden;
}
body {
position: relative;
}
im working on a website for school.
The problem is: My hamburger menu is not opening (btw it only shows up on small screens).
Does anyone know why?
Im using HTML5 (CSS3&Javascript)
Thank you in advance.
HTML code (for the menu)
<body>
<nav>
<header>
<div class="logo">
<h4>Daan</h4>
</div>
</header>
<ul class="nav-links">
<li>
Home
</li>
<li>
5 grootste steden
</li>
<li>
Over mij
</li>
<li>
Opmaak
</li>
<li>
Jquery
</li>
<li>
Canvas
</li>
<li>
GIMP
</li>
<li>
Schoolexamen
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
CSS3 code (to transform the menu to a hamburger one on small screens)
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #2E4053;
font-family: 'Poppins', sans-serif;
}
.logo{
color: slategrey;
letter-spacing: 5px;
font-size: 20px;
font-family: 'Cookie';
}
.nav-links{
display: flex !important;
justify-content: space-around;
width: 80%;
padding:30px;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(247, 245, 248);
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;
}
#media screen and (max-width:1000px){
body{
overflow: hidden;
}
.nav-links{
position: absolute;
right: 0rem;
height: 100%;
top: .75rem;
background-color: #2E4053;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 1;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.toggle .line1{
transform: rotate(-45deg) translate(0px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-14px);
}
JS code
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');
burger.classList.toggle('toggle');
});
}
navSlide();
Steps to debug:
Have you linked you JavaScript file?
< script src="yourFileName.js"></ script>
Have you made sure all appropriate areas in JS have a closing (;)? It seems like you had one missing here.
const navLinks = document.querySelectorAll('.nav-links li');
Have you linked to your css?
< link rel="stylesheet" href="#yourFileName.css">
These may be the issues you are facing if you have functionality in your provided link.
Also spaces were added in front of link, script and script closing to have them viewable you can backspace in your editor.
so hello i'm trying to create a navbar and things were going pretty well , but when i was working at the responsivity of the navbar my addeventlistener function doesn't work:
here's my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Nav</title>
</head>
<body>
<nav class="navbar">
<h4 class="logo">Nav</h4>
<ul class="navlinks">
<li>
<a href="#" >Home</a>
</li>
<li>
<a href="#" >Work</a>
</li>
<li>
<a href="#" >About us</a>
</li>
<li>
<a href="#" >Projects</a>
</li>
</ul>
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</body>
</html>
my css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: black;
font-family: 'Poppins', sans-serif;
}
.logo{
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.navlinks{
display: flex;
justify-content: space-around;
width: 30%;
}
.navlinks a:hover{
background-color: rgb(37, 156, 196);
}
.navlinks li{
list-style: none;
}
.navlinks a{
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
cursor: pointer;
display: none;
}
.burger div{
width: 25px;
height: 2px;
background-color: white;
margin: 5px;
}
#media screen and (max-width:1024px){
.navlinks{
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navlinks{
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navlinks 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);
}
}
and here's my javascript code:
const navSlide = () => {
const burger = document.querySelector('.burger')
const nav = document.querySelector('.navlinks')
burger . addEventListener('click',()=>{
nav.classList.toggle('nav-active')
})
}
navSlide();
i am pretty new at this forum but i heard that it was the most popular one and my code lines were making me mad so yeah and thanks again for answering my post
glad to see you're new here and decided to join!
Without using jQuery, you can use this:
const navSlide = () => {
const burger = document.querySelector('.burger')
const nav = document.querySelector('.navlinks')
burger . addEventListener('click',()=>{
nav.classList.toggle('nav-active')
})
}
document.addEventListener("DOMContentLoaded", function(event) {
navSlide();
});
Put basically, this code will wait until the page loads (so that all elements exist within the DOM which means document.querySelector will work) and then it attaches the event listener. This is best practice to avoid issues with slow rendering browsers and such without relying on the browser to render the script last.
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/
I have a web page I started and currently just trying to get the nav bar to be responsive, I've got all the media query tags in but when I'm looking at how it looks in different screen sizes on developer tools, sometimes it will look exactly how I want it to and other times it will look wrong.
I haven't changed anything in the code but when I'm going through the different screen options it will just switch between and I'm not sure why so I don't know whether the code is wrong or if it's just developer tools adjusting?
Any help is greatly appreciated.
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 + 3}s`;
}
};
//burger animation
burger.classList.toggle('toggle');
}, )
}
navSlide();
body {
margin: 0;
padding: 0;
height: 100%;
}
/*navigation top bar*/
.nav {
background-color: #2b2929;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: Arial, Helvetica, sans-serif;
}
.logo {
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30pc;
}
.nav-links li {
list-style: none;
}
.nav-links :hover {
color: rgb(0, 204, 255);
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
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: absolute;
right: 0px;
height: 92vh;
top: 6vh;
background-color: #2b2929;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 100%;
}
.burger {
display: block;
}
.footer {
padding-bottom: 100px;
}
}
#media screen and (min-width:768px) {
body {
overflow-x: hidden;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navlinkfade {
from {
opacity: 0;
transform: translateX(50px)
}
to {
opacity: 1;
transform: translateX(0px);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sue Allerton</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="nav">
<h1 class="logo">Sue Allerton</h1>
<ul class="nav-links">
<li>Home</li>
<li>About Me</li>
<li>Collections</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section class="container">
<div class="main">
<p>let your imagination run wild</p>
</div>
</section>
<footer class="footer">
<div class="social">
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Goodreads</li>
</ul>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>
I'm looking at how it looks in different screen sizes on developer tools, sometimes it will look exactly how I want it to and other times it will look wrong.
You should mention on which screen size it looks different and what you mean by how exactly you want it to look. Also it seems like link is not defined because you are using forEach on a collection and that is an Array method. You can convert the collection to an array first
const NavLinksArray = Array.prototype.slice.call(NavLinks)