my navbar is disappearing even after having position sticky.
My code was working till the about section so the div container is already change but so I did the same as about section in the forwarded/next section and this time the navbar disappeared which doesn't seem correct.
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
html {
scroll-behavior: smooth;
}
/* CSS Variables */
:root {
--navbar-height: 59px;
}
#navbar {
display: flex;
align-items: right;
position: sticky;
top: 0px;
justify-content: right;
}
#navbar::before {
content: "";
background-color: rgb(15, 15, 15);
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: -1;
opacity: 1;
}
/* Navigation Bar: Logo and Image */
#logo {
margin: auto;
position: sticky;
flex-direction: row;
align-items: center;
}
#logo h1 {
color: rgb(255, 255, 255);
margin: auto;
position: sticky;
font-size: 1.8vw;
font-weight: 800;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
animation-name: loco;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#keyframes loco {
0% {
color: rgb(120, 255, 255);
}
25% {
color: rgb(85, 255, 141);
}
50% {
color: rgb(182, 255, 194);
}
75% {
color: rgb(50, 255, 203);
}
100% {
color: rgb(100, 255, 148);
}
}
/* Navigation Bar: List Styling */
#navbar ul {
display: flex;
}
#navbar ul li {
list-style: none;
font-size: 1vw;
margin: 5px 2px;
}
#navbar ul li a {
color: #ffffff;
display: block;
padding: 8px 44px;
margin: -2px 11px;
text-decoration: none;
font-weight: 900;
font-size: large;
border-radius: 0px;
transition: all 0.5s;
}
#navbar ul li a {
transition-timing-function: ease-in-out;
font-size: 1.5rem;
}
#navbar ul li a:hover {
border-radius: 20px;
color: rgb(0, 255, 136);
border-radius: 20px;
text-shadow: 0 0 10px #00ff55;
}
/* Home */
#home {
display: flex;
justify-content: left;
align-items: center;
height: 950px;
}
#home h1 {
font-family: 'Radio Canada';
font-size: 7vw;
text-align: center;
text-transform: capitalize;
color: #FFFFFF;
text-shadow: 5px 5px 4px #0047FF;
margin-left: 39px;
}
#home::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url(images/traxer-4PljbcYIzyE-unsplash\ \(1\).jpg)no-repeat center center/cover;
box-shadow: inset 529px 4px 250px 10px rgb(0, 0, 0, 90);
filter: blur(1.5px);
top: 0px;
left: 0px;
z-index: -1;
}
/*About- Section*/
#about {
display: flex;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
#about::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url(/images/closeup-golden-bitcoins-dark-reflective-surface-histogram-decreasing-crypto.jpg)no-repeat center center/cover;
box-shadow: inset 529px 4px 250px 10px rgb(0, 0, 0, 90);
filter: blur(1.5px);
top: 950px;
left: 0px;
z-index: -2;
}
#about h1 {
/* position: absolute; */
width: 798.53px;
height: 78px;
margin-top: 80px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 5vw;
line-height: 78px;
text-align: center;
color: #ffffff;
}
#about p {
/* position: absolute; */
width: 777.37px;
height: 462px;
margin-top: 113px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 100;
font-size: 2vw;
line-height: 59px;
text-align: center;
color: #ffffff;
}
#about .btn {
width: 474.93px;
/* height: 60px; */
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 2.4vw;
line-height: 59px;
text-align: center;
justify-content: center;
/* margin: -44px 152px 28px 152px;*/
}
#about .btn a {
border-radius: 9px;
color: #ffc400;
/* background:black; */
text-decoration: none;
border-radius: 10px;
text-shadow: 0px 0px 5px rgb(255, 238, 0);
padding: 5px 5px;
transition: all 1s;
}
#about .btn a:hover {
background: none;
color: rgb(0, 255, 149);
border-radius: 10px;
text-shadow: 0px 0px 10px rgb(0, 255, 149);
}
/* ---charts section */
#chart {
display: flex;
}
#chart::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url(/images/maxim-hopman-fiXLQXAhCfk-unsplash.jpg)no-repeat center center/cover;
box-shadow: inset 200px 4px 250px 10px rgb(0, 0, 0, 90);
filter: blur(1.5px);
top: 1920px;
left: 0px;
filter: brightness(0.5);
z-index: -2;
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<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=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Radio+Canada:wght#700&display=swap" rel="stylesheet">
<nav id="navbar">
<div id="logo">
<h1>All Crypto</h1>
</div>
<ul>
<li class="item"> Home</li>
<li class="item"> About</li>
<li class="item"> Chart</li>
<li class="item"> News</li>
</ul>
</nav>
<div id="home">
<h1>Crypto <br> At Your <br> Fingertips</h1>
</div>
<div id="about">
<h1>What Is CryptoCurrency</h1>
<!-- <div id="img">
<img src="/images/NFT_4.png" alt="">
</div> -->
<p>A cryptocurrency, crypto<br>currency, or crypto is a digital<br> currency designed to work as <br> a medium of exchange through<br> a computer network that is not<br> reliant on any central<br>authority.....</p>
<div class="btn">
Read More
</div>
</div>
<div id="chart">
</div>
I think you should use position:fixed instead of position:sticky. And set the width to 100% to fit the screen. Here's the code:
#navbar {
display: flex;
align-items: right;
position: fixed;
top: 0px;
width: 100%;
justify-content: right;
}
The problem is not with the #about section; it lies with the #chart section. You should have some kind of dimensions to the chart section, e.g.:
#chart {
display:flex;
height:100em;
}
Also, it doesn't look like you have much reason to be using a pseudo element for what looks like the image. I would recommend setting the background image to #chart, and not #chart::before.
Since your header doesn't seem to require a sticky position, please think about using position:fixed;.
I would like to implement an animation when the dropdown menu is triggered once clicked on the hamburger icon (only appears on mobile and tablet). By now it only appears and disappears when clicked, but I would like it to have a drop animation. Which would be the best way to do this avoiding js and just using css, if possible?
body {
background-color: #111111 !important;
font-family: 'Fredoka', sans-serif;
}
a {
color: #dad7d7;
text-decoration: none;
transition: 0.3s;
}
.botoncopyright,
.botoncopyright:hover {
color: #ccd1d1;
}
footer {
background-color: #232323;
}
.cookie-container {
background-color: #232323;
color: #dad7d7;
}
.cookie-container a {
color: #dad7d7;
}
.cookie-container a:hover {
color: #ffffff;
}
html {
scroll-behavior: smooth;
}
main {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2vw;
}
a {
color: #dad7d7;
text-decoration: none;
transition: 0.3s;
}
nav {
z-index: 1;
background-color: rgba(35, 35, 35, 0.9);
backdrop-filter: saturate(180%) blur(20px);
padding: 0 15px;
position: sticky;
top: 0;
}
.botoncopyright,
.botoncopyright:hover {
color: #ccd1d1;
text-decoration: none;
cursor: default;
}
footer {
background-color: #232323;
}
.cookie-container {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background-color: #363636;
color: #dad7d7;
text-align: center;
padding: 10px 32px;
transform: translateY(100%);
transition: transform 400ms ease-in-out;
}
.cookie-container.active {
transform: translateY(0);
}
.cookie-container p {
padding-top: 10px;
}
.cookie-container a {
text-decoration: none !important;
color: #dad7d7;
display: flex;
justify-content: center;
align-items: center;
}
.cookie-container a:hover {
color: #ffffff;
}
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 28%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}
.cookie-btn:hover {
background-color: #a6daeb;
width: 30%;
transition: 0.3s;
}
footer .btn svg {
transition: 0.3s;
}
.rsyoutube {
fill: #8b8d90;
}
.rsyoutube:hover {
fill: #ff0000;
}
.rstwitter {
fill: #8b8d90;
}
.rstwitter:hover {
fill: #00acee;
}
.rsinstagram {
fill: #8b8d90;
}
.rsinstagram:hover {
fill: #de1b85;
}
.rstelegram {
fill: #8b8d90;
}
.rstelegram:hover {
fill: #229ed9;
}
.rsdiscord {
fill: #8b8d90;
}
.rsdiscord:hover {
fill: #5865f2;
}
df-messenger {
--df-messenger-bot-message: #e1f2f7;
--df-messenger-button-titlebar-color: #add8e6;
--df-messenger-button-titlebar-font-color: #757575;
--df-messenger-chat-background-color: #232323;
--df-messenger-font-color: #232323;
--df-messenger-send-icon: #add8e6;
--df-messenger-user-message: #add8e6;
}
df-messenger:hover {
--df-messenger-button-titlebar-color: #a6daeb;
}
.content {
margin: auto;
max-width: 2200px;
width: 96vw;
}
.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
}
.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}
.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}
.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
}
.contact-wrapper > * {
padding: 1em;
}
.contact-form {
background: linear-gradient(225deg, transparent 30px, #212121 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
}
.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}
.contact-form form button {
padding: none;
width: 53%;
background: #add8e6;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 57%;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-info {
background: linear-gradient(-315deg, transparent 30px, #a7d1de 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}
.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 2em;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}
#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}
#clients img {
transition: all 0.4s ease-in-out;
}
.contact-info p {
text-align: center;
margin: 1.5rem 0 1rem 0;
color: #696969;
}
.btn:focus {
outline: none !important;
box-shadow: none !important;
}
.toggle a {
color: #dad7d7;
}
.toggle a:hover {
color: #ffffff;
}
.menu,
.submenu {
list-style-type: none;
}
.logo {
padding: 7.5px 0 7.5px 0;
}
.botonlogo {
max-width: 56px;
}
.item {
padding: 10px;
}
.item.button {
padding: 9px 5px;
}
.item:not(.button) a:hover,
.item a:hover::after {
color: #ffffff;
transition: 0.3s;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
}
.menu li a {
display: block;
padding: 15px 5px;
}
.menu li.subitem a {
padding-right: -15px;
padding-left: 15px;
padding-top: 35px;
width: 100%;
}
.toggle {
order: 1;
font-size: 20px;
}
.item.button {
order: 2;
}
.item {
order: 3;
width: 100%;
text-align: center;
display: none;
}
.active .item {
display: block;
}
.button.secondary {
border-bottom: 1px solid #dad7d7;
}
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.has-submenu>a::after {
font-family: 'Font Awesome 5 Free';
font-size: 16px;
line-height: 16px;
content: '\f024';
color: #dad7d7;
padding-left: 11px;
}
.subitem a {
padding: 10px 15px;
}
.submenu-active {
border-radius: 0;
background-color: #363636;
width: 100%;
border-radius: 5px 5px 0px 0px;
}
li.has-submenu a {
color: #dad7d7 !important;
transition: 0.3s;
padding-bottom: 12px;
cursor: pointer;
}
li.has-submenu a:hover {
color: #ffffff !important;
transition: 0.3s;
cursor: pointer;
}
li.subitem a {
padding-left: 0%;
padding-right: 53px !important;
width: 100%;
}
/* Mediaqueries tablet */
#media all and (min-width: 700px) {
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 13%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}
.cookie-btn:hover {
background-color: #a6daeb;
width: 18%;
transition: 0.3s;
}
.content {
margin-left: auto;
margin-right: auto;
max-width: 2200px;
width: 96vw;
}
.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
}
.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}
.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}
.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
}
.contact-wrapper > * {
padding: 1em;
}
.contact-form {
background: linear-gradient(225deg, transparent 30px, #212121 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
padding-top: 7.1%;
}
.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}
.contact-form form button {
padding: none;
width: 34%;
background: #add8e6;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 38%;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-info {
background: linear-gradient(-315deg, transparent 30px, #a7d1de 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}
.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 5em;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}
#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}
#clients img {
transition: all 0.4s ease-in-out;
}
.contact-info p {
text-align: center;
margin: 5rem 0 1rem 0;
width: 90%;
margin-right: auto;
margin-left: auto;
color: #696969;
}
.btn:focus {
outline: none !important;
box-shadow: none !important;
}
.menu {
justify-content: center;
width: 100%;
}
.logo {
flex: 1;
}
.item.button {
width: auto;
order: 1;
display: block;
}
.toggle {
flex: 1;
text-align: right;
order: 2;
}
.menu li.button a {
padding: 10px 15px;
margin: 5px 0;
}
.button a {
background-color: #add8e6;
color: #232323;
border: 1.5px solid #add8e6;
border-radius: 4px 4px 4px 4px;
transition: 0.8s;
}
.button.secondary {
border: 0;
}
.button.secondary a {
background-color: #add8e6;
border: 1.5px solid #add8e6;
transition: 0.8s;
}
.button a:hover {
background-color: #a6daeb;
text-decoration: none;
color: #474747;
transition: 0.8s;
}
.button:not(.secondary) a:hover {
border: 1.5px solid #a6daeb;
transition: 0.8s;
}
}
/* Mediaqueries desktop */
#media all and (min-width: 960px) {
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 10%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}
.cookie-btn:hover {
background-color: #a6daeb;
width: 11%;
transition: 0.3s;
}
.content {
margin: auto;
margin-left: auto;
margin-right: auto;
max-width: 2200px;
width: 96vw;
}
.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
display: grid;
grid-template-columns: 2fr 1fr;
}
.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}
.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}
.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
padding-top: 10%;
}
.contact-wrapper > * {
padding: 1em;
}
.contact-form {
background: linear-gradient(-315deg, transparent 45px, #212121 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
padding-top: 7%;
}
.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}
.contact-form form button {
padding: none;
width: 40%;
background: #add8e6;
border: 0;
transition: 0.2s;
border-radius: 8px;
color: #3b3b3b;
margin-bottom: 6%;
}
.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 44%;
border: 0;
transition: 0.2s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-info {
background: linear-gradient(225deg, transparent 45px, #a7d1de 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}
.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 25%;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}
#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}
#clients img {
transition: all 0.4s ease-in-out;
}
.contact-info p {
text-align: center;
margin: 2rem 0 1rem 0;
width: 86%;
margin-right: auto;
margin-left: auto;
color: #696969;
}
.item {
order: 1;
position: relative;
display: block;
width: auto;
}
.button {
order: 2;
}
.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background-color: #363636;
border-radius: 0px 0px 5px 5px;
}
.toggle {
display: none;
}
.boton {
background-color: #add8e6;
border: none;
color: #585858 !important;
}
.boton:hover {
background-color: #a6daeb;
border: none;
color: #585858 !important;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="img/favicon.ico" /><title>Mixi</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger chat-title="Mixi" agent-id="41fe496c-6e3a-4316-aa5a-05dae8cd911d" language-code="es"></df-messenger>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-229317979-1"></script>
<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-229317979-1');</script>
<script src="https://kit.fontawesome.com/d48f664aec.js" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<link rel="preload" href="css/index.css" as="style">
<link rel="stylesheet" type="text/css" href="css/index.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=Fredoka:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a class="botonlogo" href="https://www.mixi.es"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="50px" height="50px" viewBox="0 0 99 99" enable-background="new 0 0 99 99" xml:space="preserve"><path fill="#ACD7E4" d="M85.95,98.88H12.37c-6.78,0-12.28-5.5-12.28-12.28V13.02c0-6.78,5.5-12.28,12.28-12.28h73.58c6.78,0,12.28,5.5,12.28,12.28V86.6C98.23,93.38,92.73,98.88,85.95,98.88z"/><g><g><g><path fill="#1D1D1B" d="M7.96,66.3c-0.68,0-1.17-0.11-1.49-0.32s-0.53-0.5-0.64-0.85c-0.11-0.35-0.16-0.78-0.16-1.28v-21.1c0-0.46,0.05-0.86,0.16-1.2c0.11-0.34,0.33-0.59,0.67-0.77s0.84-0.27,1.52-0.27c0.78,0,1.34,0.15,1.68,0.45c0.34,0.3,0.51,0.83,0.51,1.57l-0.21,2.29c0.25-0.53,0.62-1.07,1.12-1.6c0.5-0.53,1.09-1.01,1.79-1.44c0.69-0.43,1.43-0.76,2.21-1.01c0.78-0.25,1.58-0.37,2.4-0.37c1.24,0,2.35,0.22,3.33,0.67c0.98,0.44,1.86,1.07,2.64,1.89c0.78,0.82,1.44,1.83,1.97,3.04c0.71-1.17,1.46-2.17,2.26-3.01c0.8-0.83,1.71-1.47,2.72-1.92c1.01-0.44,2.16-0.67,3.44-0.67c2.06,0,3.77,0.51,5.14,1.52c1.37,1.01,2.4,2.43,3.09,4.26c0.69,1.83,1.04,4.02,1.04,6.58v11.13c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.32,0.63-0.64,0.83s-0.83,0.29-1.54,0.29c-0.67,0-1.19-0.11-1.54-0.32c-0.36-0.21-0.58-0.5-0.67-0.85c-0.09-0.35-0.13-0.78-0.13-1.28V52.72c0-1.56-0.2-2.93-0.59-4.1c-0.39-1.17-0.96-2.08-1.71-2.72c-0.75-0.64-1.72-0.96-2.93-0.96c-1.28,0-2.41,0.32-3.38,0.96c-0.98,0.64-1.73,1.54-2.26,2.69s-0.8,2.53-0.8,4.13v11.24c0,0.53-0.11,1-0.32,1.39c-0.21,0.39-0.53,0.67-0.96,0.83c-0.43,0.16-0.96,0.19-1.6,0.08c-0.53-0.04-0.94-0.17-1.23-0.4s-0.46-0.51-0.53-0.85c-0.07-0.34-0.11-0.72-0.11-1.15V52.72c0-1.56-0.19-2.93-0.56-4.1s-0.94-2.08-1.71-2.72c-0.76-0.64-1.75-0.96-2.96-0.96c-1.28,0-2.41,0.33-3.38,0.99c-0.98,0.66-1.73,1.57-2.26,2.74c-0.53,1.17-0.8,2.52-0.8,4.05v11.19c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.63-0.67,0.83C9.2,66.2,8.67,66.3,7.96,66.3z"/><path fill="#1D1D1B" d="M52.23,34.12c-0.78,0-1.37-0.12-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.46c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.2,1-0.29,1.78-0.29c0.75,0,1.31,0.11,1.71,0.32s0.65,0.53,0.77,0.96c0.12,0.43,0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C53.6,34.02,53.01,34.12,52.23,34.12z M52.23,66.3c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V42.86c0-0.46,0.05-0.88,0.16-1.25s0.33-0.65,0.67-0.83c0.34-0.18,0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85c0.11,0.37,0.16,0.81,0.16,1.3v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C53.42,66.21,52.91,66.3,52.23,66.3z"/></g></g><g><path fill="#1D1D1B" d="M65.03,57.61l-4.59,5c-0.52,0.57-0.88,1.05-1.08,1.43c-0.2,0.39-0.2,0.75,0,1.09c0.2,0.34,0.56,0.7,1.08,1.09c0.52,0.35,0.97,0.59,1.35,0.72c0.38,0.12,0.77,0.08,1.17-0.13c0.4-0.21,0.86-0.58,1.38-1.12l7.42-8.08H65.03z"/><path fill="#1D1D1B" d="M84.36,64.04c-0.18-0.39-0.55-0.87-1.11-1.43l-8.04-8.76l8.1-8.83c0.56-0.57,0.92-1.05,1.08-1.43c0.16-0.39,0.14-0.75-0.06-1.09c-0.2-0.34-0.58-0.72-1.14-1.14c-0.76-0.57-1.38-0.81-1.86-0.72c-0.48,0.09-1.12,0.52-1.92,1.3l-7.56,8.24l-7.56-8.24c-0.48-0.53-0.9-0.9-1.26-1.12c-0.36-0.21-0.73-0.27-1.11-0.16c-0.38,0.11-0.83,0.34-1.35,0.69c-0.6,0.39-1,0.75-1.2,1.09c-0.2,0.34-0.21,0.71-0.03,1.12c0.18,0.41,0.53,0.89,1.05,1.46l8.1,8.83l-0.01,0.01l3.37,3.67l0.01-0.01l7.5,8.18c0.56,0.53,1.04,0.9,1.44,1.12c0.4,0.21,0.79,0.26,1.17,0.13c0.38-0.12,0.81-0.36,1.29-0.72c0.56-0.39,0.93-0.75,1.11-1.09C84.54,64.79,84.54,64.43,84.36,64.04z"/></g><g><g><path fill="#1D1D1B" d="M90.03,34.55c-0.78,0-1.37-0.11-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.47c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.19,1-0.29,1.79-0.29c0.75,0,1.31,0.11,1.7,0.32c0.39,0.21,0.65,0.53,0.77,0.96s0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C91.4,34.44,90.81,34.55,90.03,34.55z M90.03,66.72c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V43.28c0-0.46,0.05-0.88,0.16-1.25c0.11-0.37,0.33-0.65,0.67-0.83s0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85s0.16,0.81,0.16,1.31v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C91.21,66.63,90.71,66.72,90.03,66.72z"/></g></g></g></svg></a></li>
<li class="item">Tienda</li>
<li class="item">Calculadora</li>
<li class="item">Noticias</li>
<li class="item">Contacto</li>
<li class="item has-submenu">
<a tabindex="0">Idioma: ES</a>
<ul class="submenu">
<li class="subitem">English</li>
</ul>
</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
<script src="js/toggle.js"></script>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="js/utilidades.js"></script>
<footer class="text-center text-white">
<div class="text-center text-dark p-3" style="background-color: rgba(0, 0, 0, 0.2);">
<a class="botoncopyright">Mixi © | 2022</a>
</div>
</footer>
<script src="js/toggle.js"></script>
</body>
</html>
Have you tried to add transition to the nav?
If not try
Nav{transition:easy-in-out all 0.5s}
While developing my website I have came across a problem with my footer and form. My footer seems to be appearing through the form on devices but not on the computer and I'm sure this could be issues with widths of devices? So I kept trying to fix it and still haven't been able to fix it. I'm still learning as I go along and I would be grateful if someone could help me get rolling with my website again. code snippets and images below, kindest regards, Caelan.
body {
background-color: black ;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3{
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a{
text-decoration: none;
}
.gallery{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content{
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: .4s;
background-color: whitesmoke;
}
.content:hover{
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: .6s;
}
.productcard-image{
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p{
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6{
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card{
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list{
padding: 5px;
}
.fa{
color: #ff9f43;
font-size: 26px;
transition: .4s;
}
.fa:hover{
transform: scale(1.3);
transition: .6s;
}
.productcardbutton{
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border:0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1{
background-color: #2183a2;
}
.buy-2{
background-color: #3b3e6e;
}
.buy-3{
background-color: #0b0b0b;
}
#media(max-width: 1000px){
.content{
width: 46%;
}
}
#media(max-width: 750px){
.content{
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-bottom: -60vh;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type=submit]{
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type=submit]:hover{
background: rgb(19, 41, 238);
}
#media screen and (max-width:600px) {
.form1{
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this
christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br>
<form action="">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="text" name="name" id="name" placeholder=" Enter your name">
<textarea name="message" id="message" cols="30" rows="10" placeholder="Enter your message here"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<p class="website__rights">© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved</p>
<div class="social__icons">
</div>
</div>
</section>
</div>
</body>
</html>
I've adjusted the css to remove the height and margin on the containers:
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</section>
</div>
</body>
</html>
I'm using margins for my form but when I am testing the responsive layout the distance between the navigation bar increases if the screen width is a greater size. Therefore, I have also tried auto height but it still has a big gap between the navigation bar and the form.
I have also tried #media screen.
I had help yesterday with a similar problem to this, but now I'm encountering another one as its not with the footer but with the form itself.
I would kindly like to ask for help, and if you find a solution explain the changes so I can also learn from it! Kindest regards, Caelan : ).
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-top: -200px;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
margin-top:-250px;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
</div>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</[![section][1]][1]>
</div>
</body>
</html>
I analyzed your code. You have just to remove the height: 100vh from your .container.
The next step is to remove the margin-top: -250px from your .form1. then it should look good.
Bonus Tip: the unit vh stands for viewport-height (browser height). so 100vh is 100% of the viewport height.