Develop Reference

Footer div keeps overlapping with the div above when I resize the browser. What did I do wrong?

I realize this is a lot of code to look through, and i'm sure you can ignore 90% of it. Been pulling my hair out about this issue. None of my other code has this problem except for the footer and the grid. (I wrapped the grid with .staff-box) Had to take out a chunk of css to make it less of a headache to read.
Thanks!
.main-flex-box {
position: relative;
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: center;
background-color: white;
border-radius: 20px;
margin-top: -40px;
line-height: 30px;
}
.main-text-flex {
position: relative;
display: flex;
flex-direction: column;
max-width: 750px;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.staff-box {
margin-top: 40px;
flex-direction: column;
border-radius: 20px;
position: relative;
display: flex;
min-height: 90vh;
width: 100%;
background-color: #f2f2f2;
margin-left: auto;
margin-right: auto;
}
.grid-container {
display: grid;
position: relative;
position: relative;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
min-height: 400px;
text-align: center;
margin-top:50px;
grid-column-gap: -40px;
grid-row-gap: 100px;
}
.grid-item {
height: 2px;
background-color: black;
display: block;
width: 80%;
font-weight: normal;
position: relative;
font-size: 1rem;
font-size: 2vh;
margin-left: auto;
margin-right: auto;
}
#media all and (max-width: 1025px) {
.main-flex-box {
width: 100%;
height: auto;
}
.home-text {
font-size: 1.1rem;
}
.socials {
display: none;
}
img {
max-width: 325px;
}
}
#media all and (max-width: 994px) {
.grid-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 100%;
grid-row-gap: 175px;
}
.staff-box {
height: 90vh;
width: 100%;
}
}
#media all and (max-width: 580px) {
.grid-container {
grid-template-columns: 1fr;
}
}
#media all and (max-width: 414px) {
.grid-container {
margin-top: -50px;
}
.grid-item {
margin-top: 90px;
}
}
#media all and (max-width: 645px) {
.staff-flex-box{
margin-top: 150px;
}
}
<div class="main-text-flex">
<h1>Massachusetts</h1>
<p class="toggle-item">
A New Way Photo Gallery
</p>
<img src="img/stock2.png" class="image-1">
<div class="image-flex-container">
</div>
<div class="staff-box">
<h1>Meet The Staff</h1>
<h3>Here are our four most experienced members</h3>
<div class="grid-container">
<div class="grid-item">
<h3>Marcus Johnson</h3>
<p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
</div>
<div class="grid-item">
<h3>Bill LaPointe</h3>
<p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
</div>
<div class="grid-item">
<h3>Bill Formal</h3>
<p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
</div>
<div class="grid-item">
<h3>Scott Wesley</h3>
<p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
</div>
<div class="grid-item">
<h3>Scott Wesley</h3>
<p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
</div>
<div class="grid-item">
<h3>Scott Wesley</h3>
<p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
</div>
</div>
</div>
<footer class="div">
<p>footer test</p>
</footer>

Not quite sure what you want to accomplish, but when I encounter this sort of issue, I create a minimal example that still has the problem. That means remove everything except the elements that still show the issue. That's what I did here:
.staff-box {
margin-top: 40px;
border-radius: 20px;
position: relative;
min-height: 90vh;
width: 100%;
background-color: red
}
#media all and (max-width: 994px) {
.staff-box {
height: 90vh;
width: 100%;
}
}
<div class="staff-box">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
<footer class="div">
<p>footer test</p>
</footer>
From here, it's easy to change the css to get the (I think) expected result.
The problem, if I understood it correctly, is with "height: 90vh;" in the media query. It makes the div 90% of the viewport, and since the content is larger than that, it overflows the div. Remove that rule from the media query and the footer will appear under the staff-box div

Javascript resize div width with calc

I'm running into an error with a javascript code I'm working on. I'm trying to make a collapsible sidebar. Whenever the user is hovering over the bar, the sidebar should be 280px wide and the main content should be calc(100vw-280px). Alternatively, whenever the user is NOT hovering over the bar, the sidebar should be 80px wide and the main content should be calc(100vw-80px).
This seems simple enough, but the #content div is not resizing whenever the function runs. The only thing I can figure is that javascript does not play friendly with calc but there could be something else I'm overlooking too in the CSS or with default values. I'm including all of the code just to be safe. Any help is appreciated!!
var mini = true;
function toggleSidebar() {
if (mini) {
document.getElementById("rightbar").style.width = "280px";
document.getElementById("content").style.width = "calc(100vw-280px)";
this.mini = false;
} else {
document.getElementById("rightbar").style.width = "80px";
document.getElementById("content").style.width = "calc(100vw-80px)";
this.mini = true;
}
}
body {margin: 0; background-color: #F2F2F2;}
.topbar {
z-index: 10;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 56px;
font-size: x-large;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
#rightbar {
z-index: 1;
position: fixed;
top: 60px; right: 0%;
width: 80px; height: calc(100vh - 60px);
overflow-y: auto;
overflow-x: hidden;
transition: 0.5s;
color: #412A1B;
border-left: 2px solid darkgray}
#content {
display: grid;
position: fixed;
top: 60px; left: 0;
width: calc(100vw - 80px);
height: calc(100vh - 60px);
padding: 32px;
box-sizing: border-box;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 300px;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 20px 40px;
grid-template-areas:
"hello hello"
"announce tasks"
"announce tasks"
"announce streak";}
.hello {
grid-area: hello;
margin-top: 20px;
margin-bottom: 30px;
text-align: center;
font-size: 3em;
color: #3F5328}
.announce {
overflow: scroll;
grid-area: announce}
.tasks {
padding: 20px;
grid-area: tasks;
text-align: center;}
.something {grid-area: something}
.streak {
grid-area: streak;
font-size: 52px;
font-weight: 800}
.module {
background-color: white;
border-radius: 6px;
box-shadow: 3px 4px #CECECE}
table {width: 100%}
td {
padding: 10px 20px;
border-bottom: 1px solid lightgray;}
td .msg {
font-size: 20px;
line-height: 1.5}
.posted {
display: grid;
grid-template-columns: 42px 2fr 1fr;
grid-template-areas:
"pic author timestamp"}
.posted .img {grid-area: pic}
.posted .author {
grid-area: author;
display: flex;
align-items: center;
font-weight: 800;
font-size: 16px;}
.posted .timestamp {
grid-area: timestamp;
display: flex;
justify-content: flex-end;
align-items: center;
color: gray;
font-size: 16px}
.pic{
width: 25px;
clip-path: circle();}
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<div class='topbar'></div>
<div id='rightbar' onmouseover="toggleSidebar()" onmouseout="toggleSidebar()"></div>
<div id='content'>
<div class='hello'>Hi, John.</div>
<div class='module tasks center'><p>You have <b>10 tasks</b> to do this week.</p></div>
<div class='module streak center'>🔥 32</div>
<div class='module announce'>
<table>
<tr>
<td>
<span class='msg'>Please do not message me at the moment. I am trying to fix this horrible CSS glitch..</span>
<div class='posted'>
<span class='img'><img class='pic' src='https://mrdansby.com/resources/pics/1.png'></span>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>33m ago</span>
</div>
</td>
</tr>
<tr>
<td>
<span class='msg'>Have a great fall break!</span>
<div class='posted'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>1d ago</span>
</div>
</td>
</tr>
<tr>
<td>
<span class='msg'>Be sure to bring a pencil and paper to class tomorrow!</span>
<div class='posted'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>3d ago</span>
</div>
</td>
</tr>
</table>
</div>
</div>

calc is a bit persnickety about whitespace.. Specifically, the operator in the calc equation must have a space on either side. I updated your calc JS setting lines from something like this...
document.getElementById("content").style.width = "calc(100vw-280px)";
...to include the whitespace:
document.getElementById("content").style.width = "calc(100vw - 280px)";
...and it seems closer to what I think you're looking for; see the snippet below:
var mini = true;
function toggleSidebar() {
if (mini) {
document.getElementById("rightbar").style.width = "280px";
document.getElementById("content").style.width = "calc(100vw - 280px)";
this.mini = false;
} else {
document.getElementById("rightbar").style.width = "80px";
document.getElementById("content").style.width = "calc(100vw - 80px)";
this.mini = true;
}
}
body {margin: 0; background-color: #F2F2F2;}
.topbar {
z-index: 10;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 56px;
font-size: x-large;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
#rightbar {
z-index: 1;
position: fixed;
top: 60px; right: 0%;
width: 80px; height: calc(100vh - 60px);
overflow-y: auto;
overflow-x: hidden;
transition: 0.5s;
color: #412A1B;
border-left: 2px solid darkgray}
#content {
display: grid;
position: fixed;
top: 60px; left: 0;
width: calc(100vw - 80px);
height: calc(100vh - 60px);
padding: 32px;
box-sizing: border-box;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 300px;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 20px 40px;
grid-template-areas:
"hello hello"
"announce tasks"
"announce tasks"
"announce streak";}
.hello {
grid-area: hello;
margin-top: 20px;
margin-bottom: 30px;
text-align: center;
font-size: 3em;
color: #3F5328}
.announce {
overflow: scroll;
grid-area: announce}
.tasks {
padding: 20px;
grid-area: tasks;
text-align: center;}
.something {grid-area: something}
.streak {
grid-area: streak;
font-size: 52px;
font-weight: 800}
.module {
background-color: white;
border-radius: 6px;
box-shadow: 3px 4px #CECECE}
table {width: 100%}
td {
padding: 10px 20px;
border-bottom: 1px solid lightgray;}
td .msg {
font-size: 20px;
line-height: 1.5}
.posted {
display: grid;
grid-template-columns: 42px 2fr 1fr;
grid-template-areas:
"pic author timestamp"}
.posted .img {grid-area: pic}
.posted .author {
grid-area: author;
display: flex;
align-items: center;
font-weight: 800;
font-size: 16px;}
.posted .timestamp {
grid-area: timestamp;
display: flex;
justify-content: flex-end;
align-items: center;
color: gray;
font-size: 16px}
.pic{
width: 25px;
clip-path: circle();}
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<div class='topbar'></div>
<div id='rightbar' onmouseover="toggleSidebar()" onmouseout="toggleSidebar()"></div>
<div id='content'>
<div class='hello'>Hi, John.</div>
<div class='module tasks center'><p>You have <b>10 tasks</b> to do this week.</p></div>
<div class='module streak center'>🔥 32</div>
<div class='module announce'>
<table>
<tr>
<td>
<span class='msg'>Please do not message me at the moment. I am trying to fix this horrible CSS glitch..</span>
<div class='posted'>
<span class='img'><img class='pic' src='https://mrdansby.com/resources/pics/1.png'></span>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>33m ago</span>
</div>
</td>
</tr>
<tr>
<td>
<span class='msg'>Have a great fall break!</span>
<div class='posted'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>1d ago</span>
</div>
</td>
</tr>
<tr>
<td>
<span class='msg'>Be sure to bring a pencil and paper to class tomorrow!</span>
<div class='posted'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>3d ago</span>
</div>
</td>
</tr>
</table>
</div>
</div>

Push off-canvas sidebar - How to smooth transition?

For some reason the main area of the grid does not transit smoothly when I click on toggle button. There is a gap between the sidebarTwo and main area.
Let me know if I am doing something wrong when trying to implement push off-canvas sidebar using CSS Grid.
Here are
grid-template-areas:
'header header header'
'main main sidebarTwo'
'footer footer footer';
code
const toggleBtn = document.querySelector('#category-tabs');
const toggleBtnOne = document.querySelector('#toggleOne');
const sidebarMainOne = document.querySelector('.main');
const sidebarMainTwo = document.querySelector('.sidebarTwo');
const replaFunction = () => {
toggleBtnOne.classList.contains('fa-toggle-on') ?
toggleBtnOne.classList.replace('fa-toggle-on', 'fa-toggle-off') :
toggleBtnOne.classList.replace('fa-toggle-off', 'fa-toggle-on');
sidebarMainOne.classList.toggle('active');
sidebarMainTwo.classList.toggle('active');
};
toggleBtn.addEventListener('click', replaFunction);
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,900|Six+Caps');
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: 'Jost', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 100vh;
width: 100wh;
padding: 0;
margin: 0;
font-size: 1rem;
font-weight: 300;
line-height: 1.6;
display: grid;
grid-template-columns: auto 8fr auto;
grid-template-rows: 80px auto 50px;
grid-template-areas: 'header header header' 'main main sidebarTwo' 'footer footer footer';
}
a {
text-decoration: none;
color: #e8e8e8;
}
.box {
background: #ff4365;
padding: 2em;
height: 100px;
}
.header {
grid-area: header;
background: #2c343b;
color: #e9d20f;
display: flex;
justify-content: center;
align-items: center;
}
.main {
grid-area: main;
background: #ecedf2;
display: grid;
grid-gap: 1.5em;
grid-template-columns: auto;
grid-template-rows: max-content 1fr;
grid-template-areas: 'charts' 'trading';
padding: 1.5em 1.5em 1.5em 1.5em;
transition: all 1000ms ease-in-out;
}
.sidebarTwo {
grid-area: sidebarTwo;
width: 260px;
right: -260px;
background: #2c343b;
height: 100%;
transition: all 1000ms ease-in-out;
}
.sidebarTwo.active {
position: fixed;
transform: translateX(260px);
transition: all 1000ms ease-in-out;
}
.charts {
grid-area: charts;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;
}
.trading {
grid-area: trading;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, auto);
grid-template-rows: minmax(200px, 600px);
grid-auto-flow: dense;
grid-template-areas: 'one one two two two two';
}
.two {
grid-area: two;
height: auto;
background: #495867;
}
.one {
grid-area: one;
height: auto;
}
.footer {
grid-area: footer;
background: #2c343b;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
/>
<title>Document</title>
</head>
<body>
<div class="header active">
<div id="category-tabs">
<a href="#" onclick="return false;" class="left"
><i id="toggleOne" class="fas fa-toggle-on fa-2x"></i
></a>
</div>
<h1 class="header-title">CSS Grid - grid-template-areas</h1>
</div>
<div class="sidebarTwo"></div>
<div class="main">
<div class="trading">
<div class="box one">1</div>
<div class="box two">2</div>
</div>
<div class="charts">
<div class="box three">3</div>
<div class="box four">4</div>
<div class="box five">5</div>
<div class="box six">6</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

Here is the answer. Not the best solution but it works.
const toggleBtn = document.querySelector('#category-tabs');
const toggleBtnOne = document.querySelector('#toggleOne');
const sidebarMainOne = document.querySelector('.main');
const sidebarMainTwo = document.querySelector('.sidebarTwo');
const replaFunction = () => {
toggleBtnOne.classList.contains('fa-toggle-on')
? toggleBtnOne.classList.replace('fa-toggle-on', 'fa-toggle-off')
: toggleBtnOne.classList.replace('fa-toggle-off', 'fa-toggle-on');
sidebarMainOne.classList.toggle('active'); sidebarMainTwo.classList.toggle('active');
};
toggleBtn.addEventListener('click', replaFunction);
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,900|Six+Caps');
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: 'Jost', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 100vh;
width: 100wh;
padding: 0;
margin: 0;
font-size: 1rem;
font-weight: 300;
line-height: 1.6;
display: grid;
grid-template-columns: auto 8fr auto;
grid-template-rows: 80px auto 50px;
grid-template-areas:
'header header header'
'main main sidebarTwo'
'footer footer footer';
}
a {
text-decoration: none;
color: #e8e8e8;
}
.box {
background: #ff4365;
padding: 2em;
height: 100px;
}
.header {
grid-area: header;
background: #2c343b;
color: #e9d20f;
display: flex;
justify-content: center;
align-items: center;
}
.main {
grid-area: main;
background: #ecedf2;
width: calc(100% - 50px);
display: grid;
grid-gap: 1.5em;
grid-template-columns: auto;
grid-template-rows: max-content 1fr;
grid-template-areas: 'charts' 'trading';
padding: 1.5em 1.5em 1.5em 1.5em;
transition: all 500ms ease-in-out;
}
.sidebarTwo {
grid-area: sidebarTwo;
position: fixed;
right: -360px;
width: 360px;
background: #2c343b;
height: 100%;
transition: all 500ms ease-in-out;
}
.sidebarTwo.active {
transform: translateX(-360px);
transition: all 500ms ease-in-out;
}
.main.active {
width: calc(100% - 410px);
transition: all 500ms ease-in-out;
}
.charts {
grid-area: charts;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;
}
.trading {
grid-area: trading;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, auto);
grid-template-rows: minmax(200px, 600px);
grid-auto-flow: dense;
grid-template-areas: 'one one two two two two';
}
.two {
grid-area: two;
height: auto;
background: #495867;
}
.one {
grid-area: one;
height: auto;
}
.footer {
grid-area: footer;
background: #2c343b;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
/>
<title>Document</title>
</head>
<body>
<div class="header active">
<div id="category-tabs">
<a href="#" onclick="return false;" class="left"
><i id="toggleOne" class="fas fa-toggle-on fa-2x"></i
></a>
</div>
<h1 class="header-title">CSS Grid - grid-template-areas</h1>
</div>
<div class="sidebarTwo"></div>
<div class="main">
<div class="trading">
<div class="box one">1</div>
<div class="box two">2</div>
</div>
<div class="charts">
<div class="box three">3</div>
<div class="box four">4</div>
<div class="box five">5</div>
<div class="box six">6</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

align items on stretch to the center of the parent div

I tried to create a menu that stretches to full height on mobile screens. For the parent container I use a flexbox with flex-direction column and stretch the items on full screen height.
$(document).ready(() => {
$("#btnMenu").click(() => {
toggleMenu();
});
$(".navbarLink").click(() => {
if ($("#navbarItems").hasClass("activeNavbar")) {
toggleMenu();
}
});
});
function toggleMenu() {
$("#navbarItems").toggleClass("activeNavbar");
toggleMenuBtn();
}
function toggleMenuBtn() {
$("#btnMenu").toggleClass("activeMenuBtn");
}
body {
margin: 0;
}
.link {
text-decoration: none;
}
#navbar {
height: 60px;
top: 0;
padding-left: 200px;
padding-right: 200px;
position: sticky;
background: #1e222a;
}
#navbarItems {
height: 100%;
display: flex;
align-items: center;
}
#logoLink {
display: flex;
align-items: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 30px;
}
.navbarItem {
background: #1e222a;
}
.navbarLink {
color: #ffffff;
}
.navbarLink:hover {
color: #3abcf3;
}
#btnMenuContainer {
height: 100%;
display: none;
}
#btnMenu {
cursor: pointer;
}
.menuBtnBar {
width: 35px;
height: 5px;
margin: 6px 0;
background-color: #ffffff;
transition: 0.4s;
}
.activeMenuBtn #barTop {
transform: rotate(-45deg) translate(-9px, 6px);
}
.activeMenuBtn #barCenter {
opacity: 0;
}
.activeMenuBtn #barBottom {
transform: rotate(45deg) translate(-8px, -8px);
}
#media(max-width: 1200px) {
#navbar {
padding-left: 150px;
padding-right: 150px;
}
}
#media(max-width: 1100px) {
#navbar {
padding-left: 0;
padding-right: 0;
}
#btnMenuContainer {
display: flex;
align-items: center;
}
#btnMenu {
margin-left: 20px;
}
#navbarItems {
margin-left: 0;
display: none;
}
#navbarItems.activeNavbar {
display: flex;
flex-direction: column;
align-items: stretch;
height: 100vh;
}
#logoLink {
display: inline-block;
}
.navbarItem {
flex: 1 1 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 0;
}
#navbarItems .navbarItem:not(:last-child) {
border-bottom: 1px solid #676767;
}
.navbarLink {
width: 100%;
height: 100%;
display: inline-block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<div id="btnMenuContainer">
<div id="btnMenu">
<div id="barTop" class="menuBtnBar"></div>
<div id="barCenter" class="menuBtnBar"></div>
<div id="barBottom" class="menuBtnBar"></div>
</div>
</div>
<div id="navbarItems">
<div class="navbarItem">
<a id="logoLink" class="link navbarLink" href="#">
<img class="img" src="https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Ok.png">
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 2
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 3
</a>
</div>
</div>
</div>
When using align-items: stretch; how can I place the links (and the logo) back to center?
My second question is what can I use for height: 100vh; instead? I would like to keep it dynamic so maybe there is a better way than using a constant number?

It works fine. Check the code snippets and fiddle for further clarification.
Noe all links are center aligned and menu height takes the full height of the space available and there is no scroll any more.
My suggestion is to use 100vh for the height because it better than applying static value since 100vh is dynamic value.
https://jsfiddle.net/Sampath_Madhuranga/4uLb6rsw/7/
$(document).ready(() => {
$("#btnMenu").click(() => {
toggleMenu();
});
$(".navbarLink").click(() => {
if ($("#navbarItems").hasClass("activeNavbar")) {
toggleMenu();
}
});
});
function toggleMenu() {
$("#navbarItems").toggleClass("activeNavbar");
toggleMenuBtn();
}
function toggleMenuBtn() {
$("#btnMenu").toggleClass("activeMenuBtn");
}
body {
margin: 0;
}
.link {
text-decoration: none;
}
#navbar {
height: 60px;
top: 0;
padding-left: 200px;
padding-right: 200px;
position: sticky;
background: #1e222a;
}
#navbarItems {
height: 100%;
display: flex;
align-items: center;
}
#logoLink {
display: flex;
align-items: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 30px;
}
.navbarItem {
background: #1e222a;
}
.navbarLink {
color: #ffffff;
}
.navbarLink:hover {
color: #3abcf3;
}
#btnMenuContainer {
height: 100%;
display: none;
}
#btnMenu {
cursor: pointer;
}
.menuBtnBar {
width: 35px;
height: 5px;
margin: 6px 0;
background-color: #ffffff;
transition: 0.4s;
}
.activeMenuBtn #barTop {
transform: rotate(-45deg) translate(-9px, 6px);
}
.activeMenuBtn #barCenter {
opacity: 0;
}
.activeMenuBtn #barBottom {
transform: rotate(45deg) translate(-8px, -8px);
}
#media(max-width: 1200px) {
#navbar {
padding-left: 150px;
padding-right: 150px;
}
}
#media(max-width: 1100px) {
#navbar {
padding-left: 0;
padding-right: 0;
}
#btnMenuContainer {
display: flex;
align-items: center;
}
#btnMenu {
margin-left: 20px;
}
#navbarItems {
margin-left: 0;
display: none;
}
#navbarItems.activeNavbar {
display: flex;
flex-direction: column;
align-items: stretch;
height: calc( 100vh - 60px);
}
#logoLink {
display: flex;
justify-content: center;
}
.navbarItem {
flex: 1 1 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 0;
}
#navbarItems .navbarItem:not(:last-child) {
border-bottom: 1px solid #676767;
}
.navbarLink {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<div id="btnMenuContainer">
<div id="btnMenu">
<div id="barTop" class="menuBtnBar"></div>
<div id="barCenter" class="menuBtnBar"></div>
<div id="barBottom" class="menuBtnBar"></div>
</div>
</div>
<div id="navbarItems">
<div class="navbarItem">
<a id="logoLink" class="link navbarLink" href="#">
<img class="img" src="https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Ok.png">
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 2
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 3
</a>
</div>
</div>
</div>
Thanks.

Let .navbarLink also have a flex layout.
.navbarItem {
flex: 1 1 100%;
}
.navbarLink {
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
text-align: center;
}
By the way, here is a great resource that really helped me when I learned to use flexbox layouts. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Follow this link https://flexboxfroggy.com/ there is a really nice game which will teach you flexbox while playing in no time. After that you will be able to fix your navigation.

keeping css grid layout simple

Please take a look at the below example. I'm learning css grids. The whole purpose is to keep things simple and to not need to specify distinct layout details on the child elements unnecessarily, so solutions should conform to this pattern.
Given the following:
function toggle(t) {
document.querySelectorAll('div').forEach(el =>
el.classList[0] === t.classList[0] ?
el.classList.toggle('selected') :
el.classList.remove('selected'))
}
:root,
html,
body,
main {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100%;
}
main {
border: solid 3pt white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
div {
grid-area: span 2 / span 2;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 5em;
font-weight: bold;
color: white;
background: grey;
}
.one {
background: red
}
.two {
background: green
}
.three {
background: blue
}
.selected {
width: 150%;
height: 150%;
z-index: 2;
}
<main>
<div class=one onclick="toggle(event.target)">one</div>
<div class=two onclick="toggle(event.target)">two</div>
<div class=three onclick="toggle(event.target)">three</div>
<div class=four onclick="toggle(event.target)">four</div>
</main>
https://jsfiddle.net/robbie_at_harvard/a3ouq711/1/
Please adjust to cause the areas two, three and four to expand towards the middle instead of always from the top-left corner? Again, preferably with generic rules rather than ones specific to the div.class specifications.
Second question, if I wanted instead a 4x4 layout of 2x2 child elements, where clicking on one element expanded it to 3x3 and contracted the others to 1x2, 2x1, and 1x1 in the opposite corner, what is necessary to produce this solution?

You could use transform:scale(1.5) and position it with transform-origin.
It would require specific CSS rules depending on the grid (i use :nth-child to target each element)
For 2x2 use
main div:nth-child(1){transform-origin: top left;}
main div:nth-child(2){transform-origin: top right;}
main div:nth-child(3){transform-origin: bottom left;}
main div:nth-child(4){transform-origin: bottom right;}
.selected {
transform:scale(1.5);
z-index: 2;
}
function toggle(t) {
document.querySelectorAll('div').forEach(el =>
el.classList[0] === t.classList[0] ?
el.classList.toggle('selected') :
el.classList.remove('selected'))
}
:root,
html,
body,
main {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100%;
}
main {
border: solid 3pt white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
div {
grid-area: span 2 / span 2;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 5em;
font-weight: bold;
color: white;
background: grey;
}
.one {
background: red
}
.two {
background: green
}
.three {
background: blue
}
main div:nth-child(1) {
transform-origin: top left;
}
main div:nth-child(2) {
transform-origin: top right;
}
main div:nth-child(3) {
transform-origin: bottom left;
}
main div:nth-child(4) {
transform-origin: bottom right;
}
.selected {
transform: scale(1.5);
z-index: 2;
}
<main>
<div class=one onclick="toggle(event.target)">one</div>
<div class=two onclick="toggle(event.target)">two</div>
<div class=three onclick="toggle(event.target)">three</div>
<div class=four onclick="toggle(event.target)">four</div>
</main>

I think it's difficult to have a general solution since the 4 blocks need to move in different ways. By the way here a solution that involve few CSS changes.
I know you want a generic one but i think in all the cases you will have some specificities (like the color and the content)
function toggle(t) {
document.querySelectorAll('div').forEach(el =>
el.classList[0] === t.classList[0] ?
el.classList.toggle('selected') :
el.classList.remove('selected'))
}
:root,
html,
body,
main {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100%;
}
main {
position:relative;
border: solid 3pt white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
div {
grid-area: span 2 / span 2;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 5em;
font-weight: bold;
color: white;
background: grey;
transition:0.5s;
}
.one {
background: red;
}
.two {
background: green;
right:25%;
}
.three {
background: blue;
bottom:25%;
}
.four {
bottom:25%;
right:25%;
}
.selected {
position:relative;
width:150%;
height:150%;
}
<main>
<div class=one onclick="toggle(event.target)">one</div>
<div class=two onclick="toggle(event.target)">two</div>
<div class=three onclick="toggle(event.target)">three</div>
<div class=four onclick="toggle(event.target)">four</div>
</main>