We Keep Coding

Text aninamtion is shaking?

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

How can I hide the searchBar in a responsive navbar?

I have a problem with the searchbar not hiding when reducing the size of the window. Maybe there's a better way to solve the problem but hiding the searchbar, however, this is my first webpage project... sorry for the many mistakes!
My intention is to hide the searchbar (or maybe relocate it) so that the new "hamburger" button takes place.
Here you have a snippet of the navbar code:
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Logo resize */
.logo-container {
max-width: 0px;
max-height: 0px;
margin-bottom: -3px;
left: 0;
position: absolute;
}
.logo {
width: 180px;
height: 48.5px;
object-fit: cover;
object-position: 50% 42%;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
margin-top: 130px;
overflow: hidden;
margin-right: -10px;
margin-left: -10px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
position: relative;
left: 42%;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: rgb(228, 228, 228);
color: rgb(68, 66, 70);
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #616161;
color: rgb(228, 228, 228);
}
/* Style the search box inside the navigation bar */
.topnav input[type=text] {
float: right;
position: relative;
right: 40px;
padding: 6px 10px;
border: none;
margin-top: 10px;
margin-right: 16px;
font-size: 17px;
border-radius: 10px;
}
.topnav .search-container button {
float: right;
position: absolute;
right: 15px;
padding: 6px 10px;
margin-top: 10px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
border-radius: 50%;
}
.topnav .search-container button:hover {
background: #ccc;
border-radius: 50%;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
<!-- The Navbar -->
<div class="topnav" id="myTopnav">
<!-- The logo -->
<div class="logo-container">
<img class= "logo" src="https://img.freepik.com/vector-gratis/logo-lorem-ipsum-eslogan-aqui-plantilla-arte-diseno_647943-2.jpg?w=2000"
alt="logo">
</div>
<!-- The buttons -->
HOME
NEWS
HISTORY
GUIDE
<!-- The searchbar -->
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<!-- Responsiveness to small window with a button -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
Sorry again for my mistakes and terrible style... I guess we all start somewhere! hahaha
Thanks in advance!

You could just use a media query(as you already have) and hide the whole div when below a certain viewport
ex:
#media screen and (max-width: 600px) {
.search-container {
display: none;
}
}

i had a similar problem, i found out that when using bootstrap and MUI together , it messes many things .. so i would recommend to uninstall one of the two ..

How to animate responsive menu

I have a navbar, with a menu icon when the screen width is small. I did the animation, when I click on the menu icon, it rolls down nice and smoothly by increasing its navbars max height, but I can't work out, the do the animation backwards(when you click on the menu icon again).
I tried adding: transition: max-height 1s ease-out; to the .topnav{} but it doesn't work.
function responsiveNavbar() {
var x = document.getElementById("responsiveNavBar");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
max-height: 400px;
transition: max-height 1s ease-in;
}
*other*
}
#media screen and (max-width: 600px) {
.topnav {
max-height: 30px;
}
*other*
}
<div class="topnav" id="responsiveNavBar">
<a>MODELS</a>
<a>MOTORSPORT</a>
<a>ABOUT</a>
<div onclick="responsiveNavbar()">*working menu icon*</div>
</div>

Have a look at this code
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
</body>
</html>
Working code source: https://codepen.io/aakash1282/pen/GRWVMwy

Responsive navigation bar - won't collapse correctly and funky on Drupal

I've created a responsive navigation bar. I have two problems. 1) When I shrink the screen on my test pages, all of the links don't hide. 2) When I insert the code onto Drupal, it puts the links that are nested in on a different baseline. It doesn't do that on the test page. I can't figure out a way to create the responsive bar without the button...probably because I'm a beginner.
Here are screenshots for both of the issuesenter image description here enter image description here and the code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Helvetica}
/* Add a background color to the top navigation */
.topnav {
overflow: hidden;
background-color: #486D87;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #555;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #BE6A14;
color: white;
}
/* Add a background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #BE6A14;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.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;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
<div class="dropdown">
<button class="dropbtn">About Us</button>
<div class="dropdown-content">
Store Info
History
Consignment
We Buy Used Books
</div>
</div>
Events
Blog
<div class="dropdown">
<button class="dropbtn">Signed Firsts</button>
<div class="dropdown-content">
Signed Fiction
Signed Nonfiction
Signed Suspense
</div>
</div>
Staff Picks
<div class="dropdown">
<button class="dropbtn">Square Books, Jr.</button>
<div class="dropdown-content">
Store Info
History
Storytime
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Gifts</button>
<div class="dropdown-content">
<a href="/square-books-gifts">
Gift Cards
</div>
</div>
Dear Reader
☰
</div>
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>

Maybe this will solve your use case:
https://jsfiddle.net/5tof6ry0/4/
Change in css:
.topnav {
overflow: hidden;
background-color: #486D87;
display: flex;
justify-content: space-between;
}

Your code seems fine you just need to hide the button element with your media query.
Insert this into your css.
#media screen and (max-width: 600px) {
/*Hide button elements*/
.topnav button,
.topnav a:not(:first-child)
{display: none;}

Responsive Navigation Not Showing All Items

Hello I am currently learning responsive design and I am trying to make a responsive navigation bar which turns in to a menu when visited on a phone or mobile device! Everything works except not all the navigation items show on the mobile device and I am not sure why! This is the code:
<div class="container">
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> RONNIE<b>GURR</b></li>
<section class="div_navbar_items">
<li class="navbar_items"> HOME </li>
<li class="navbar_items"> ABOUT US </li>
<li class="navbar_items"> GALLERY </li>
<li class="navbar_items"> SHOP </li>
<li class="navbar_items"> CONTACT </li>
</section>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<script src="js/responsive.js"></script>
Here is the CSS:
.container {
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
width: 100%;
left:0;
top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
list-style-type: none;
display: inline-block;
}
.navbar li a {
margin-top: 50px;
font-family: 'Cabin', sans-serif;
font-size: 1.3em;
color: white;
font-weight: 700px;
display: inline-block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.navbar li.navbar_items a:hover {
border-bottom-style: solid;
border-bottom-color: white;
/* padding-bottom: 5px; */
}
.navbar li.icon {
display: none;
}
.div_navbar_items {
float: right;
padding-right:1%;
}
/*Start of mobile nav*/
#media screen and (max-width:875px) {
.navbar li.navbar_items {
display: none;
}
.navbar li.icon {
float: right;
display: inline-block;
position: absolute;
right: 0;
top: 19px;
}
}
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
}
.navbar.responsive li.logo {
floatL: left;
display: block;
}
.navbar.responsive .div_navbar_items {
float: none;
padding-right:0;
}
.navbar.responsive li.navbar_items {
display: block;
padding: 50px;
font-size: 25px;
}
.navbar.responsive li.navbar_items a {
display: block;
text-align: center;
}
.navbar.responsive li.navbar_items a:hover{
color:#17171e;
border-bottom-color: transparent;
}
}
/*End of mobile nav*/
And here is the JS:
function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
codepen: https://codepen.io/anon/pen/JyEoWY

I think this will get you in the right direction, then you can decide upon what you'd like to do from here. You are setting your navbar to be 100vh, which is 100% height of the screen, so you need to make sure your padding and margin on your nav elements aren't so much. Try removing any margin and padding from these two styles, then adapt it on your own from here. If you don't want to change this stuff, refer to the second part of my answer, and just make the nav scrollable.
.navbar li a {
margin-top: 0px;
}
#media screen and (max-width: 875px) {
.navbar.responsive li.navbar_items {
display: block;
padding: 0px;
font-size: 25px;
}
}
Also, if you look in .navbar styling (line 8 of your codepen) you have it set to overflow: hidden. You can update your .navbar.responsive class with overflow of scroll to get it to work.
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
overflow: scroll; // Set overflow to scroll
}
}

I guess this happenes because you make .navbar.responsive {
position:fixed;
And you just can't watch all content of block, because it's not allow to scroll. When i change this property to absolute, i looked all items of menu.
By the way, you write CSS property font-weight with px, font-weight: 700px, but it shouldn't be px, it's relative value: font-weight: 700