Text aninamtion is shaking? - javascript

I was coding away on my newest project of learning css animation.
I've come a long way but for some reason when I scale my div-boks with a text element inside the text begins to shake when it appears.
What is the solution to this...
Btw I do care about effecienty as I will be rated on that for my project.
If javascipt is a better option and you know how to provide that please do
(best in the form of a tutorial page as I actually want to learn the code :D)
I will later use it to for responsive design so keep that if possible it would be nice to find a solution that cheaks that boks too
Here is the code:
function myFunction() {
var x = document.getElementById("topnav_id");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > window.innerHeight || document.documentElement.scrollTop > window.innerHeight) {
document.getElementById("topnav_id").style.top = "0px";
} else {
document.getElementById("topnav_id").style.top = "-300px";
}
}
#import url('https://fonts.googleapis.com/css2?family=Marck+Script&family=Oswald:wght#200;300;400;500;600;700&display=swap');
/* animations */
#media (prefers-reduced-motion: no-preference) {
.fa-down-long {
position:relative;
animation-name: hover-up-down;
animation-duration: 1s;
animation-iteration-count: infinite;
}
}
#keyframes hover-up-down {
0% {left:0px; top:30px;}
25% {left:0px; top:30px;}
50% {left:0px; top:50px;}
100% {left:0px; top:30px;}
}
/* */
#media (prefers-reduced-motion: no-preference) {
.title {
position:relative;
animation-name: opacity-apper;
animation-duration: 10s;
}
}
#keyframes opacity-apper{
0% {opacity: 0%; transform: scale(0.5);}
100% {opacity: 100%; transform: scale(1);}
}
* *:not(.topnav, #topnav){
margin: 0;
}
.background {
height: 100vh;
}
.background_header{
background-color: black;
background-image: url(/assets/placeholders/Front\ page.jpeg);
background-position: center;
}
.background_black{
background-color: black;
}
h1{
font-size: 8vw;
}
h2{
font-size: 3vw;
font-weight: 300;
}
.title {
display: grid;
grid-template-rows: 200px auto ;
font-family: 'Oswald', sans-serif;
color: white;
text-align: center;
padding-top: 30vh;
justify-content: center;
}
/* menubar */
#media screen and (min-width: 600px) {
.flex{
display: flex;
align-items: center;
column-gap: 2rem;
}
}
#topnav_id{
top: -300px;
transition: top 0.3s;
}
/* menubar responsvie */
.logo{
color: black;
width: 300px;
}
#media screen and (min-width:600px) {
.topnav{
position: fixed;
display: flex;
width: 100%;
z-index: 99;
}
}
#media screen and (max-width:600px) {
.topnav{
position: fixed;
display: block;
width: 100%;
z-index: 99;
}
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: rgb(0, 0, 0);
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(255, 255, 255);
}
.dropdown-content a:hover {
background-color: rgb(243, 243, 243);
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(.active), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beta1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class=" background background_header">
<header class="header" id="header">
<div class="topnav" id="topnav_id">
<img class="logo" src="assets/Clean logo shite.svg" alt="Website_Logo">
<div class="flex">
Skills
About
Contact
<div class="dropdown">
<button class="dropbtn">Protfolio
<i class="fa fa-caret-down dropdown_icon"></i>
</button>
<div class="dropdown-content">
Design
School
Public
Social Media
</div>
</div>
☰
</div>
</div>
<div class="title">
<h1>I Make Visions Into Reality</h1>
<h2>Scroll to find More!</h2>
<i class="fa-solid fa-down-long" style="font-size: 5rem; padding-top: 4vh;"></i>
</div>
</div>
<div class="background background_video">
</div>
<div class="background background_white">
</div>
<div class="background background_black">
</div>
<script src="scripts/scroll.js"></script>
<script src="scripts/responsive.js"></script>
<script src="https://kit.fontawesome.com/fd59281c27.js" crossorigin="anonymous"></script>
</body>
</html>
<!-- Colors:
-----------------------------
New Black - #11121a
Orange - #11121a
Blue - #5865F2
Red - #ED4245
-----------------------------
******************************************
Font:
-----------------------------
Title - Oswald
-----------------------
font-family: 'Oswald', sans-serif;
---
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
-----------------------------
Fancy - Marck Script
-----------------------
font-family: 'Marck Script', cursive;
---
#import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
-----------------------------
Text - Arial
----------------------- -->
Thanks


Animations that scale or move position can cause "lag" or "stuttering", especially for low/mid end pc's. It's also recommended not to play too many animations at the same time since that can cause stuttering too. I have a portfolio website with a lot of animations which run fine on my personal pc, but can stutter on my work laptop. I'm thinking that's the issue in this case since your animation runs fine for me.
an article that might help:
https://www.keycdn.com/blog/animation-performance

Related

Menu not showing when clicking icon

For my website I want my icon to display a menu bar for mobile users. I have written some javascript code for it, but I can't get it to work properly. I tried creating an element called "Menu" and assigned the icon button class to it. Afterwards I just made a simple classlist toggle for the div I want to show up. When I do this, the class hamburgermenu (the class i want to show when clicking on the button) shows up as a class within the button. To the contrary I want the class to show up on his own without being in the button class. Does anyone know what the problem might be and pointing me in the right direction?
My code is beneath:
const menu = document.querySelector(".hamburger button"); // Get dropdown menu when clicking on hamburger Icon
menu.addEventListener("click", function() {
Showdropdown();
});
// Showing dropdown content
function Showdropdown() {
menu.classList.toggle("hamburgermenu");
}
/* General styling attributes */
html {
-webkit-text-size-adjust: 100%;
}
* {
margin:0;
padding:0;
border:0;
outline:0;
text-decoration:none;
list-style:none;
box-sizing: border-box;
}
:root {
--color-primary: #4EC843;
--color-secondary: #387CFF;
--color-dashboard: purple;
--color-hover: #20d62c;
--color-variant: linear-gradient(30deg, #1565FF, #9FC0ff);
--color-showcase: #FAFAFA;
--color-withwithout: #6D6D6D;
--container-width-lg: 85%;
--container-width-md: 90%;
--container-width-sm: 94%;
--dashboard-width: clamp(210px, 22vw, 325px);
--transition: all 200ms ease;
--transition-hamburger: all 180ms ease;
--tranition-button: all 800ms ease;
}
body * {
font-family: "Open Sans", sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.container {
width: var(--container-width-sm);
margin: 0 auto;
}
a {
color:black;
}
h1, h2, h3, h4 h5{
line-height:inherit;
}
h1 {
font-size:3rem;
}
h2 {
font-size: 1.9rem;
}
h3 {
font-size:1.363rem;
}
h4 {
font-size:1.125rem;
}
h5 {
font-size:0.938rem;
}
.m1 {
margin-left:0.5rem;
}
.h-6 {
height:1.5rem;
}
.w-6 {
width:1.5rem;
}
svg {
display:flex;
vertical-align: middle;
}
hr {
display: flex;
opacity: 15%;
width: 3.125rem;
text-align: center;
}
img {
width:100%;
height:auto;
}
section {
display:block;
}
.relative {
position: relative;
}
.fixed {
position: fixed;
}
.transition {
transition: all 300ms ease;
}
/* Navigation Menu */
nav {
width:100%;
height:4.5rem;
position:fixed;
top:0;
z-index:11;
background: white;
}
.nav_container {
height:4.5rem;
display:flex;
justify-content: space-between;
align-items: center;
}
.nav_menu {
display:flex;
align-items: center;
gap:3.5rem;
font-size: 0.95rem;
font-weight:500;
}
.nav_menu button {
background:none;
font-size:0.95rem;
font-weight: 500;
}
.nav_menu button:hover {
color:grey;
transition: var(--transition);
}
.nav_menu a:hover {
transition: var(--transition);
color: grey;
}
.login_nav {
display: flex;
align-items: center;
gap:1rem;
font-weight:500;
font-size: 0.95rem;
}
.login_nav a {
color:black;
}
.login_nav a:hover {
transition: var(--transition);
color:grey;
}
.Login:hover {
transition: var(--transition);
color:grey;
}
.switchIconRotate {
transform-origin: center;
transition: 0.2s;
}
.fa-angle-down {
color:#6161F2
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
.demobutton {
cursor:pointer;
background-color: var(--color-primary);
border-radius:2.125rem;
border:none;
color: white;
width:8.125rem;
height:2.188rem;
font-weight:500;
font-size:0.918rem;
}
.demobutton:hover {
background-color: #20D62C;
transition:var(--tranition-button);
}
.startingbackground {
content:'';
position:relative;
margin-top:4.5rem;
width:100%;
height:100vh;
background: var(--color-variant);
border-radius: 0% 0% 75% 0%;
overflow: hidden;
}
.startingbackground3 {
display: flex;
position: relative;
margin-top: 2rem;
}
.dropbtn {
cursor: pointer;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
position: absolute;
background-color: white;
border-radius: 0.4rem;
padding: 2rem;
gap:1.5rem;
opacity: 100%;
display: none;
}
.dropdown-content2 {
display:none;
top:4.5rem;
right:20rem;
width:25rem;
position:absolute;
padding:0.5rem;
gap:1.5rem;
opacity: 100%;
border-radius:0.4rem;
background-color:white;
margin: 0 auto 0 auto;
transition: 300ms;
}
.show {
display:flex;
flex-direction: column;
}
.hamburger {
display:none;
}
.hamburger a {
font-family: inherit;
}
.hamburger a:hover {
transition: var(--transition);
color: grey;
}
.hamburger_button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: white;
border-radius: 0.375rem;
width:2rem;
height:2rem;
}
.hamburger_button:hover {
transition: var(--transition-hamburger);
background-color:rgb(217, 217, 217);
}
.hamburgermenu {
display: none;
width:10rem;
height:10rem;
background-color:rgb(255 255 255);
margin-top: 15rem;
border-radius:5rem;
}
#media screen and (max-width: 890px) {
.hamburger {
display:block;
}
.nav_menu {
display:none;
}
.login_nav {
display:none;
}
.hamburger {
display:block;
}
.nav_container {
padding-left: 0.3rem;
margin-left: auto;
}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DraftFlex</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Font-families -->
<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=Open+Sans:wght#400;500;600&display=swap" rel="stylesheet">
<!-- Animations -->
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
<!-- Fontawesome Icon -->
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<!-- Iconscout CDN -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<!-- Navigation Menu -->
<header>
<nav>
<div class="container nav_container">
<img src="/icons/logo.svg" alt="logo">
<div class="nav_menu">
<div class="dropdown">
<button class="dropbtn switch" onclick="myFunction()"><span>Features</span><i class="fa-solid fa-angle-down switchIconRotate m1"></i></button>
<div class="dropdown-content" id="myDropdown">
Link1
Link2
Link3
</div>
</div>
Pricing
Contact Us
</div>
<div class="login_nav">
Login
<form><button class="demobutton">Get demo</button></form>
</div>
<div class="hamburger">
<button class="hamburger_button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" class="h-6 w-6 "><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
<div class="hamburgermenu">
</div>
</nav>
</header>

`.hamburgermenu {
display:block;
width:10rem;
height:10rem;
background-color:rgb(255 255 255);
margin-top: 15rem;
border-radius:5rem;
}
.hamburgermenu {
display: none;
}
Remove the additional class hamburgermenu that has a display: none; property. Never make duplicates in CSS.

JS NavSlide not working properly when I click on it

I have looked at the other questions that have been answered, tried them out myself and I still couldn't click on my burger and have the slide out menu. I was following a tutorial and it was turning out fine until I got to the JavaScript section of it. I'm not really too sure what I am doing wrong here. Looked around in the forum and tried all the solutions I could find for it to still not work.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
const app = () => {
navSlide();
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.townlogo{
display: flex;
justify-content: center;
margin-top: 20px;
mix-blend-mode: multiply;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: white;
margin-bottom: 20px;
}
ul.navigation{
display: flex;
justify-content: space-around;
width: 40%;
align-items: center;
margin-top: 20px;
background-color: (white);
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
}
ul.navigation li{
list-style: none;
}
ul.navigation a{
color: black;
text-decoration: none;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
li a:hover{
color: rgb(190 30 45);
}
.indexbody{
height: 100%;
margin: 0;
font-size: 17px;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
line-height: 1.8em;
color: rgb(65 57 61);
}
.img1, .img2{
position: relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Can be adjusted for mobile viewing*/
}
.img1{
background-image: url('../Images/lantern.jpg');
min-height: 600px;
}
.img2{
background-image: url('../Images/cookingcropped.jpg');
min-height: 400px;
}
.section{
text-align: center;
padding:50px 80px;
}
.section-mission{
background-color: rgb(65 57 61);
color:white;
}
.section-vision{
background-color: rgb(65 57 61);
color:white;
}
.menutext{
position: absolute;
font-size: 40px;
top: 50%;
width: 100%;
text-align: center;
color: white;
letter-spacing: 3px;
text-shadow: 3px 3px 3px black ;
}
.menutext .border{
border-style: solid;
border-width: 4px;
padding: 8px;
color: white;
box-shadow: 3px 3px 3px black;
text-decoration: none;
}
a.viewmenu:link{
text-decoration: none;
}
a.viewmenu:visited{
text-decoration: none;
}
a.viewmenu:hover{
background-color: transparent;
}
a.viewmenu:active{
text-decoration: none;
}
/*rectangle div contains copyright footer section*/
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 520px solid rgb(190 30 45) ;
border-right: 520px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
#media screen and (max-width: 1024px){
.navigation{
width: 50%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.navigation{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navigation li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 200px solid rgb(190 30 45) ;
border-right: 200px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head> <!--Header containing title,meta,and links-->
<title>ctowncuisine</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.typekit.net/qsw5hiv.css">
<link rel="stylesheet" href="CSS/style.css"> <!--link reference to CSS stylesheet-->
</head>
<body>
<nav>
<div class="townlogo"> <!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="chinese restaurant logo">
</div>
<ul class="navigation"> <!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li><span>Reserve Table</span></li>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</nav>
<div class="indexbody"></div>
<div class="img1"></div> <!--lantern.html image class-->
<a class="viewmenu" href="menu.html"> <!--Linking border text with href-->
<div class="menutext">
<span class="border ">
View Our Menu
</span>
</div>
</a>
<section class="section section-mission">
<h2 class="mission">Our Mission</h2> <!--This is the second heading containing: Our Mission section-->
<p>To bring quality, style and the wish for good fortune to all of our guests. We provide a high-end experience through Chinese cuisine.
</p> <!--Paragraph containing the mission statement of TOWN-->
</section>
<div class="img2"> <!--div classifying second image: cookingcropped.html-->
<span class="border">
</span>
</div>
<section class="section section-vision">
<h2 class="vision">Vision</h2> <!--header 2 containing a class for CSS: Vision-->
<p> <span style="color: rgb( 213 162 141);">TOWN</span> combines a variety of chinese cuisine to excite and delight our customers.
Our vision for the future is to create experiential dining that is more than just a night out.<br> We aim to bring quality and luxury across all aspects of our brand.
The approach of <span style="color: rgb( 213 162 141);">TOWN</span> is to develop our brand with the understanding of both our culture and consumer insights.<br> Within our vision always lives the promise of inspiring creativity, conversation and quality.
Our audience is a high-end clientele who values a dining experience.<br>The age range of our customers are from early 30s-60s. We would like them to come back for both personal dining and events.
</p>
</section>
<footer>
<div class="rectangle"> <!--This section is the footer-->
© 2022 ctowncuisine.com designed by <span>Mariah Mendoza</span>
</div>
</footer>
<script> src="./js/app.js"</script>
</body>
</html>

It‘s hard to help because your code does not work yet. The burger has no size so we cannot click it.
Otherwise, your positioning and transition seems fine. But you’re hiding all menu items with opacity: 0. Since the menu is white, you will not see anything.
The current code has some accessibility issues, meaning it does not work well with assistive technology, which people with disabilities rely on. I improved them and I’ll explain them further down.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
if (nav.classList.toggle('nav-active')) {
// now it’s active
burger.setAttribute('aria-expanded', true);
nav.setAttribute('aria-hidden', false);
} else {
burger.setAttribute('aria-expanded', false);
nav.setAttribute('aria-hidden', true);
}
});
}
const app = () => {
navSlide();
}
.navigation {
list-style-type: none;
}
.navigation a {
display: block;
padding: .5em;
}
#media screen and (max-width: 1024px) {
.navigation {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.navigation {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
width: 40px;
}
.burger .line {
display: block;
background-color: black;
height: .2em;
margin: .4em 0;
}
.nav-active {
transform: translateX(0%);
}
}
<nav>
<div class="townlogo">
<!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="Town">
</div>
<button class="burger" id="burger" aria-expanded="false" aria-controls="navigation" onclick="navSlide()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<ul class="navigation" id="navigation">
<!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li>Order Online</li>
</ul>
</nav>

How to have my css navbar be proportional to the page

My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!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">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew">RiseUpOnario.ca</h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<span class="nav-link-span"><span class="u-nav">Home</span></span>
<span class="nav-link-span"><span class="u-nav">Blog</span></span>
<span class="nav-link-span"><span class="u-nav">Join</span></span>
<span class="nav-link-span"><span class="u-nav">Donate</span></span>
<span class="nav-link-span"><span class="u-nav">MPP Finder</span></span>
<span class="nav-link-span"><span class="u-nav">About Us</span></span>
<span class="nav-link-span"><span class="u-nav">Contact</span></span>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/*-------------Reset-------------*/
button {
background: none;
box-shadow: none;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
html {
scroll-behavior: smooth;
}
/*-------------Layout-------------*/
body {
line-height: 1.5em;
padding: 0;
margin: 0;
}
section {
height: 100vh;
}
#home {
background-color: #ddd;
}
#blog {
background-color: #aaa;
}
#join {
background-color: #888;
}
#donate {
background-color: #666;
}
#mppfinder {
background-color: #ddd;
}
#aboutus {
background-color: #aaa;
}
#contact {
background-color: #666;
}
/*-------------Helpers-------------*/
.skew {
transform: skew(-20deg);
}
.un-skew {
transform: skew(20deg);
}
/*-------------Nav-------------*/
#nav-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#nav {
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
font-family: "Saira Semi Condensed", sans-serif;
height: 4em;
overflow: hidden;
}
#nav.nav-visible {
height: 100%;
overflow: auto;
}
.nav {
display: flex;
height: 4em;
line-height: 4em;
flex-grow: 1;
}
.nav-link,
.logo {
padding: 0 1em;
}
span.gradient {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
padding: 0 1em;
position: relative;
right: 1em;
margin-right: auto;
}
span.gradient:hover {
animation-name: logo-hover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}
h1.logo {
font-weight: 300;
font-size: 1.75em;
line-height: 0.75em;
color: #fff;
}
h1.logo a, a:active, a:hover, a:visited {
text-decoration: none;
color: #fff;
}
.nav-link {
text-transform: uppercase;
text-align: center;
border-top: 0.5px solid #ddd;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #e9b1a7;
}
a:hover {
text-decoration: underline;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.btn-nav {
color: #e9b1a7;
padding-left: 2em;
padding-right: 2em;
}
#media (min-width: 800px) {
#nav-wrapper {
overflow: hidden;
}
#nav {
overflow: hidden;
flex-direction: row;
}
.nav-link {
border-top: none;
}
.right {
overflow: hidden;
flex-direction: row;
justify-content: flex-end;
position: relative;
left: 1.5em;
height: auto;
}
.btn-nav {
display: none;
}
.nav a:link.active, a:visited.active, a:active.active {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
color: #fff;
}
.nav-link-span {
transform: skew(20deg);
display: inline-block;
}
.nav-link {
transform: skew(-20deg);
color: #777;
text-decoration: none;
}
.nav-link:last-child {
padding-right: 3em;
}
a:hover.nav-link:not(.active) {
color: #444;
background: #ddd;
background: linear-gradient(45deg, #fff, #ddd);
}
}
#keyframes logo-hover {
20% {
padding-right: 0em;
}
100% {
padding-right: 5em;
}
}
</style>
<script>
var util = {
mobileMenu() {
$("#nav").toggleClass("nav-visible");
},
windowResize() {
if ($(window).width() > 800) {
$("#nav").removeClass("nav-visible");
}
},
scrollEvent() {
var scrollPosition = $(document).scrollTop();
$.each(util.scrollMenuIds, function (i) {
var link = util.scrollMenuIds[i],
container = $(link).attr("href"),
containerOffset = $(container).offset().top,
containerHeight = $(container).outerHeight(),
containerBottom = containerOffset + containerHeight;
if (
scrollPosition < containerBottom - 20 &&
scrollPosition >= containerOffset - 20
) {
$(link).addClass("active");
} else {
$(link).removeClass("active");
}
});
}
};
$(document).ready(function () {
util.scrollMenuIds = $("a.nav-link[href]");
$("#menu").click(util.mobileMenu);
$(window).resize(util.windowResize);
$(document).scroll(util.scrollEvent);
});
</script>

Try implementing % in your stylesheet for fonts and divs!
For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like
elementName{ max-width: 75%}
See if that helps with some of the elements inside the navWrapper.

Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.

Javascript navigation button, data-visible class problem

guys! I have some problems with my script. It's with my navigation button which if you press the tab should be coming up. I don't get any error codes. Could I get some help? It does give me value back in the console "true" or "false". I think the problem is not with the javascript more like with CSS or HTML. Thank you in advance!
const primaryNav = document.querySelector(".nav-items");
const navToggle = document.querySelector(".mobile-nav-toggle");
navToggle.addEventListener("click", () => {
const visibility = primaryNav.getAttribute("data-visible");
if(visibility === "false"){
primaryNav.setAttribute("data-visible", true);
navToggle.setAttribute("aria-expanded", true);
} else if (visibility === "true"){
primaryNav.setAttribute("data-visible", false);
navToggle.setAttribute("aria-expanded" , false);
}
});
html,body{
margin: 0%;
box-sizing: border-box;
background-image: url(../assets/Coding2.jpg);
background-size: cover;
background-attachment: fixed;
overflow-x: hidden;
}
/*-------Global Classes ------*/
a{
text-decoration: none;
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
ul{
list-style-type: none;
}
/* -------navbar-------*/
.nav{
padding: 0 2rem;
height: 0rem;
min-height: 15vh;
overflow: hidden;
}
.nav .nav-brand a{
font-size:2rem;
padding:1rem 1.5rem;
position:relative;
top: 15%;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .nav-items{
list-style-type: none;
display: flex;
margin: 0;
align-items: center;
justify-content: space-between;
}
.nav .nav-menu{
justify-content: space-between;
}
.nav .nav-items .nav-link{
padding: 1rem 1.5rem;
position: relative;
font-size: 1.1rem;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .social{
padding:1.4rem 0;
}
.nav .nav-items a{
text-decoration: none;
color: white;
font-family: Arial, "Time New Roman";
}
.mobile-nav-toggle{
display: none;
}
.nav .nav-items a > [aria-hidden="true"]{
font-weight: 700;
margin-inline-end: 0.75rem;
}
#media (max-width: 35em){
.nav .nav-brand a{
right: 30%;
font-size: 1.5rem;
}
.nav .nav-items{
--gap: 2em;
position: fixed;
z-index: 1000;
inset: 0 0 0 30%;
flex-direction: column;
padding: min(20vh, 10rem) 2em;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
transform: translateX(100%);
}
.nav .nav-times[data-visible="true"]{
transform: translateX(0%);
}
.mobile-nav-toggle{
display: block;
position: absolute;
background: url(../assets/icon-hamburger.svg);
background-repeat: no-repeat;
border: 0;
z-index: 9999;
width: 2rem;
aspect-ratio: 1;
top: 2rem;
right: 2rem;
font-size: 0;
}
}
/* ---X---navbar---X---*/
<!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">
<title>Computer Science Website</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<script src="./js/main.js" defer></script>
<button class="mobile-nav-toggle" aria-controls ="nav-items" aria-expanded ="false"><span class="sr-only">Menu</span></button>
<nav class="nav">
<div class="nav-menu flex-row">
<div class="nav-brand">
CBlogging
</div>
<div>
<ul id = "nav-items" data-visible = "false" class="nav-items flex">
<li class ="nav-link">
<span aria-hidden="true">00</span>Home
</li>
<li class ="nav-link">
<span aria-hidden="true">01</span>Contact
</li>
<li class ="nav-link">
<span aria-hidden="true">02</span>Article
</li>
<li class ="nav-link">
<span aria-hidden="true">03</span>Home
</li>
</ul>
</div>
<!---
<div class="social text-gray">
F
I
T
Y
</div>
-->
</div>
</nav>
</body>
</html>

First step is change background-color like:
body {
background-color: #252525;
}
Now in button change font-size to example 17px:
.mobile-nav-toggle {
font-size: 17px;
}
Second and last step is change name of css atribute .nav-times to .nav-items:
.nav .nav-items[data-visible='true'] {
transform: translateX(100%);
}
That's it. Your welcome :)

Breakpoint leaves blank space in content

At my breakpoint of 1100px I have told CSS to remove a div which holds an image. However, the rest of the content does not move across and there is a large blank area (as if the div is still there). All I would like to happen is for the content to all shift over and fill the page. This error on occurs on this singular page and this specific to this very break point.
/*minimised browser winddow */
#media(max-width: 1100px) {
header #branding,
header nav,
header nav li,
#newsletter form,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
aside {
display: none;
}
#newsletter h1 {
display: none;
}
}
/* 768 tablet */
#media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
display: none;
}
#showcase h1 {
font-size: 275%;
}
#showcase p {
font-size: 100%;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
.col-25,
.col-75 {
width: 100%;
margin-top: 0;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* 400 pixels mobile phone */
#media screen and (max-width: 480px) {
header #branding,
header nav,
header nav li {
text-align: center;
font-size: 100%
}
header ul {
padding: 10px;
font-size: 100%;
}
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html9shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰
</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><i class="fa fa-phone fa-2x" ></i></div>
<h2>Our Story</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<p>
Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area.</p>
<div class="dark">
<h3>What We Offer</h3>
<ul>
<li>Plumbing and Heating Services</li>
<li>Gas Safe Registered: 202542</li>
<li>VAT Registered</li>
<li>25 years of expertise</li>
<li>Plumbing and Heating Services</li>
<li>Heating Engineer Qualified</li>
<li>VAT Registered</li>
<li>100% Satisfaction Garauntee</li>
</ul>
</article>
<aside id="sidebar">
<div class="dark">
<h3>Satisfaction Garauntee</h3>
<p>Reputation matters. 98% of our customer would reccomend us to a friend.</p>
<img class="catsmall" src="cat.png" alt="checkatradelogo">
</div>
</aside>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
<p>Registered in England No. 4364232</p>
</div>
</footer>

I think that setting your container class with a width:100% in your #media css will fix your problem.

It's possible in 2 ways to center the div(in your case "What we offer" block)
Center block by position:relative
#main-col{
position:relative;
left:15%; //This can differ, and you can keep whatever you see it's best
}
Increase the min-width of that particular block
#main-col{
min-width: 100%; //Remember, you need to force the width,
//so width:100% won't work here. Hence min-width
}
body {
font: 100%/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: white;
}
/* Style the list 'container' */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
ul.topnav li {
float: left;
}
/* style the links */
ul.topnav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 100%;
}
/* hover */
ul.topnav li a:hover {
color: gold;
}
/* Hide the icon initially */
ul.topnav li.icon {
display: none;
}
/* Global */
.container {
width: 70%;
margin: auto;
overflow: hidden;
/* Allows the burger nav and branding to sit on the same line */
}
a {
text-decoration: none;
text-shadow: 50px;
color: black;
}
ul {
margin: 0;
padding: 0;
}
.subscribe {
height: 38px;
background: gold;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: black;
}
.dark {
padding: 25px;
background: #35424a;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
.maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* Header **/
header {
background: #35424a;
color: white;
padding-top: 30px;
min-height: 70px;
border-bottom: gold 5px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 100%;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight {
color: gold;
}
header a:hover {
color: gold;
}
h3 .bronze {
color: #cc6633;
}
h3 .silver {
color: silver;
}
h3 .gold {
color: gold;
}
img.catsmall {
width: 90%;
height: auto;
}
/* Showcase */
#showcase {
min-height: 350px;
}
#showcase h1 {
margin-top: 50px;
font-size: 500%;
margin-bottom: 10px;
text-align: center;
}
#showcase h2 {
margin-bottom: 10px;
text-align: center;
}
#showcase p {
font-size: 120%;
}
/* Newsletter */
#newsletter {
padding: 15px;
color: #ffffff;
background: #35424a
}
#newsletter h1 {
float: left;
}
#newsletter form {
float: right;
margin-top: 15px;
}
#newsletter input[type="email"] {
padding: 4px;
height: 26px;
width: 250px;
}
/* Sidebar */
aside#sidebar {
float: right;
width: 25%;
margin-top: 10px;
}
section#contactus .quote input,
section#contactus .quote textarea {
width: 30%;
padding: 5px;
}
/* Main-col */
article#main-col {
float: left;
width: 70%;
}
/* Imagery */
#imagery {
margin-top: 2%;
margin-bottom: 2%;
}
#imagery .box {
float: right;
text-align: center;
width: 30%;
padding: 10px;
}
#imagery .box i {
font-size: 800%;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
.column img {
margin-top: 12px;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.container .visuals {
float: right;
}
.container .callus {
float: right
}
.fa-phone {
color: gold;
}
/* Services */
input[type=text],
select,
textarea {
width: 60%;
padding: 12px;
border: 1px box-sizing: border-box;
resize: vertical;
}
/* Floating column for labels: 25% width */
.col-25 {
float: left;
width: 30%;
margin-top: 10px;
}
/* Floating column for inputs: 75% width */
.col-75 {
float: left;
width: 70%;
margin-top: 10px;
}
footer {
padding: 20px;
margin-top: 20px;
color: black;
background-color: gold;
text-align: center;
}
/*minimised browser winddow */
#media(max-width: 1100px) {
header #branding,
header nav,
header nav li,
#newsletter form,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
aside {
display: none;
}
#newsletter h1 {
display: none;
}
#main-col {
min-width: 100%;
}
}
/* 768 tablet */
#media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
display: none;
}
#showcase h1 {
font-size: 275%;
}
#showcase p {
font-size: 100%;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
.col-25,
.col-75 {
width: 100%;
margin-top: 0;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* 400 pixels mobile phone */
#media screen and (max-width: 480px) {
header #branding,
header nav,
header nav li {
text-align: center;
font-size: 100%
}
header ul {
padding: 10px;
font-size: 100%;
}
/* CSS reset */
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
HTML5 display-role reset for older browsers article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
background-image: url("bg.jpg");
background-size: cover;
background-size: contain;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html9shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰
</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><i class="fa fa-phone fa-2x" ></i></div>
<h2>Our Story</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<p>
Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area.</p>
<div class="dark">
<h3>What We Offer</h3>
<ul>
<li>Plumbing and Heating Services</li>
<li>Gas Safe Registered: 202542</li>
<li>VAT Registered</li>
<li>25 years of expertise</li>
<li>Plumbing and Heating Services</li>
<li>Heating Engineer Qualified</li>
<li>VAT Registered</li>
<li>100% Satisfaction Garauntee</li>
</ul>
</article>
<aside id="sidebar">
<div class="dark">
<h3>Satisfaction Garauntee</h3>
<p>Reputation matters. 98% of our customer would reccomend us to a friend.</p>
<img class="catsmall" src="https://i.pinimg.com/736x/d5/7a/e1/d57ae1e0abaa478e79388007b6d6dd09--woman-face-woman-style.jpg" alt="checkatradelogo">
</div>
</aside>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
<p>Registered in England No. 4364232</p>
</div>
</footer>

Categories