I've been given a design with a 90 degree rotated menu with dropdowns in it. Of course, I've got it working in every browser except IE8 (we aren't going to optimize for anything lower).
This is the staging site: http://williamsandports.com/wp/
The #navbar element itself rotates fine using
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
Using the awesome built-in IE "developer tools" I have found that the outermost ul which is #menu-main-menu is still un-rotated and hanging at the top of the screen so the dropdown elements aren't able to be interacted with properly.
Suggestions anyone? I'll take ANY fix, css, js, whatever to get this one finished up except static images of course :) You can view the same site in FF or Chrome to see what the finished solution should look like.
You can't use transform in IE8. You can find out more: http://caniuse.com/#search=transform.
If you want rotate such as your site. You can use static images and css sprites for IE8. This is demo, I fix for IE 8 solution rotate.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solution rotate in IE8</title>
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
<body>
<div class="container">
<div class="nav-bar">
<ul class="navigation">
<li>Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Our Process</li>
<li>Client List</li>
<li>Consultation</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
CSS
- stylesheet.css: Use -webkit-transform: ratate(90deg)
*,
*:before,
*:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.container {
width: 900px;
margin-left: auto;
margin-right: auto; }
.nav-bar {
width: 100%;
position: relative; }
.nav-bar:before, .nav-bar:after {
content: "";
display: table; }
.nav-bar:after {
clear: both; }
.nav-bar {
*zoom: 1; }
.navigation {
background-color: #f2f2f2;
padding: 10px;
width: 100%;
position: absolute;
left: 40px;
top: 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 0 0; }
.navigation li {
display: inline-block; }
.navigation a {
color: #825a13;
font-weight: 700;
padding: 10px;
text-decoration: none;
text-transform: uppercase; }
- ie.css: Fix when you use IE8 (use images and css sprites)
.navigation {
background-color: transparent;
width: 40px; }
.navigation li {
display: block;
float: left; }
.navigation a {
background: url(../img/nav.png) no-repeat;
display: block;
text-indent: -9999px;
width: 40px;
height: 118px; }
.navigation a.home {
background-position: 0 0;
height: 75px; }
.navigation a.about {
background-position: 0 -86px;
height: 90px; }
.navigation a.portfolio {
background-position: 0 -187px;
height: 101px; }
.navigation a.process {
background-position: 0 -299px; }
.navigation a.client {
background-position: 0 -435px; }
.navigation a.consultation {
background-position: 0 -571px; }
.navigation a.contact {
background-position: 0 -706px; }
Images:
I test working fine in IE8. Maybe this isn't best solution but I hope it can help you use in your site.
Related
I'm trying to make a mouse trailer for my site, but when hovering over a YouTube iframe the trailer does not follow it into the iframe area. (I'm using js to extract the x and y coordinates of the mouse from the body) I have like no idea how to make this work so any help or ideas would be much appreciated!
Code below:
there are ">"s next to important code
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="homestyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<title>****************</title>
</head>
<body>
<div id="trailer">
</div>
<script src="homescript.js"></script>
<div class="navbaralign">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</div>
<div id="toppage" class="toppage">
<div class="maintitle">
<h1>****************</h1>
<h2>Front-end web developer, music producer, and 3d animator/artist.</h2>
</div>
</div>
<div id="about" class="about">
<h3>About Me</h3>
</div>
> <div id="mywork" class="mywork">
> <iframe class="interactable" src="https://www.youtube.com/embed/B6ipLAQ7lM4" title="bowling alley
> animations be like" frameborder="0" allow=""></iframe>
> <iframe class="interactable" src="https://www.youtube.com/embed/kJniNIlKIDE" title="Ktashi - HOLD
> ON" frameborder="0" allow=""></iframe>
> </div>
</body>
</html>
css
html {
scroll-behavior: smooth;
}
#trailer {
height: 20px;
width: 20px;
background-color: #ffffff;
border-radius: 20px;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 500ms ease;
}
body:hover > #trailer {
opacity: 1;
}
body {
background-color: #FF4722;
margin: 0;
}
h1 {
font-family: Inter;
font-weight: 900;
color: #FFFFFF;
font-size: 48px;
line-height: 48px;
text-align: center;
padding-left: 10vw;
padding-right: 10vw;
}
h2 {
font-family: Inter;
font-weight: 300;
color: #FFF9D1;
font-size: 24px;
line-height: 24px;
text-align: center;
padding-left: 10vw;
padding-right: 10vw;
}
h3 {
font-family: Inter;
font-weight: 600;
color: #ffffff;
font-size: 24px;
line-height: 12px;
text-align: left;
}
.toppage {
height: 100vh;
display: grid;
place-items: center;
}
.navbaralign {
display: flex;
justify-content: center;
}
.navbar {
display: flex;
justify-content: space-between;
height: 5vh;
padding: 0;
list-style: none;
align-items: center;
background-color: #000000;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.50);
margin: 0;
position: fixed;
top: 1vh;
width: 80%;
border-radius: 6vh;
padding: 2.5vh;
box-sizing: border-box;
padding-top: 3vh;
padding-bottom: 3vh;
}
.maintitle {
display: grid;
place-items: center;
user-select: none;
}
a {
text-decoration: none;
color: #ffffff;
font-family: Inter;
font-weight: 600;
font-size: 18px;
transition: color 500ms ease;
background-color: linear-gradient(#ffffff, #000000)
}
a:hover {
color: #FFF9D1;
}
#media (max-width: 700px) and (orientation: portrait) {
.navbar {
flex-direction: column;
height: 20vh;
}
}
.mywork {
display: flex;
gap: 2vw;
padding: 2vw;
background-image: linear-gradient(#FF4722, #000000)
}
iframe {
aspect-ratio: 16 / 9;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
.interactable {
transition: background-size 500ms ease, opacity 500ms ease;
}
.interactable:hover {
background-size: 105%;
opacity: 0.8;
}
js
const trailer = document.getElementById("trailer");
window.onmousemove = e => {
const x = e.clientX - trailer.offsetWidth / 2,
y = e.clientY - trailer.offsetHeight / 2;
const keyframes = {
transform: `translate(${x}px, ${y}px)`
};
trailer.animate(keyframes, {
duration: 800,
fill: "forwards"
});
};
I've tried adding
pointer-events: none;
to the iframes' class in css and I had a feeling that that wouldn't work. I was right. but I honestly have no idea what else could work. đŸ˜…
For security reasons, browsers don't allow you to get information about interactions made on cross-domain iframes. In this case, youtube.com is a different domain than the original website(ie cross-domain), and thus you can't get mouse information while the user is interacting with youtube. This is done to prevent things like embedding banking websites and getting the user's interactions made on logins etc... You can normally get around this by putting a transparent div over the original iframe, but that would also block any mouse interaction with the youtube iframe in the process. This would mean that while the circle would follow the mouse while you were over the youtube window, you would be unable to start the video since you couldn't interact with the youtube page. There isn't really a way to get around this issue, since it is caused by your web browser's security. Hopefully, this helps :)
My issue right now with this is on safari (yes, I know not many people will use this browser but I want maximum usability, and the nav disappearing is a weird problem), chrome and firefox work perfectly fine but it's just safari that is the oddball. What should be happening is what happens in the code snippet, but when I shorten the page (say so a mobile device size), refresh, and open it back up, my whole nav dissapears.
Picture of disappeared nav
$(document).ready(function() {
const ulNav = document.querySelector(".ul-navbar");
const navButt = document.querySelector(".nav-toggle");
//on click visibility is checked, if its "false", the data-visible attribute in css would be set to true and if its "true" it would be set to false.
navButt.addEventListener("click", () => {
const vis = ulNav.getAttribute("data-visible");
console.log(vis);
if (vis === "false") {
ulNav.setAttribute("data-visible", true);
} else {
ulNav.setAttribute("data-visible", false);
}
});
});
:root {
--background: rgba(50, 135, 242, 0.8);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: lightblue;
font-family: serif, sans-serif;
font-weight: 400;
display: grid;
grid-template-rows: min-content 1fr;
overflow-x: hidden;
}
/* logo-work */
.img {
height: 50px;
width: 50px;
}
.logo {
margin: 2rem;
}
/* nav starts here */
.ul-navbar {
display: block;
padding: 0;
margin: 0;
text-align: left;
position: relative;
width: 100%;
z-index: 999;
list-style: none;
background-color: hsl(0 0% 0%/ 0.3);
visibility: visible;
}
.nav-toggle {
display: none;
}
#supports (backdrop-filter: blur(1rem)) {
.ul-navbar {
background-color: hsl(0 0% 100%/ 0.1);
backdrop-filter: blur(1rem);
}
}
/* login */
.login {
position: absolute;
right: 30px;
top: -32px;
}
.formDiv {
position: absolute;
top: 50%;
left: 30%;
display: flex;
align-items: centeR;
}
/* rest of navbar */
.ul-navbar li {
margin-left: 1em;
}
.ul-navbar a {
color: darkgreen;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
.ul-navbar a:hover,
.ul-navbar a:focus {
color: #222;
}
.flex {
display: flex;
}
/* p-head */
.primary-header {
align-items: center;
justify-content: space-between;
}
/* for mobile devices */
#media (max-width: 40em) {
.ul-navbar {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
right: 0;
left: 30%;
flex-direction: column;
padding: min(30vh, 10rem) 2rem;
transform: translateX(100%);
}
/* what the javscript should be changing */
.ul-navbar[data-visible="true"] {
visibility: visible;
transform: translateX(0%);
}
.nav-toggle {
display: block;
position: absolute;
z-index: 9999;
background: lightgreen;
background-repeat: no-repeat;
width: 2rem;
height: 2rem;
top: 2rem;
right: 2rem;
}
.login {
position: absolute;
right: 500px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jonathan's Homepage</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="nav.js" defer></script>
</head>
<body>
<header class="primary-header flex">
<div class="logo">
<a href="index.html">
<img class="img" src="./imges/beatlejuce.png" alt="logo">
</a>
</div>
<button class="nav-toggle" aria-controls="ul-nav" aria-expanded="false">=</button>
<nav>
<ul id="ul-nav" data-visible="false" class="ul-navbar flex">
<li>home</li>
<li>code</li>
<li>photography</li>
<li>random</li>
<li><button onclick="location.href = 'login.html';" id="login" class="login">Login</button></li>
</ul>
</nav>
</header>
</body>
</html>
You may need to use the correct vendor prefix for Safari. For Safari it is -webkit-. Here's a link to the MDN page on vendor prefixes:
https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix
Here's the correct media query that worked for me tested in JS fiddle:
#-webkit-media(){}
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;
}
I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.
Here's the html
<!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">
<title>Document</title>
</head>
<body>
<div id="navbar">
<div id="logo">
<a href="#">
<h1>My logo</h1>
</a>
</div>
<ul id="menu">
<li><a class="link-button" href="#">HOME</a></li>
<li><a class="link-button" href="#">ARTICLES</a></li>
<li><a class="link-button" href="#">PROJECTS</a></li>
<li><a class="link-button" href="#">AUTHOR</a></li>
<li><a class="link-button" href="#">CONTACT</a></li>
</ul>
</div>
<div id="welcome">
<h1 id="welcome-text">My Portfolio</h1>
</div>
<div class="container">
</div>
<!-- Here script for hidding navbar on scroll down -->
<script>
window.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(window.pageYOffset > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
</script>
</body>
</html>
And here's the full css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow: hidden;
}
#navbar{
position: sticky;
width: 100%;
top: 0;
transition: background 0.5s;
background-color: transparent;
z-index: 2;
}
#navbar #logo{
float: left;
margin: 10px;
}
#navbar #logo a{
font-size: 155%;
color: #ffffff;
text-decoration: none;
}
#navbar ul{
float: right;
justify-content: space-around;
list-style: none;
align-items: center;
padding: 20px;
}
#navbar ul li{
display: inline-block;
}
/* === Here I'm changing the display property of the navbar to none to make it disappear. === */
#navbar.navbar-scroll{
display: none;
}
.link-button{
display: block;
text-align: center;
margin: 0 15px;
font-size: 89%;
color: #ffffff;
text-decoration: none;
}
.link-button::after{
content: '';
display: block;
width: 0;
height: 2px;
margin-top: 2px;
background: #ffffff;
transition: width .3s;
}
.link-button:hover::after{
width: 100%;
transition: width .3s;
}
#welcome{
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
#welcome::before{
content: "";
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
z-index: -1;
transform: translateZ(-2px) scale(3);
}
#welcome-text{
color: #ffffff;
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
/* text-align: center; */
font-size: 600%;
}
.container{
background-color: #1f1f1f;
height: 1000px;
}
In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.
If there's a better way of hiding the navbar on scroll then that's welcomed as well.
Thanks for your time.
Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.
From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.
Something like this should work as your JavaScript:
document.body.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(document.body.scrollTop > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.
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)