Develop Reference

How to change fill of an SVG element based on hover of an separate HTML element?

I have a simple SVG graphic (basically 4 squares) in one div. Next to that div is another div with 4 HTML buttons. I want that on hover of button 1, one of the SVG squares changes its background color. And on hover of button 2, another SVG square changes its background color, same for the next 2 buttons and SVG squares. (and when hovering out of the respective button, the SVG square goes back to no fill.)
I have been researching this a lot but have not found a solution. From what I am understanding I can't do this with CSS but is this possible with jQuery or javascript?
For context; I am trying to understand how an interactive graphic like on this page is working: https://the-jay.ch/wohnungen (scroll down to "WOHNUNGSANGEBOT")
.cls-1 {
fill: none;
stroke: #231f20;
stroke-miterlimit: 10;
stroke-width: 35px;
}
.svg_section {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 500px;
}
.svg_wrapper {
overflow: hidden;
width: 50%;
height: 100%;
}
.html-embed {
width: 100%;
height: 100%;
}
.svg_trigger_div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 50%;
height: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-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;
background-color: #e4b5b5;
}
.button1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 30px;
-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;
background-color: #973535;
}
.button2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 30px;
-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;
background-color: #5aac6c;
}
.button3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 30px;
-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;
background-color: #559bbb;
}
.button4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 30px;
-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;
background-color: rgba(162, 71, 153, 0.72);
}
.text-block {
line-height: 14px;
}
<div class="svg_section">
<div class="svg_wrapper">
<div class="html-embed w-embed">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1035 1035.92">
<defs></defs>
<rect id="rec4" class="cls-1" x="17.5" y="17.5" width="500" height="500"></rect>
<rect id="rec3" class="cls-1" x="517.5" y="17.5" width="500" height="500"></rect>
<rect id="rec2" class="cls-1" x="17.5" y="518.42" width="500" height="500"></rect>
<rect id="rec1" class="cls-1" x="517.5" y="518.42" width="500" height="500"></rect>
</svg>
</div>
</div>
<div class="svg_trigger_div">
<a href="#" class="button1 w-inline-block">
<div class="text-block">Button 1</div>
</a>
<a href="#" class="button2 w-inline-block">
<div class="text-block">Button 2</div>
</a>
<a href="#" class="button3 w-inline-block">
<div class="text-block">Button 3</div>
</a>
<a href="#" class="button4 w-inline-block">
<div class="text-block">Button 4</div>
</a>
</div>
</div>

var allClasses = [], theSVG = null;
function changeSvgClasslist(add){
if( theSVG ){
allClasses.forEach( oneClass => { theSVG.classList.remove(oneClass); } )
if(add) theSVG.classList.add(add);
console.log(theSVG.classList);
}
}
function btnOver(evt){
let btnClass = evt.target.getAttribute('data-class');
changeSvgClasslist(btnClass);
}
function btnOut(evt){
changeSvgClasslist(null);
}
document.addEventListener('DOMContentLoaded', () => {
theSVG = document.querySelector('#Layer_1');
let theButtons = document.querySelectorAll('#svg_trigger_div .w-inline-block');
console.log("I see %d buttons.", theButtons.length);
theButtons.forEach( (btn,idx) => {
let curClass = 'btnHover'+ (idx+1);
allClasses.push( curClass );
btn.setAttribute('data-class', curClass);
btn.addEventListener('mouseenter', btnOver);
btn.addEventListener('mouseleave', btnOut);
} )
});
.cls-1{
fill:none;
stroke:#231f20;
stroke-miterlimit:10;
stroke-width:35px;
}
.svg_section {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 500px;
}
.svg_wrapper {
overflow: hidden;
width: 50%;
height: 100%;
}
.html-embed {
width: 100%;
height: 100%;
}
#svg_trigger_div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 50%;
height: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-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;
background-color: #e4b5b5;
}
.button1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 30px;
-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;
background-color: #973535;
}
.button2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 30px;
-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;
background-color: #5aac6c;
}
.button3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 30px;
-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;
background-color: #559bbb;
}
.button4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 30px;
-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;
background-color: rgba(162, 71, 153, 0.72);
}
.text-block {
line-height: 14px;
}
.btnHover1 #rec1{ fill: red; }
.btnHover2 #rec2{ fill: red; }
.btnHover3 #rec3{ fill: red; }
.btnHover4 #rec4{ fill: red; }
<div class="svg_section">
<div class="svg_wrapper">
<div class="html-embed w-embed"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1035 1035.92">
<defs></defs>
<rect id="rec4" class="cls-1" x="17.5" y="17.5" width="500" height="500"></rect>
<rect id="rec3" class="cls-1" x="517.5" y="17.5" width="500" height="500"></rect>
<rect id="rec2" class="cls-1" x="17.5" y="518.42" width="500" height="500"></rect>
<rect id="rec1" class="cls-1" x="517.5" y="518.42" width="500" height="500"></rect>
</svg></div>
</div>
<div id="svg_trigger_div">
<a href="#" class="button1 w-inline-block">
<div class="text-block">Button 1</div>
</a>
<a href="#" class="button2 w-inline-block">
<div class="text-block">Button 2</div>
</a>
<a href="#" class="button3 w-inline-block">
<div class="text-block">Button 3</div>
</a>
<a href="#" class="button4 w-inline-block">
<div class="text-block">Button 4</div>
</a>
</div>
</div>

The way you coded it, you can't just by using css.
You'll need to use Javascript with a MouseOver or a MouseEnter EventListener

how to move button on bottom using css?

I am trying to move my button on bottom (some pixel above bottom).so it always be in bottom whether it contend is less or large. I tried using flex-box also not able to do that.Container have min-height : 500px
here is my code
https://jsbin.com/joyalosate/edit?html,css,output
Expected output :: Explore products move bottom with some pixel above bottom .
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
HTML
<div class="rh02w2">
<div class="bottom__block">
<button class="rh02-pcontent" data-lbl="panel2-home-apps-content-area">
<h1 class="rh02-ttl">Tetst <b>Applications</b></h1>
<div class="rh02-sub">Complete Suite of Apps</div>
<div class="rh02-leadin">
<p>Streamline your enterprise business process. With ERP Financials, Procurement, Project Portfolio Management and more, you can increase productivity, lower costs, and improve controls.</p>
</div>
</button>
<div class="rh02w4">
<div class="rh02-cta">
<div class="obttns">
<div>
<a data-lbl="panel2-home-apps-learn-more">Explore products</a>
</div>
</div>
</div>
</div>
</div>
</div>
css
.rh02w2 {
background-color: #325C72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #FBF9F8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
.obttns {
width: 100%;
font-size: 1.4rem;
margin-bottom: -1.6rem;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: stretch;
align-items: stretch;
}
.obttns>div>* {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
}

Replace your CSS with this.
.rh02w2 {
background-color: #325c72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #fbf9f8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height: 500px;
}
.rh02w4 {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.obttns {
width: 100%;
font-size: 1.4rem;
}
.obttns > div > * {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}

If you want to display your button about 10% above the bottom of the screen you can use the margin-top: 90%; in css. Here is the entire code alongside a button:
<button style="margin-top: 90%;">hi</button>
You can edit the 90% depending on how far down the button is on your screen. Since the code is also using the percentage instead of pixels, it will adjust depending on your screen size.

Sliding stops working after opening bigger version of slider

I have a slider, and when I click on one of the images it contains, the bigger slider containing the same images is created and displayed, and all other elements are hidden.
But if I click exactly on the first image of the first slider, and slide a little bit through the bigger slider and then close the bigger slider, the smaller slider stops working: sliding doesn't work.
I noticed that if I disable autoplay property of the first slider, everything works just fine.
jsfiddle of the case when autoplay is enabled (not working): https://jsfiddle.net/seLn6c3w/
jsfiddle of the case when autoplay is disabled (working): https://jsfiddle.net/0dkqubc1/28/
I was prompted that the solution of the problem might be disabling autoplay property when small slider is hidden, and then enabling the property when the small slider becomes again visible.
So I tried to do what I was prompted, but this didn't help: https://jsfiddle.net/gjyx9hbp/1/
Maybe I need to disable autoplay in some other way? Maybe I'm doing something wrong?
HTML
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
"></script>
<body>
<div class="swiper-container" id="album_images_slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://pbs.twimg.com/media/DtQ5AhzX4AUGQeL.jpg:large" alt="">
</div>
<div class="swiper-slide">
<img src="https://im0-tub-ru.yandex.net/i?id=e13d927c1ca5aeb6bafd4cc795b68dea&n=13" alt="">
</div>
<div class="swiper-slide">
<img src="https://newyork.cbslocal.com/wp-content/uploads/sites/14578484/2012/06/83284744.jpg?w=1500" alt="">
</div>
<div class="swiper-slide">
<img src="https://wallbox.ru/wallpapers/main/201301/cb5c7e68c1854dc.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://stihi.ru/pics/2019/11/13/5598.jpg" alt="">
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</body>
CSS
.layer {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
min-height: 100vh;
background: rgb(36, 36, 36);
color: #fff;
}
#album_images_slider_scale {
width: 1200px;
height: auto;
margin: 0 auto;
}
#album_images_slider_scale .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgb(55, 55, 55);
color: #fff;
border: none;
}
#album_images_slider_scale img {
width: 100%;
height: auto;
margin: 0!important;
border: none!important;
}
.album-title {
color: var(--third-color);
text-align: center;
margin-top: 100px;
margin-bottom: 20px;
}
.album-size {
color: var(--second-color);
text-align: center;
margin-bottom: 100px;
}
#album_images_slider {
width: 600px;
height: auto;
margin: 0 auto;
}
#album_images_slider .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color: var(--third-color)!important;
text-decoration: none!important;
padding: 50px;
background: #fff;
}
.swiper-slide:hover {
text-decoration: none!important;
}
#album_images_slider img {
width: 100%;
height: auto;
}
#albums_slider .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border: 1px solid #ccc;
color: var(--third-color)!important;
text-decoration: none!important;
}
#albums_slider .swiper-slide:hover {
text-decoration: none!important;
}
#albums_slider .swiper-slide .title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 15px;
border-bottom: 1px solid #ccc;
text-align: center;
font-size: 22px;
}
#albums_slider .swiper-slide .description {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 5px;
border-bottom: 1px solid #ccc;
text-align: center;
font-size: 18px;
}
#albums_slider .swiper-slide .price {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 15px;
text-align: center;
font-size: 20px;
}
#albums_slider .swiper-slide img {
width: 100%;
height: auto;
}
.cost {
width: 90%;
text-align: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
color: var(--second-color);
}
hr {
width: 100%;
border-top: 8px solid var(--third-color);
margin-bottom: 100px;
}
.info {
width: 90%;
margin: 0 auto 100px;
}
.info h1 {
text-align: center;
margin-bottom: 30px;
color: var(--second-color);
}
.info-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0;
}
.info-list-item {
list-style: none;
background: url("../icons/checkmark.svg") no-repeat;
border-top: 1px solid #ccc;
font-size: 20px;
color: var(--second-color);
padding: 5px;
}
.info-list-item:last-child {
border-bottom: 1px solid #ccc;
}
.info-list-item span {
margin-left: 30px;
}
.info-list-item::marker {
margin-right: -30px;
}
#albums_slider {
width: 90%;
margin: 0 auto;
margin-bottom: 150px;
}
/* #albums_slider .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color: var(--third-color);
}
#albums_slider .swiper-slide .title {
width: 100%;
padding: 15px;
border: 1px solid #ccc;
border-top: 0;
text-align: center;
font-size: 22px;
}
#albums_slider .swiper-slide .description {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-top: 0;
text-align: center;
font-size: 18px;
}
#albums_slider .swiper-slide .price {
width: 100%;
padding: 15px;
border: 1px solid #ccc;
border-top: 0;
border-bottom: 0;
text-align: center;
font-size: 20px;
}
#albums_slider .image {
border: none!important;
padding: 0;
}
#albums_slider .swiper-slide img {
width: 100%;
height: auto;
} */
.swiper-button-next, .swiper-button-prev {
outline: none;
color: #000!important;
}
.other-albums {
width: 90%;
margin: 0 auto;
text-align: center;
margin-bottom: 50px;
color: var(--second-color);
}
footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 200px;
width: 100%;
background: var(--first-color);
border-top: 4px solid var(--third-color);
}
.footer-brand {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 200px;
height: 100%;
}
.footer-social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
height: 100%;
margin-right: 50px;
margin-left: auto;
padding-bottom: 20px;
}
.footer-social .social-logo {
margin-right: 15px;
}
#vk-logo:hover {
fill: darkblue;
}
#media screen and (max-width: 1200px) {
#album_images_slider_scale {
width: 95%;
}
}
#media screen and (max-width: 820px) {
#album_images_slider {
width: 500px;
}
}
#media screen and (max-width: 520px) {
#album_images_slider {
width: 98%;
}
}
JavaScript: see in different fiddle links

Toggling nav icon in browser mobile screen size will make nav-list-items dissapear when readjusting browser screen to large size

Hello my current issue is that when the page initially loads the navigation works and appears properly when the browser is enlarged, however when readjusting the browser window to a smaller size, toggling the nav menu icon works but however will either
a) readjust the layout in the larger web browser screen if the mobile menu was left open
or
b) navigation items will entirely disappear if the mobile menu was closed
when readjusting the browser window back to the larger screen size.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chispot_Blog</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/a23422f356.js" crossorigin="anonymous"></script>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
// Trying to figure out toggling visibility issue with navigation when going back to large screen
// let navi = document.getElementById("nav-list");
// navi.addEventListener(onresize, toggle_visibility){
// display = "block";
// };
</script>
</head>
<!-- Hamburger Icon from font awesome -->
<!-- <i class="fas fa-bars"></i> -->
<body>
<header>
<nav>
<a href="index.html"><img class="logo" src="images/Component 1.png" alt="blog spot logo">
<ul id="nav-list">
<li class="nav-list-item">home</li>
<li class="nav-list-item">cafes</li>
<li class="nav-list-item">views</li>
<li class="nav-list-item">posts</li>
</ul>
</nav>
<div class="hide">
<i class="fas fa-bars fa-lg hamburger ham-toggle"></i>
</div>
</header>
I have tried to put display:block property under the appropriate class selector inside the larger media query. Which didn't populate any nav-list-items, I kept the display:flex property because thats how I want the nav-list-items to be formatted in the larger layout.
/* general */
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
img{
width: 100%;
}
a:hover, a:focus{
color: black;
}
a .icon:hover{
color: yellow;
}
.logo{
width: 12em;
margin-top: .5em;
margin-bottom: .5em;
}
.main-image{
height: 80%;
width: 95%;
object-fit: cover;
border: 1em;
border-color: #111111;
border-style: solid;
}
.featured-img{
height: 90%;
width: 100%;
object-fit: cover;
order: 1;
padding: 1em;
background-color: lightgray;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
.secondary-featured-article-img{
height: 75%;
width: 90%;
object-fit: cover;
order: 1;
padding: .75em;
background-color: lightgray;
}
/* Typography */
h1{
font-size: 8rem;
text-align: center;
}
h3{
font-size: 3rem;
margin-bottom: 0;
}
h4{
font-size: 2rem;
font-weight: 700;
margin-bottom: 0;
margin-top: 0;
}
h5{
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0;
}
.site-intro-body{
font-size: 1.15rem;
font-weight: lighter;
justify-content: center;
align-items: center;
order: 2;
}
.secondary-featured-article-body{
font-size: .9rem;
font-weight: lighter;
}
footer{
background-color: black;
color: white;
}
.side-page-post-title{
margin-top: .5em;
margin-bottom: 0;
padding-top: .25em;
padding-bottom: .25em;
background-color: black;
color: white;
}
.side-page-post-body{
margin-left: 6em;
margin-right: 6em;
margin-top: 2em;
margin-bottom: 2em;
}
/* Layout Mobile Screen*/
header{
background-color: #f8f8f8;
width: 100%;
margin-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
z-index: 999;
}
header .hamburger{
margin-top: 1em;
margin-right: 1em;
align-content: flex-start;
/* visibility: hidden; HIDE WHEN IN MEDIA QUERY */
}
nav{
display: flex;
width: 100%;
flex-direction: column;
padding-left: 2em;
align-items: center;
justify-content: center;
}
#nav-list{
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: row;
list-style: none;
margin-bottom: 0;
display: none;
}
.nav-list-item{
margin: .1em;
font-size: 1.5rem;
font-weight: 700;
}
a{
text-decoration: none;
color: darkgray;
}
main{
display: flex;
flex-direction: column;
width: 100%;
}
.main-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 4em;
background-color: black;
color: white;
margin-top: 0;
padding-bottom: 3em;
padding-top: 4em;
}
.site-intro{
width: 90%;
padding: 0 5em;
}
.site-intro p{
column-count: 2;
}
.site-photo{
height: 100%;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
order: 1;
}
.article-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 5em;
margin-top: 0;
}
.featured-article{
width: 90%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
padding-right: 2em;
padding-top: 2.5em;
}
.featured-article-body{
width: 100%;
order: 2;
margin-top: 0;
text-align: center;
}
.secondary-featured-article-section{
width: 100%;
display: flex;
flex-direction: column;
}
.secondary-featured-article{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 2em;
padding-top: 2em;
margin-bottom: 0;
}
.secondary-featured-article-body{
width: 95%;
order: 2;
margin-top: 0;
text-align: center;
}
.secondary-featured-article-border{
border-bottom: .15em lightgray solid;
}
footer{
padding-top: 3em;
padding-bottom: 3em;
}
.footer-body{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1em;
}
.social-media-icons{
display: flex;
justify-content: center;
align-items: center;
}
.icon{
margin-right: .5em;
}
.hide{
height: 100%;
align-self: flex-start;
}
.side-page-post-body{
margin-top: 4em;
margin-bottom: 4em;
}
.article-listings{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.article-listing{
display: flex;
height: 45vh;
justify-content: space-around;
align-items: center;
margin-bottom: 2em;
background-color: whitesmoke;
padding-top: 2em;
padding-bottom: 2em;
}
.article-blog-description{
display: flex;
width: 50%;
height: 90%;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
order: 2;
}
.article-listing-image{
order: 1;
width: 40%;
height: 90%;
object-fit: cover;
align-items: center;
}
.article-listing-title{
font-size: 1.75em;
margin-bottom: .5em;
}
.article-listing-body{
margin-top: 0;
font-size: .9em;
}
/* Layout Large Screen*/
#media screen and (min-width: 760px){
.main-image{
height: 75vh;
width: 90%;
object-fit: cover;
border: 1em;
border-color: #111111;
border-style: solid;
}
.featured-img{
height: 70vh;
width: 45%;
object-fit: cover;
order: 1;
padding: 1em;
background-color: lightgray;
}
.secondary-featured-article-img{
height: 40vh;
width: 45%;
object-fit: cover;
order: 1;
padding: .75em;
background-color: lightgray;
}
header{
background-color: #f8f8f8;
width:100%;
margin-bottom:0;
display:flex;
justify-content:space-between;
align-items:center;
position: fixed;
}
header .hamburger{
margin-top: auto;
margin-bottom: auto;
margin-right: 1em;
visibility: hidden; /*HIDE WHEN IN MEDIA QUERY */
}
nav{
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-left: 2em;
align-items: center;
}
#nav-list{
margin-top: 0;
display: flex;
flex-direction: row;
justify-content: row;
list-style: none;
margin-bottom: 0;
visibility: visible;
}
.nav-list-item{
margin: 1em;
font-size: 1.5rem;
font-weight: 700;
}
I'm currently using a simple script I had found on css-tricks but am open to alternative suggestions to resolve the problem of wanting to simply hide and show the nav menu without any issues affecting the other layout in the large media query.

You need set the display property of #nav-list back to flex when switching to larger viewport, since it's already overrided when mobile navigation is toggled.
#media screen and (min-width: 760px){
#nav-list {
display: flex!important;
}
}

CSS hamburger menu cuts in half when closing

I've successfully coded a CSS/JS hamburger menu which has a transforming icon when clicked. However, I've just discovered a bug where, when the hamburger 'close' button is clicked, the nav menu cuts behind the header making it look messy.
Currently, the menu opens correctly when the hamburger is clicked - at 100vh - but when it closes, it appears that it cuts behind the header, so it looks like it's at about 80vh. When it's closing, I'm wanting it to remain at 100vh.
Apologies in advance for the lengthy code.
Here's my code:
// Variables
let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");
// Function
function hamburgerActive() {
line1.classList.toggle("active");
line2.classList.toggle("active");
navList.classList.toggle("active");
}
// Event Listener
hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.universal-header-hamburger {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-start;
}
#hamburger {
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
cursor: pointer;
z-index: 99;
}
.hamburger-span {
height: 5px;
width: 30px;
background-color: #342b38;
transition: all .2s ease-in-out;
cursor: pointer;
}
#hamburger-line-1.active {
transform: translateY(7.5px) rotate(-45deg);
}
#hamburger-line-2.active {
transform: translateY(-7.5px) rotate(45deg)
}
.universal-header-logo {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-basket {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#hamburger-nav-list {
height: 100vh;
width: 0;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
transition: all 0.5s ease-in-out;
}
#hamburger-nav-list.active {
height: 100vh;
width: 30%;
position: fixed;
}
<header class="universal-header-section">
<div class="universal-header-container">
<div class="universal-header-hamburger">
<div id="hamburger">
<span id="hamburger-line-1" class="hamburger-span"></span>
<span id="hamburger-line-2" class="hamburger-span"></span>
</div>
</div>
<div class="universal-header-logo">
<a href="index">
<h2>Logo</h2>
</a>
</div>
<div class="universal-header-basket">
<a href="basket">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</header>
<div id="hamburger-nav-list">
<div class="hamburger-container">
</div>
</div>
Thanks in advance.

Think this is easiest edit to make it work?
Changed the position: absolute / flex
Also the order of DOM elements changed around (most important)
Hope it didnt break anyting :)
// Variables
let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");
// Function
function hamburgerActive() {
line1.classList.toggle("active");
line2.classList.toggle("active");
navList.classList.toggle("active");
}
// Event Listener
hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.universal-header-hamburger {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-start;
}
#hamburger {
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
cursor: pointer;
z-index: 9999;
}
.hamburger-span {
height: 5px;
width: 30px;
background-color: #342b38;
transition: all .2s ease-in-out;
cursor: pointer;
}
#hamburger-line-1.active {
transform: translateY(7.5px) rotate(-45deg);
}
#hamburger-line-2.active {
transform: translateY(-7.5px) rotate(45deg)
}
.universal-header-logo {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-basket {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#hamburger-nav-list {
height: 100vh;
width: 0;
top: 0;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
transition: all 0.5s ease-in-out;
position:absolute;
}
#hamburger-nav-list.active {
height: 100vh;
width: 30%;
position: fixed;
z-index: ;
display:flex;
}
<div id="hamburger-nav-list">
<div class="hamburger-container">
</div>
</div>
<header class="universal-header-section">
<div class="universal-header-container">
<div class="universal-header-hamburger">
<div id="hamburger">
<span id="hamburger-line-1" class="hamburger-span"></span>
<span id="hamburger-line-2" class="hamburger-span"></span>
</div>
</div>
<div class="universal-header-logo">
<a href="index">
<h2>Logo</h2>
</a>
</div>
<div class="universal-header-basket">
<a href="basket">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</header>