How to make a scrollable footer appear over a fixed content?

How to make a scrollable footer appear over a fixed content? - html

I have a website in which I have two buttons fixed in the bottom of my page like this:
And I have another div that is in the <footer> tag. So it looks like this:
<body>
...
<div class="fixed-to-bottom">
<input type="button" class="button1-in-bottom fixed-bottom" />
<input type="button" class="button2-in-bottom fixed-bottom" />
</div>
<footer>
<input type="button" class="button-in-footer" />
</footer>
</body>
This is the css that makes button1-in-bottomand button2-in-bottom be fixed at bottom:
.fixed-bottom {
position: fixed;
bottom: 0px;
z-index: 2;
left: 0;
}
When I scroll down (so I go to the bottom of the page) I want the bottom located in the footer be over the other two buttons like this:
But I don't find a way of how to do this. Can anybody help me find a solution to this problem? Thanks!
My snippet example:
body {
background-color: #cdcdcd;
}
.fixed-bottom-xs {
position: absolute;
bottom: 0;
z-index: 2;
left: 0;
}
.w-100 {
width: 100%;
}
#select-passengers {
margin-bottom: -1px!important;
}
.passengers-summary {
cursor: pointer;
background-color: white;
padding: 15px 15px 13px 15px;
position: relative;
}
.passengers-summary__label {
font-weight: bold;
display: inline-block;
vertical-align: middle;
margin-right: 25px;
}
.passengers-summary__passengers {
display: inline-block;
vertical-align: middle;
}
.passengers-summary__passenger {
display: inline-block;
color: #4D4D4D;
font-weight: bold;
margin-right: 5px;
}
.passengers-summary__passenger--adult:before {
content: "\e916";
}
.passengers-summary__passenger:before {
font-size: 22px;
color: #02A39C;
margin-right: 3px;
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.btn {
background-color: #FFA745;
display: inline-block;
width: auto;
padding: 16px 12px 15px;
font-family: "Montserrat", sans-serif, "Verdana";
font-weight: bold;
font-size: 16px;
line-height: 19px;
text-align: center;
color: #fff;
border-radius: 8px;
text-decoration: none;
border: none;
}
.btn--no-radius {
border-radius: 0;
}
.btn--block {
display: block;
width: 100%;
}
.footer__container {
background-color: #F0F0F0;
padding: 15px 0;
width: 100%;
position: fixed;
bottom: 0;
}
#media only screen and (min-width: 0px)
.container {
width: 100%;
}
.container {
margin: 0 auto;
padding: 0 10px;
}
.footer {
display: -webkit-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-justify-content: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
}
<body>
<div class="fixed-bottom-xs w-100 mobile-only" >
<div class="w-100 mobile-only cta-bottom">
<div class="passengers-summary" data-show="#passengers_layer" id="select-passengers">
<div class="passengers-summary__content">
<span class="passengers-summary__label">Passengers</span>
<div class="passengers-summary__passengers">
<div class="passengers-summary__passenger--adult passengers-summary__passenger">x1</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn--block btn--no-radius">Continue</button>
</div>
<footer class="footer__container">
<div class="container">
<div class="footer">
<div class="footer__links">
<p class="footer__link" data-modal-open="modal-legal">Aviso legal, política de privacidad y cookies</p>
</div>
</div>
</div>
</footer>
</body>
As you can see, the footer is behind the bottom buttons. But when I scroll down, I want the button-in-footer appear over the button1-in-bottom. Any idea on how I can achieve that?

You can set bottom value of .fixed-bottom-xs div equal to height of footer so that they are not overlapping each other
body {
background-color: #cdcdcd;
}
.fixed-bottom-xs {
position: absolute;
bottom: 80px; /* set value equal to height of footer*/
z-index: 2;
left: 0;
}
.w-100 {
width: 100%;
}
#select-passengers {
margin-bottom: -1px!important;
}
.passengers-summary {
cursor: pointer;
background-color: white;
padding: 15px 15px 13px 15px;
position: relative;
}
.passengers-summary__label {
font-weight: bold;
display: inline-block;
vertical-align: middle;
margin-right: 25px;
}
.passengers-summary__passengers {
display: inline-block;
vertical-align: middle;
}
.passengers-summary__passenger {
display: inline-block;
color: #4D4D4D;
font-weight: bold;
margin-right: 5px;
}
.passengers-summary__passenger--adult:before {
content: "\e916";
}
.passengers-summary__passenger:before {
font-size: 22px;
color: #02A39C;
margin-right: 3px;
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.btn {
background-color: #FFA745;
display: inline-block;
width: auto;
padding: 16px 12px 15px;
font-family: "Montserrat", sans-serif, "Verdana";
font-weight: bold;
font-size: 16px;
line-height: 19px;
text-align: center;
color: #fff;
border-radius: 8px;
text-decoration: none;
border: none;
}
.btn--no-radius {
border-radius: 0;
}
.btn--block {
display: block;
width: 100%;
}
.footer__container {
background-color: #F0F0F0;
padding: 15px 0;
width: 100%;
position: fixed;
bottom: 0;
}
#media only screen and (min-width: 0px)
.container {
width: 100%;
}
.container {
margin: 0 auto;
padding: 0 10px;
}
.footer {
display: -webkit-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-justify-content: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
}
<body>
<div class="fixed-bottom-xs w-100 mobile-only" >
<div class="w-100 mobile-only cta-bottom">
<div class="passengers-summary" data-show="#passengers_layer" id="select-passengers">
<div class="passengers-summary__content">
<span class="passengers-summary__label">Passengers</span>
<div class="passengers-summary__passengers">
<div class="passengers-summary__passenger--adult passengers-summary__passenger">x1</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn--block btn--no-radius">Continue</button>
</div>
<footer class="footer__container">
<div class="container">
<div class="footer">
<div class="footer__links">
<p class="footer__link" data-modal-open="modal-legal">Aviso legal, política de privacidad y cookies</p>
</div>
</div>
</div>
</footer>
</body>

You should give your footer a fixed position and z-index higher than the the div or the buttons,like below :
.fixed-to-bottom {
position: fixed;
bottom: 0px;
z-index: 2;
left: 0;
}
.button-in-footer
{
position:fixed;
bottom:0;
z-index:3;
}
<body>
<div class="fixed-to-bottom">
<input type="button" class="button1-in-bottom fixed-bottom" value="button 1" />
<input type="button" class="button1-in-bottom fixed-bottom" value="button 2" />
</div>
<footer>
<input type="button" class="button-in-footer" value="your footer over" />
</footer>
</body>

Related

How do I make my website display properly and get my navbar to display under the logo on smaller screens? Currently shows fine on desktops

So I'm still new to web developing and currently working on a restaurant site but when I view the page on smaller screens it's not displaying properly (not show full width) and the navbar is completely gone. How can I get this to properly show on smaller screens and the navbar to either become a togglebar or display under the logo? I think my current CSS setting might be to blame. Thanks
I have tried optimising with CSS and see if it can show the full page on smaller screens and have been able to achieve that for iPad Air and bigger screens but still no luck on smaller ones.
Happy to share my code if needed
HTML
<body>
<p class="catering">*Catering services available for hire</p>
<header>
<img class="shop-logo w-55" src="/FBS LOGO.png">
<nav class="navbar navbar-default">
<div class="hover-underline-animation"> Menu </div>
<div class="hover-underline-animation">Order</div>
<div class="hover-underline-animation">Location </div>
<div class="hover-underline-animation">Contact</div>
</nav>
</header>
<section class="about" id="about">
<div class="row">
<div class="image">
<img src="FBS_ISLAND GIRL_.png" alt="">
</div>
<div class="content">
<h3>
<span class="line-1"> "Authentic </span> <span class="line-2"> <br> Caribbean </span> <span class="line-3"><br> Cuisine" </span>
<span class="line-4"><br> jus lik momma use tah mek it </span>
</h3>
</div>
</div>
<p class="share"> Like, Follow `n Share <br> <i class="fa-brands fa-instagram"> </i> FOOD_BY_SOPHIE </i> </p>
</section>
<section class="order" id="order">
<h3 class="sub-heading">
Order Now
</h3>
<h1 class="heading">
Collection Only
</h1>
<form action="https://formsubmit.co/a5f5a32519da94e6ed9ceef9fd5cf8af" class="form-alert" method="POST">
<!- Honeypot -->
<input type="text" name="_honey" style="display: none;">
<!- Disaple Captcha -->
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="https://sprightly-meerkat-b47b9e.netlify.app/">
<div class="inputBox">
<div class="input">
<span>
Your name
</span>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div class="input">
<span>
Your number
</span>
<input type="number" name="number" placeholder="Enter your number">
</div>
</div>
<div class="inputBox">
<div class="input">
<span>
Your order
</span>
<input type="text" name="order" placeholder="Enter your order">
</div>
<div class="input">
<span>
Additional orders
</span>
<input type="text" name="extras" placeholder="Extras">
</div>
</div>
<div class="inputBox">
<div class="input">
<span>
How much
</span>
<input type="number" name="amount" placeholder="How many orders">
</div>
<div class="input">
<span>
Collection date & time
</span>
<input type="datetime-local" name="time">
</div>
</div>
<div class="inputBox">
<div class="input">
<span>
Your message
</span>
<textarea name="message" placeholder="Enter your message" id="" cols="30" rows="10"></textarea>
</div>
</div>
<input type="submit" value="Order now" class="btn btn-dark">
</form>
</section>
CSS
#import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital#1&family=Nunito:wght#200;300;400;600;700&display=swap');
:root{
--green:#27ae60;
--black:#192a56;
--light-color:#666;
--box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
text-transform: capitalize;
transition: all .2s linear;
}
html {
font-size: 62%;
scroll-padding-top: 5.5rem;
scroll-behavior: smooth;
}
.loader-container {
position:fixed;
top: 0; left: 0;
height: 100%;
width: 100%;
z-index: 10000;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.loader-container img{
width: 35rem;
}
.loader-container.fade-out{
top: 110%;
opacity: 0;
}
header {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #a8b98a;
display: flex;
align-items: center;
justify-content: center;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: white;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: white;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
header .navbar a{
font-size: 40px;
border-radius: .5rem;
padding: .5rem 1.5rem;
color: white;
text-decoration: none;
font-family: 'Hi Melody', cursive;
}
.navbar a:hover {
font-size:88px;
font-size-adjust: 20px;
}
img.shop-logo {
width: 650px;
border-radius: 50%;
margin-bottom: -0px;
border: 10px;
margin-top: 0;
}
body {
background: #a8b98a;
}
.about .row{
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
}
.about {
background: #fbe7d7;
padding-right: 10px;
padding: 20rem 9% 40rem 0rem;
}
.about .row .image {
flex: 1 1 45rem;
position: absolute;
display: block;
}
.about .row .image img{
max-width: 1250px;
max-height: inherit;
height: inherit;
width: inherit;
padding-top: 100px;
}
.about .row .content {
flex: 1 1 45rem;
}
.about h3{
text-align: end;
}
.about .row .content p{
color: #aa401b;
font-size: 45px;
text-align: center;
font-family: 'Hi Melody', cursive;
font-weight: bolder;
}
.line-1 {
margin-right: 80px;
padding-left: 0px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 100px;
line-height: 0;
}
.line-2 {
margin-left: 5px;
padding-left: 150px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;font-family: 'Hi Melody', cursive;
font-size: 100px;
line-height: 1;
}
.line-3 {
margin-left: 5px;
padding-left: 100px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 100px;
line-height: 1;
}
.line-4{
margin-left: 5px;
padding-left: 100px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 40px;
line-height: 1;
}
.share {
color: #d45a28;
font-weight: bolder;
font-size: 20px;
float:right;
padding-top: 80px;
text-decoration: none;
font-family: 'Hi Melody', cursive;
padding-top: 250px;
}
.share a {
color: #d45a28;
text-decoration: none;
font-weight: bolder;
}
.sub-heading {
color: black;
text-align: center;
margin-top: 30px;
padding-top: 20px;
}
.heading {
color: black;
text-align: center;
}
.order form {
max-width: 90rem;
border-radius: .5rem;
box-shadow: var(--box-shadow);
border: .1rem solid rgba(0,0,0,.2);
background: #fff;
padding: 1.5rem;
margin: 0 auto;
}
.order form .inputBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.order form .inputBox .input {
width: 49%;
}
.order form .inputBox .input span{
display: block;
padding: .5rem 0;
font-size: 1.5rem;
color: var(--light-color);
}
.order form .inputBox .input input,
.order form .inputBox .input textarea{
background: #eee;
border-radius: .5rem;
padding: 1rem;
font-size: 1.6rem;
color: var(--black);
text-transform: none;
margin-bottom: 1rem;
width: 100%;
}
.order form .inputBox .input input:focus,
.order form .inputBox .input textarea:focus{
border: 1rem solid var(--green);
}
.order form .inputBox .input textarea{
height: 20rem;
resize: none;
}
.order form .btn {
margin-top: 0;
}
.order {
padding-bottom: 20px;
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 1.5rem;
text-align: center;
}
.footer .box-container .box{
padding: 5rem 0;
font-size: 2.5rem;
color: var(--black);
}
.footer .box-container a{
display: block;
padding: 5rem 0;
font-size: 1.5rem;
color: var(--light-color);
text-decoration: none;
}
.footer .box-container a:hover{
color: black;
text-decoration: none;
}
.footer .credit {
text-align: center;
border-top: .1rem solid rgba(0,0,0,.1);
font-size: 2rem;
color: var(--black);
padding: .5rem;
padding-top: 1.5rem;
margin-top: 1.5rem;
}
.footer .credit span {
color: black;
}
.footer {
background: #fbe7d7;
}
\\\\ Order CSS \\\\\
.order .sub-heading {
color: white;
}
.order .heading {
color: white;
}
.catering {
color: #d45a28;
text-align: right;
font-size: 20px;
padding-top: 40px;
padding-right: 10px;
font-weight: bold;
font-family: 'Times New Roman';
}
#media (max-width:991px){
html {
font-size: 55%;
}
header{
padding: 1rem 2rem;
}
section{
padding: 2rem;
}
}
#media (max-width:850px){
.about {
display: block;
text-align: center;
padding-bottom: 900px;
}
.content {
text-align: end;
}
.catering {
text-align: center;
}
p .share {
text-align: center;
}
.about .row .image img {
display: block;
position:absolute;
padding-top: 150px;
justify-content: center;
height: auto;
margin-right: 10px;
}
.share{
padding-left: 5000px;
}
}
#media (max-width:800px){
header .icon #menu-bars{
display: inline-block;
}
header .navbar {
position: absolute;
top: 100%; left: 0; right: 0;
background: #a8b98a;
border-top: .1rem solid rgba(0,0,0,.2);
border-bottom: .1rem solid rgba(0,0,0,.2);
padding: 1rem;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
header .navbar a{
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 2rem;
background: #eee;
}
.image {
display: block;
text-align: center;
}
.about .row .image img{
height: auto;
width: 40%;
margin-left: 200px;
}
.home .home-slider .slide .content h3{
font-size: 5rem;
}
.about h3{
text-align:center;
font-size: 2rem;
}
}
#media (max-width:400px){
html {
font-size: 50%;
}
.dishes .box-container .box img {
height: auto;
width: 100%;
}
.order form .inputBox .input {
width: 100%;
}
.about {
display: block;
text-align: center;
}
.content {
text-align: end;
}
.catering {
text-align: center;
}
p .share {
text-align: center;
}
.about .row .image img {
display: block;
position:absolute;
padding: 200px 0 200px 0;
justify-content: center;
height: auto;
margin-right: 1000px;
}
}

Please check this https://www.w3schools.com/css/css3_mediaqueries.asp for learning CSS responsiveness and media queries.
Also check this one please: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Angular Component Content Overflows over header

I am using Angular and trying to create a proper header. My content is overlapping on header as I scroll. When I tried to keep div-container class position as fixed still it gets distorted. I am trying to understand how can I keep header fixed so that the content does not overlap on header. The header code and app.component.html is as follows:
<div class="div-container">
<div class="frame">
<div class="frame-logo">
<img src="assets/Images/image21.svg" alt="image" class="image21" />
</div>
</div>
<span class="text203 body1Default">
<span class="text204">ML Platform</span>
</span>
</div>
CSS is:
.div-container {
min-height: 7vh;
}
.frame {
top: 0px;
left: 24px;
width: 688px;
display: flex;
position: absolute;
box-sizing: border-box;
align-items: center;
border-color: transparent;
}
.frame-logo {
margin: 0 64px 0 0;
display: flex;
padding: 8px;
position: relative;
box-sizing: border-box;
align-items: flex-start;
flex-shrink: 1;
border-color: transparent;
border-radius: 2px;
flex-direction: column;
background-color: var(--dl-color-white-whiteffffff60463);
}
.text203 {
top: 10px;
left: 78px;
color: var(--dl-color-blue-blue600dellblue0672cb347f1);
height: auto;
position: absolute;
align-self: auto;
text-align: left;
line-height: 36px;
text-decoration: none;
}
.text204 {
color: rgba(6, 114, 203, 1);
height: auto;
align-self: auto;
font-style: normal;
text-align: left;
font-weight: 300px;
font-stretch: normal;
text-decoration: none;
}
.body1Default {
font-size: 24px;
font-style: normal;
font-family: Roboto;
font-weight: 300px;
font-stretch: normal;
}
.image21 {
width: 201px;
height: 40px;
position: relative;
object-fit: cover;
border-color: transparent;
}
app.component.html
<app-header></app-header>
<div>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>

Flexbox Form not covering entire site

It happens that my "form" has 3 divs "(.contact-in)" which i call them with ":nth-child" in my css and with flex i do control their percentage on the site but in x-axis. So my question is how can i control their % in y-axis because they aren't covering the entire site and for example my footer isn't going all the way down because i'm not covering the entire page with the content.
Postscript: The site layout is with css grid.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/contact.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>TRV ECOLOGICO SRL</title>
</head>
<body>
<div class="contenedor">
<nav class="contenedor-nav">
<div class="menu-navegacion">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
<div class="contenedor-texto">
<div class="textotriangulo"><h2>TRV ECOLOGICO SRL</h2></div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=index.html>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=contact.html>CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<div class="contenedor-form">
<div class="contact-wrap">
<div class="contact-in">
<h1>Información de Contacto</h1>
<h2><i class="fa fa-phone" aria-hidden="true"></i>Teléfono</h2>
<p>123 - 4567 - 8901</p>
<p>011 - 1234 - 5678</p>
<h2><i class="fa fa-envelope" aria-hidden="true"></i>Email</h2>
<p>asd#asdfgh.com.ar</p>
<p>asd#asdfgh.com.ar</p>
<h2><i class="fa fa-map-marker" aria-hidden="true"></i>Dirección</h2>
<p>Morón, Buenos Aires, Argentina</p>
</div>
<div class="contact-in">
<h1>Contacto</h1>
<form>
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<textarea placeholder="Mensaje" class="contact-in-textarea"></textarea>
<input type="submit" value="SUBMIT" class="contact-in-btn">
</form>
</div>
<div class="contact-in">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52502.855079198634!2d-58.65170330080583!3d-34.6691347508206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc76f57e3be01%3A0xa488fcdcec5b600f!2sMor%C3%B3n%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1618120836940!5m2!1ses!2sar" width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<footer class="contenedor-footer">
<div id="footer">
<p>TRV ECOLOGICO SRL - Todos los derechos reservados</p>
</div>
</footer>
</div>
</body>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background: #fff;
}
/*GRID CONTENEDOR*/
.contenedor{
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.contenedor .contenedor-nav{
grid-column-start: 1;
grid-column-end: 4;
}
.contenedor .contenedor-form{
grid-column: span 2;
}
.contenedor .contenedor-footer{
grid-column-start: 1;
grid-column-end: 4;
}
/* MENU NAVEGACION*/
nav{
position: sticky;
top: 0;
z-index: 30;
}
.menu-navegacion{
width: 100%;
margin: auto;
overflow: hidden;
padding: 0;
display: flex;
height: 80px;
justify-content: space-between;
align-items: center;
background-color: rgb(54, 54, 54);
}
.logo{
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo{
height: 100%;
position: absolute;
}
.triangulo{
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.contenedor-texto{
display: flex;
align-items: center;
justify-content:center;
height: 50px;
width: 100%;
}
.textotriangulo{
position: absolute;
font-weight: 700;
color: rgb(255, 255, 255);
font-size: 1em;
text-shadow: 3px 2px 1px rgba(54, 54, 54, 0.493);
}
.menu-lista{
margin-right: 20%;
}
.menu-lista ul li{
list-style: none;
display: inline-block;
}
.menu-lista ul li a{
text-decoration: none;
color: white;
padding-left: 20px;
}
/* FORM */
.contact-wrap{
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.contact-in{
padding: 40px 30px;
}
.contact-in:nth-child(1){
flex: 30%;
background: url(../images-form/1.jpg);
color: #fff;
}
.contact-in:nth-child(2){
flex: 45%;
background: #c31432;
}
.contact-in:nth-child(3){
flex: 25%;
padding: 0;
}
.contact-in h1{
font-size: 24px;
color: #fff;
text-transform: uppercase;
font-weight: 500;
}
.contact-in h2{
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
}
.contact-in h2 i{
font-size: 16px;
width: 40px;
height: 40px;
margin-right: 10px;
background: #f5f5f5;
color: #000;
border-radius: 50px;
line-height: 40px;
text-align: center;
}
.contact-in p{
font-size: 14px;
font-weight: 300;
margin-bottom: 20px;
}
.contact-in form{
width: 100%;
height: auto;
}
.contact-in-input{
width: 100%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
}
.contact-in-textarea{
width: 100%;
height: 140px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-top: 5px;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
}
.contact-in-btn{
width: 100%;
height: 40px;
border: 1px solid #fff;
outline: none;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
cursor: pointer;
}
.contact-in iframe{
width: 100%;
height: 100%;
}
#media only screen and (max-width:480px){
.contact-in:nth-child(1){
flex: 50%;
}
.contact-in:nth-child(2){
flex: 50%;
}
.contact-in:nth-child(3){
flex: 100%;
}
}
#media only screen and (max-width:360px){
.contact-in:nth-child(1){
flex: 50%;
}
.contact-in:nth-child(2){
flex: 50%;
}
.contact-in:nth-child(3){
flex: 100%;
}
}
/* FOOTER */
#footer{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(54, 54, 54);
height: 80px;
width: 100%;
}
#footer p{
color: white;
font-weight: 400;
font-family: 'Ubuntu', sans-serif;
padding: 5px;
border-bottom: solid white 1px;
}

First make the height of html and body to 100%.
html, body{
height: 100%;
}
If you want to make the footer height is to be 80px, then make it in contenedor class
.contenedor{
...
grid-template-rows: repeat(2, auto) 80px;
}
Why to make height internally 80px when you can control it with grid using grid-template-rows.
#footer{
...
height: 80px; // Should be avoided as per your design
... // instead add height for whole footer in grid-tempate-rows
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: 'Poppins', sans-serif;
background: #fff;
}
/*GRID CONTENEDOR*/
.contenedor {
height: 100%;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto) 80px;
}
.contenedor .contenedor-nav {
grid-column-start: 1;
grid-column-end: 4;
}
.contenedor .contenedor-form {
grid-column: span 2;
}
.contenedor .contenedor-footer {
grid-column-start: 1;
grid-column-end: 4;
}
/* MENU NAVEGACION*/
nav {
position: sticky;
top: 0;
z-index: 30;
}
.menu-navegacion {
width: 100%;
margin: auto;
overflow: hidden;
padding: 0;
display: flex;
height: 80px;
justify-content: space-between;
align-items: center;
background-color: rgb(54, 54, 54);
}
.logo {
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo {
height: 100%;
position: absolute;
}
.triangulo {
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.contenedor-texto {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
}
.textotriangulo {
position: absolute;
font-weight: 700;
color: rgb(255, 255, 255);
font-size: 1em;
text-shadow: 3px 2px 1px rgba(54, 54, 54, 0.493);
}
.menu-lista {
margin-right: 20%;
}
.menu-lista ul li {
list-style: none;
display: inline-block;
}
.menu-lista ul li a {
text-decoration: none;
color: white;
padding-left: 20px;
}
/* FORM */
.contact-wrap {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.contact-in {
padding: 40px 30px;
}
.contact-in:nth-child(1) {
flex: 30%;
background: url(../images-form/1.jpg);
color: #fff;
}
.contact-in:nth-child(2) {
flex: 45%;
background: #c31432;
}
.contact-in:nth-child(3) {
flex: 25%;
padding: 0;
}
.contact-in h1 {
font-size: 24px;
color: #fff;
text-transform: uppercase;
font-weight: 500;
}
.contact-in h2 {
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
}
.contact-in h2 i {
font-size: 16px;
width: 40px;
height: 40px;
margin-right: 10px;
background: #f5f5f5;
color: #000;
border-radius: 50px;
line-height: 40px;
text-align: center;
}
.contact-in p {
font-size: 14px;
font-weight: 300;
margin-bottom: 20px;
}
.contact-in form {
width: 100%;
height: auto;
}
.contact-in-input {
width: 100%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
.contact-in-textarea {
width: 100%;
height: 140px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-top: 5px;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
.contact-in-btn {
width: 100%;
height: 40px;
border: 1px solid #fff;
outline: none;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
cursor: pointer;
}
.contact-in iframe {
width: 100%;
height: 100%;
}
#media only screen and (max-width:480px) {
.contact-in:nth-child(1) {
flex: 50%;
}
.contact-in:nth-child(2) {
flex: 50%;
}
.contact-in:nth-child(3) {
flex: 100%;
}
}
#media only screen and (max-width:360px) {
.contact-in:nth-child(1) {
flex: 50%;
}
.contact-in:nth-child(2) {
flex: 50%;
}
.contact-in:nth-child(3) {
flex: 100%;
}
}
/* FOOTER */
#footer {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(54, 54, 54);
height: 80px;
width: 100%;
}
#footer p {
color: white;
font-weight: 400;
font-family: 'Ubuntu', sans-serif;
padding: 5px;
border-bottom: solid white 1px;
}
<div class="contenedor">
<nav class="contenedor-nav">
<div class="menu-navegacion">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
<div class="contenedor-texto">
<div class="textotriangulo">
<h2>TRV ECOLOGICO SRL</h2>
</div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=index.html>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=contact.html>CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<div class="contenedor-form">
<div class="contact-wrap">
<div class="contact-in">
<h1>Información de Contacto</h1>
<h2><i class="fa fa-phone" aria-hidden="true"></i>Teléfono</h2>
<p>123 - 4567 - 8901</p>
<p>011 - 1234 - 5678</p>
<h2><i class="fa fa-envelope" aria-hidden="true"></i>Email</h2>
<p>asd#asdfgh.com.ar</p>
<p>asd#asdfgh.com.ar</p>
<h2><i class="fa fa-map-marker" aria-hidden="true"></i>Dirección</h2>
<p>Morón, Buenos Aires, Argentina</p>
</div>
<div class="contact-in">
<h1>Contacto</h1>
<form>
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<textarea placeholder="Mensaje" class="contact-in-textarea"></textarea>
<input type="submit" value="SUBMIT" class="contact-in-btn">
</form>
</div>
<div class="contact-in">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52502.855079198634!2d-58.65170330080583!3d-34.6691347508206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc76f57e3be01%3A0xa488fcdcec5b600f!2sMor%C3%B3n%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1618120836940!5m2!1ses!2sar"
width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<footer class="contenedor-footer">
<div id="footer">
<p>TRV ECOLOGICO SRL - Todos los derechos reservados</p>
</div>
</footer>
</div>

Site doesn't fit the viewport

I am running into some issues with resizing of the window (shrinking). When I shrink it down, the background colors no longer stay at the edge of the viewport, and content goes beyond it.
I thought that setting the width on the entire body to 100% would fix that, but it didn't?
Here is a JSFiddle of my current code, for the index page and the stylesheet:
* {
margin: 0;
padding: 0;
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
width: 100%;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px 60px 60px 60px;
}
.buttons {
position: relative;
width: 1600px;
margin-right: 25px;
justify-content: space-around;
display: flex;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
I have tried going through my stylesheet, changing the widths on anything I have set with pixels to percentages, but it didn't seem to fix it. The only thing that -sort of- worked was changing the body position to fixed, but then none of the content was view-able if it got shrunk down, all it fixed was keeping the background/header/footer colors the same.
I imagine maybe my coding is a bit messy - I tried my best to be extensible, but being 100% new at this made it difficult.

Your problem is that you have width:1600px in .buttons just remove it and also add box-sizing:border-box to all (pseudo-)elements
EDIT:
you also need to add max-width:100% to .container and flex-wrap:wrap in .buttons
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.container {
max-width: 100%
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px;
}
.buttons {
position: relative;
margin-right: 25px;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>

I have made it proper as you needed. And it's working for me.
Please add below css
.container, .buttons {
max-width: 100%;
}

How do I left align text in a menu and keep the text visible?

I want to left align text in a drop-down menu but I'm having some problems. I have this HTML
<nav>
<a>Vote</a>
<a>Search</a>
<a>About</a>
</nav>
and this CSS for the drop down menu
nav {
display: none;
width: 30rem;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: left;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 1.2rem;
color: #000;
}
But as you can see, when you click the menu icon the text isn't even visible. Interestingly, when I change:
text-align: left;
to
text-align: center;
I can see the text again, but it is not aligned where i want it. How do I left align my text and keep it visible?
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
style* {
margin: 0 auto;
font-family: sans-serif;
}
body {
margin: 0 auto;
font-family: Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
header {
width: 100%;
background-color: orange;
text-align: center;
position: relative;
}
#pageTitle {
display: flex;
padding: 10px;
}
#pageTitle h2 {
justify-content: center;
/* align horizontal */
align-items: center;
width: 95%;
}
.menu-btn {
position: absolute;
display: inline-block;
cursor: pointer;
}
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
nav {
display: none;
width: 30rem;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: left;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 1.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="pageTitle">
<h2>Page Title</h2>
<div class="mobile-nav">
<button class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</button>
<nav>
<a>Vote</a>
<a>Search</a>
<a>About</a>
</nav>
</div>
</div>
</header>

The problem comes from the rem unit you are using when giving width to your nav. You should use vw viewport width. This is relative from the screen width going from 0 to 100 turning the viewport width into a percentage.
Hope this helps
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
style* {
margin: 0 auto;
font-family: sans-serif;
}
body {
margin: 0 auto;
font-family: Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
header {
width: 100%;
background-color: orange;
text-align: center;
position: relative;
}
#pageTitle {
display: flex;
padding: 10px;
}
#pageTitle h2 {
justify-content: center;
/* align horizontal */
align-items: center;
width: 95%;
}
.menu-btn {
position: absolute;
display: inline-block;
cursor: pointer;
}
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
nav {
display: none;
width: 100vw;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: left;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 1.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="pageTitle">
<h2>Page Title</h2>
<div class="mobile-nav">
<button class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</button>
<nav>
<a>Vote</a>
<a>Search</a>
<a>About</a>
</nav>
</div>
</div>
</header>

As others have pointed out already, the text is actually aligned left, but your screen size might prevent it from showing up due to the big width of your menu.
Try changing the width of your nav element to something relative to the page width, like 80%:
nav {
display: none;
width: 80%;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
https://jsfiddle.net/1y8n08aq/1/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How to make a scrollable footer appear over a fixed content? - html

Related

How do I make my website display properly and get my navbar to display under the logo on smaller screens? Currently shows fine on desktops

Angular Component Content Overflows over header

Flexbox Form not covering entire site

Site doesn't fit the viewport

How do I left align text in a menu and keep the text visible?

Categories

Resources