Develop Reference

swiperjs arrows doesnt showup in chrome browser

Im using swiper js for a project and wanted the navigation arrows so i added navigation module. it does works in all firefox browser(mobile/desktop) but not in any chrome browser what is causing the problem?
css im using to change color of the arrow
.Swiper1 {
width: 100%;
height: 300px;
}
.SwiperSlide1 {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition: 0.3s ease;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-button-prev::after{
font-size: 1.5rem;
color: white;
visibility: visible;
}
.swiper-button-next::after{
font-size: 1.5rem;
color: white;
}
html (JSX)
<Swiper
navigation={true}
loop={true}
modules={[Navigation,Autoplay]}
autoplay={{
delay: 4000,
disableOnInteraction: false,
}}
className="Swiper1">
<SwiperSlide></SwiperSlide >
swiper slide basically have pictures.(the code is too long)

How can i do for overflow in trapezoid

The span text inside the button is overflow from trapezoid button. I can't move to inside. There is a span tag in button tag. There are text and slider in span but slider is hidden.
I tryed like this code in my css code for soutions but did not working. Maybe I tryed wrong:
`
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
`
What can i do this overflow:
Overflow image
this my css code:
.product-view {
$self: &;
display: flex;
flex-direction: column;
&__container {
display: flex;
flex-direction: column;
#include make-container();
}
&__seperator{
border-radius:1em ;
padding:0.2em;
width: 100%;
background-color: getColor(primary);
}
&__tabs-container {
margin-top:2.5em ;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
&:deep() {
.v-slide-group__content {
height: 5em;
justify-content: center;
}
.v-slide-group__container{
height: 5em;
}
.v-slide-group{
height: 3.05em;
}
.v-btn--size-default{
width: 9em;
color:getScaledColor(secondary,95);
border-bottom:3.5em solid;
border-left:1.35em solid transparent;
border-right: 1.35em solid transparent;
}
.v-slide-group-item--active{
color: getColor(primary);
height: 3em;
width: 9em;
border-bottom:3.5em solid;
border-left:1.40em solid transparent;
border-right: 1.40em solid transparent;
.v-btn__content{
width: 5px;
color:getColor(on-primary);
font-size: 0.8rem;
font-weight: bold;
justify-content: center;
display: flex;
transform: translate(2px,25px);
text-align: center;
.v-tab__slider{
visibility: hidden;
}
}
}
.v-btn__content{
width: 15rem;
display: flex;
color:getColor(secondary);
font-size: 0.9rem;
font-family: bold;
justify-content: center;
text-align: center;
font-weight: bold;
transform: translate(2px,25px);
.v-tab__slider{
visibility: hidden;
}
}
}
}
}

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.

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;
}
}