Toggle sideBar(iFrame) using Media Queries











up vote
1
down vote

favorite
1












I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.






@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}





What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.



How would I go about this in code-wise?



If there are any previous tutorials like this, please attach.



Original Code attached:






/* Copyright (c) myEd (made by students, for students.) 2018. */



body { /* General Body Properties */

    font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

    margin: 0;

    overflow: hidden;

}



* { /* Key element to aligning <divs> (DO NOT REMOVE) */

    box-sizing: border-box;

}



#wrapper {

    bottom: 0;

    left: 0;

    overflow: hidden;

    position: absolute;

    right: 0;

    top: 0

}



.header { /* Header properties featuring myEd and school emblems */

    padding: 30px;

    text-align: center; /* Aligns links in the navBar */

    background-image: url(/Default/Img/backgroundHeader-4K.jpg);

    background-size: cover;

    background-repeat: no-repeat;

}



.myEd-reverse {

    width: 240px;

    height: 70px;

    float: left;

    margin-left: -60px;

    margin-top: -40px;

}



.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */

    overflow: hidden;

    background-color: #333;

    position: sticky;

    position: -webkit-sticky;

    top: 0;

    z-index: 100000;

}



.navBar a { /* Style the navBar links */

    float: left;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */

    float: right;

}



.navBar a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.navBar a.active { /* Active Link */

    background-color: #666;

    color: #fff;

}



.modalDialog { /* Modal Properties for all modals in myEd */

	position: fixed;

	font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: rgba(0,0,0,0.8);

	z-index: 99999;

	opacity:0;

	-webkit-transition: opacity 400ms ease-in;

	-moz-transition: opacity 400ms ease-in;

	transition: opacity 400ms ease-in;

	pointer-events: none;

}



.modalDialog:target { /* Modal Properties for all modals in myEd */

	opacity:1;

	pointer-events: auto;

}



.modalDialog > div { /* Modal Properties for all modals in myEd */

	width: 400px;

	position: relative;

	margin: 10% auto;

	padding: 5px 20px 13px 20px;

	border-radius: 10px;

	background: #d7d7d7;

	background: -moz-linear-gradient(#ddd, #666);

	background: -webkit-linear-gradient(#ddd, #666);

	background: -o-linear-gradient(#ddd, #666);

}



.close { /* Modal Properties for all modals in myEd */

	background: #606061;

	color: #FFFFFF;

	line-height: 10px;

	position: absolute;

	right: -5px;

	text-align: center;

	top: -10px;

	width: -5px;

	text-decoration: none;

	font-weight: bold;

	-webkit-border-radius: 12px;

	-moz-border-radius: 12px;

	border-radius: 12px;

	-moz-box-shadow: 1px 1px 3px #000;

	-webkit-box-shadow: 1px 1px 3px #000;

	box-shadow: 1px 1px 3px #000;

}



.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */



.textModalh2 { /* Text preferences of the modal box directed from the navBar */

    margin-top: 18px;

    margin-bottom: -15px;

}



.textModalh5 { /* Text preferences of the modal box directed from the navBar */

    margin-bottom: -15px;

}



.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */

    border-radius: 50%; 

    height: 130px; 

    width: 120px;

    float: left;

    margin-right: 40px;

    margin-top: 15px

}



.row { /* Alignment between sideBar and main */

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.sideBar { /* sideBar alignment properties */

    -ms-flex: 20%;

    flex: 20%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows myEd news to scroll */

    overflow: hidden;

    position: relative;

}



#newsmyEd {

    position: absolute;

    width: 100%;

    height: calc(100vh - 120px);

    top: 0;

    right: 0;

}



.main { /* Main Column */

    -ms-flex: 80%;

    flex: 80%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows embedded iFrame to scroll */

    position: relative;

    overflow: hidden;

}



.frameMain { /* Frame Properties */

    position: absolute;

    top: 0;

    left: 0;

    border: 0;

    height: calc(100vh - 120px);

}



.footer { /* Footer properties */

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #333;

}



.footer a { /* Footer navBar properties */

    float: right;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.footer a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.footer a.active { /* Active Link */

    background-color: #666;

    color: #fff;

} 



@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}

<!DOCTYPE HTML>

<!-- Copyright (c) myEd (made by students, for students.) 2018. -->

<html lang="en">

<head>

<title>Welcome | myEd</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">

</head>



<body>

<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding

</script>

<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->

<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->

<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->

</div> 

<div class="navBar"> <!-- Main sticky navBar with categories listed -->

<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->

<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->

<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->

<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->

<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->

<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->

<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->



<div id="modalQL" class="modalDialog">

<div>

<a href="#close" title="Close Quick Links" class="close">X</a>

<h3>Quick Links</h3>

<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>

<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>

<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>

<br>

<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>

</div>

</div>



<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->

<div id="modalPO" class="modalDialog">

<div>

<a href="#close" title="Close Profile Overview" class="close">X</a>

<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">

<h2 class="textModalh2">Tom Carpenter</h2>

<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>

<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>

<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>

<h5>Kempsey Adventist School</h5>

</div>

</div>

</div>



<div class="row"> <!-- Format for alignment of the sideBar and main panels -->

<div class="main"> <!-- Main learning or collaborative workspace -->

<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->

</div>

<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->

<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->

</div>

</div>

<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->

<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->

<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->

</div>

</div>

</body>

</html>





Thanks, Tom






html css







share|improve this question




















  • 2




    codepen.io/deyand/pen/pvmyjw
    – Ramesh
    yesterday










  • Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
    – user10341225
    yesterday










  • Your snippet contains unrelated codes to your question. Please provide only the relevant code.
    – Ramesh
    yesterday















up vote
1
down vote

favorite
1












I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.






@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}





What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.



How would I go about this in code-wise?



If there are any previous tutorials like this, please attach.



Original Code attached:






/* Copyright (c) myEd (made by students, for students.) 2018. */



body { /* General Body Properties */

    font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

    margin: 0;

    overflow: hidden;

}



* { /* Key element to aligning <divs> (DO NOT REMOVE) */

    box-sizing: border-box;

}



#wrapper {

    bottom: 0;

    left: 0;

    overflow: hidden;

    position: absolute;

    right: 0;

    top: 0

}



.header { /* Header properties featuring myEd and school emblems */

    padding: 30px;

    text-align: center; /* Aligns links in the navBar */

    background-image: url(/Default/Img/backgroundHeader-4K.jpg);

    background-size: cover;

    background-repeat: no-repeat;

}



.myEd-reverse {

    width: 240px;

    height: 70px;

    float: left;

    margin-left: -60px;

    margin-top: -40px;

}



.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */

    overflow: hidden;

    background-color: #333;

    position: sticky;

    position: -webkit-sticky;

    top: 0;

    z-index: 100000;

}



.navBar a { /* Style the navBar links */

    float: left;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */

    float: right;

}



.navBar a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.navBar a.active { /* Active Link */

    background-color: #666;

    color: #fff;

}



.modalDialog { /* Modal Properties for all modals in myEd */

	position: fixed;

	font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: rgba(0,0,0,0.8);

	z-index: 99999;

	opacity:0;

	-webkit-transition: opacity 400ms ease-in;

	-moz-transition: opacity 400ms ease-in;

	transition: opacity 400ms ease-in;

	pointer-events: none;

}



.modalDialog:target { /* Modal Properties for all modals in myEd */

	opacity:1;

	pointer-events: auto;

}



.modalDialog > div { /* Modal Properties for all modals in myEd */

	width: 400px;

	position: relative;

	margin: 10% auto;

	padding: 5px 20px 13px 20px;

	border-radius: 10px;

	background: #d7d7d7;

	background: -moz-linear-gradient(#ddd, #666);

	background: -webkit-linear-gradient(#ddd, #666);

	background: -o-linear-gradient(#ddd, #666);

}



.close { /* Modal Properties for all modals in myEd */

	background: #606061;

	color: #FFFFFF;

	line-height: 10px;

	position: absolute;

	right: -5px;

	text-align: center;

	top: -10px;

	width: -5px;

	text-decoration: none;

	font-weight: bold;

	-webkit-border-radius: 12px;

	-moz-border-radius: 12px;

	border-radius: 12px;

	-moz-box-shadow: 1px 1px 3px #000;

	-webkit-box-shadow: 1px 1px 3px #000;

	box-shadow: 1px 1px 3px #000;

}



.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */



.textModalh2 { /* Text preferences of the modal box directed from the navBar */

    margin-top: 18px;

    margin-bottom: -15px;

}



.textModalh5 { /* Text preferences of the modal box directed from the navBar */

    margin-bottom: -15px;

}



.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */

    border-radius: 50%; 

    height: 130px; 

    width: 120px;

    float: left;

    margin-right: 40px;

    margin-top: 15px

}



.row { /* Alignment between sideBar and main */

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.sideBar { /* sideBar alignment properties */

    -ms-flex: 20%;

    flex: 20%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows myEd news to scroll */

    overflow: hidden;

    position: relative;

}



#newsmyEd {

    position: absolute;

    width: 100%;

    height: calc(100vh - 120px);

    top: 0;

    right: 0;

}



.main { /* Main Column */

    -ms-flex: 80%;

    flex: 80%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows embedded iFrame to scroll */

    position: relative;

    overflow: hidden;

}



.frameMain { /* Frame Properties */

    position: absolute;

    top: 0;

    left: 0;

    border: 0;

    height: calc(100vh - 120px);

}



.footer { /* Footer properties */

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #333;

}



.footer a { /* Footer navBar properties */

    float: right;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.footer a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.footer a.active { /* Active Link */

    background-color: #666;

    color: #fff;

} 



@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}

<!DOCTYPE HTML>

<!-- Copyright (c) myEd (made by students, for students.) 2018. -->

<html lang="en">

<head>

<title>Welcome | myEd</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">

</head>



<body>

<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding

</script>

<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->

<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->

<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->

</div> 

<div class="navBar"> <!-- Main sticky navBar with categories listed -->

<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->

<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->

<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->

<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->

<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->

<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->

<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->



<div id="modalQL" class="modalDialog">

<div>

<a href="#close" title="Close Quick Links" class="close">X</a>

<h3>Quick Links</h3>

<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>

<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>

<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>

<br>

<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>

</div>

</div>



<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->

<div id="modalPO" class="modalDialog">

<div>

<a href="#close" title="Close Profile Overview" class="close">X</a>

<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">

<h2 class="textModalh2">Tom Carpenter</h2>

<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>

<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>

<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>

<h5>Kempsey Adventist School</h5>

</div>

</div>

</div>



<div class="row"> <!-- Format for alignment of the sideBar and main panels -->

<div class="main"> <!-- Main learning or collaborative workspace -->

<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->

</div>

<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->

<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->

</div>

</div>

<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->

<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->

<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->

</div>

</div>

</body>

</html>





Thanks, Tom






html css







share|improve this question




















  • 2




    codepen.io/deyand/pen/pvmyjw
    – Ramesh
    yesterday










  • Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
    – user10341225
    yesterday










  • Your snippet contains unrelated codes to your question. Please provide only the relevant code.
    – Ramesh
    yesterday













up vote
1
down vote

favorite
1









up vote
1
down vote

favorite
1






1





I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.






@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}





What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.



How would I go about this in code-wise?



If there are any previous tutorials like this, please attach.



Original Code attached:






/* Copyright (c) myEd (made by students, for students.) 2018. */



body { /* General Body Properties */

    font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

    margin: 0;

    overflow: hidden;

}



* { /* Key element to aligning <divs> (DO NOT REMOVE) */

    box-sizing: border-box;

}



#wrapper {

    bottom: 0;

    left: 0;

    overflow: hidden;

    position: absolute;

    right: 0;

    top: 0

}



.header { /* Header properties featuring myEd and school emblems */

    padding: 30px;

    text-align: center; /* Aligns links in the navBar */

    background-image: url(/Default/Img/backgroundHeader-4K.jpg);

    background-size: cover;

    background-repeat: no-repeat;

}



.myEd-reverse {

    width: 240px;

    height: 70px;

    float: left;

    margin-left: -60px;

    margin-top: -40px;

}



.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */

    overflow: hidden;

    background-color: #333;

    position: sticky;

    position: -webkit-sticky;

    top: 0;

    z-index: 100000;

}



.navBar a { /* Style the navBar links */

    float: left;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */

    float: right;

}



.navBar a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.navBar a.active { /* Active Link */

    background-color: #666;

    color: #fff;

}



.modalDialog { /* Modal Properties for all modals in myEd */

	position: fixed;

	font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: rgba(0,0,0,0.8);

	z-index: 99999;

	opacity:0;

	-webkit-transition: opacity 400ms ease-in;

	-moz-transition: opacity 400ms ease-in;

	transition: opacity 400ms ease-in;

	pointer-events: none;

}



.modalDialog:target { /* Modal Properties for all modals in myEd */

	opacity:1;

	pointer-events: auto;

}



.modalDialog > div { /* Modal Properties for all modals in myEd */

	width: 400px;

	position: relative;

	margin: 10% auto;

	padding: 5px 20px 13px 20px;

	border-radius: 10px;

	background: #d7d7d7;

	background: -moz-linear-gradient(#ddd, #666);

	background: -webkit-linear-gradient(#ddd, #666);

	background: -o-linear-gradient(#ddd, #666);

}



.close { /* Modal Properties for all modals in myEd */

	background: #606061;

	color: #FFFFFF;

	line-height: 10px;

	position: absolute;

	right: -5px;

	text-align: center;

	top: -10px;

	width: -5px;

	text-decoration: none;

	font-weight: bold;

	-webkit-border-radius: 12px;

	-moz-border-radius: 12px;

	border-radius: 12px;

	-moz-box-shadow: 1px 1px 3px #000;

	-webkit-box-shadow: 1px 1px 3px #000;

	box-shadow: 1px 1px 3px #000;

}



.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */



.textModalh2 { /* Text preferences of the modal box directed from the navBar */

    margin-top: 18px;

    margin-bottom: -15px;

}



.textModalh5 { /* Text preferences of the modal box directed from the navBar */

    margin-bottom: -15px;

}



.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */

    border-radius: 50%; 

    height: 130px; 

    width: 120px;

    float: left;

    margin-right: 40px;

    margin-top: 15px

}



.row { /* Alignment between sideBar and main */

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.sideBar { /* sideBar alignment properties */

    -ms-flex: 20%;

    flex: 20%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows myEd news to scroll */

    overflow: hidden;

    position: relative;

}



#newsmyEd {

    position: absolute;

    width: 100%;

    height: calc(100vh - 120px);

    top: 0;

    right: 0;

}



.main { /* Main Column */

    -ms-flex: 80%;

    flex: 80%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows embedded iFrame to scroll */

    position: relative;

    overflow: hidden;

}



.frameMain { /* Frame Properties */

    position: absolute;

    top: 0;

    left: 0;

    border: 0;

    height: calc(100vh - 120px);

}



.footer { /* Footer properties */

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #333;

}



.footer a { /* Footer navBar properties */

    float: right;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.footer a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.footer a.active { /* Active Link */

    background-color: #666;

    color: #fff;

} 



@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}

<!DOCTYPE HTML>

<!-- Copyright (c) myEd (made by students, for students.) 2018. -->

<html lang="en">

<head>

<title>Welcome | myEd</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">

</head>



<body>

<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding

</script>

<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->

<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->

<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->

</div> 

<div class="navBar"> <!-- Main sticky navBar with categories listed -->

<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->

<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->

<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->

<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->

<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->

<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->

<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->



<div id="modalQL" class="modalDialog">

<div>

<a href="#close" title="Close Quick Links" class="close">X</a>

<h3>Quick Links</h3>

<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>

<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>

<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>

<br>

<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>

</div>

</div>



<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->

<div id="modalPO" class="modalDialog">

<div>

<a href="#close" title="Close Profile Overview" class="close">X</a>

<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">

<h2 class="textModalh2">Tom Carpenter</h2>

<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>

<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>

<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>

<h5>Kempsey Adventist School</h5>

</div>

</div>

</div>



<div class="row"> <!-- Format for alignment of the sideBar and main panels -->

<div class="main"> <!-- Main learning or collaborative workspace -->

<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->

</div>

<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->

<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->

</div>

</div>

<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->

<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->

<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->

</div>

</div>

</body>

</html>





Thanks, Tom






html css







share|improve this question















I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.






@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}





What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.



How would I go about this in code-wise?



If there are any previous tutorials like this, please attach.



Original Code attached:






/* Copyright (c) myEd (made by students, for students.) 2018. */



body { /* General Body Properties */

    font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

    margin: 0;

    overflow: hidden;

}



* { /* Key element to aligning <divs> (DO NOT REMOVE) */

    box-sizing: border-box;

}



#wrapper {

    bottom: 0;

    left: 0;

    overflow: hidden;

    position: absolute;

    right: 0;

    top: 0

}



.header { /* Header properties featuring myEd and school emblems */

    padding: 30px;

    text-align: center; /* Aligns links in the navBar */

    background-image: url(/Default/Img/backgroundHeader-4K.jpg);

    background-size: cover;

    background-repeat: no-repeat;

}



.myEd-reverse {

    width: 240px;

    height: 70px;

    float: left;

    margin-left: -60px;

    margin-top: -40px;

}



.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */

    overflow: hidden;

    background-color: #333;

    position: sticky;

    position: -webkit-sticky;

    top: 0;

    z-index: 100000;

}



.navBar a { /* Style the navBar links */

    float: left;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */

    float: right;

}



.navBar a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.navBar a.active { /* Active Link */

    background-color: #666;

    color: #fff;

}



.modalDialog { /* Modal Properties for all modals in myEd */

	position: fixed;

	font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: rgba(0,0,0,0.8);

	z-index: 99999;

	opacity:0;

	-webkit-transition: opacity 400ms ease-in;

	-moz-transition: opacity 400ms ease-in;

	transition: opacity 400ms ease-in;

	pointer-events: none;

}



.modalDialog:target { /* Modal Properties for all modals in myEd */

	opacity:1;

	pointer-events: auto;

}



.modalDialog > div { /* Modal Properties for all modals in myEd */

	width: 400px;

	position: relative;

	margin: 10% auto;

	padding: 5px 20px 13px 20px;

	border-radius: 10px;

	background: #d7d7d7;

	background: -moz-linear-gradient(#ddd, #666);

	background: -webkit-linear-gradient(#ddd, #666);

	background: -o-linear-gradient(#ddd, #666);

}



.close { /* Modal Properties for all modals in myEd */

	background: #606061;

	color: #FFFFFF;

	line-height: 10px;

	position: absolute;

	right: -5px;

	text-align: center;

	top: -10px;

	width: -5px;

	text-decoration: none;

	font-weight: bold;

	-webkit-border-radius: 12px;

	-moz-border-radius: 12px;

	border-radius: 12px;

	-moz-box-shadow: 1px 1px 3px #000;

	-webkit-box-shadow: 1px 1px 3px #000;

	box-shadow: 1px 1px 3px #000;

}



.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */



.textModalh2 { /* Text preferences of the modal box directed from the navBar */

    margin-top: 18px;

    margin-bottom: -15px;

}



.textModalh5 { /* Text preferences of the modal box directed from the navBar */

    margin-bottom: -15px;

}



.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */

    border-radius: 50%; 

    height: 130px; 

    width: 120px;

    float: left;

    margin-right: 40px;

    margin-top: 15px

}



.row { /* Alignment between sideBar and main */

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.sideBar { /* sideBar alignment properties */

    -ms-flex: 20%;

    flex: 20%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows myEd news to scroll */

    overflow: hidden;

    position: relative;

}



#newsmyEd {

    position: absolute;

    width: 100%;

    height: calc(100vh - 120px);

    top: 0;

    right: 0;

}



.main { /* Main Column */

    -ms-flex: 80%;

    flex: 80%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows embedded iFrame to scroll */

    position: relative;

    overflow: hidden;

}



.frameMain { /* Frame Properties */

    position: absolute;

    top: 0;

    left: 0;

    border: 0;

    height: calc(100vh - 120px);

}



.footer { /* Footer properties */

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #333;

}



.footer a { /* Footer navBar properties */

    float: right;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.footer a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.footer a.active { /* Active Link */

    background-color: #666;

    color: #fff;

} 



@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}

<!DOCTYPE HTML>

<!-- Copyright (c) myEd (made by students, for students.) 2018. -->

<html lang="en">

<head>

<title>Welcome | myEd</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">

</head>



<body>

<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding

</script>

<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->

<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->

<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->

</div> 

<div class="navBar"> <!-- Main sticky navBar with categories listed -->

<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->

<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->

<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->

<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->

<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->

<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->

<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->



<div id="modalQL" class="modalDialog">

<div>

<a href="#close" title="Close Quick Links" class="close">X</a>

<h3>Quick Links</h3>

<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>

<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>

<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>

<br>

<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>

</div>

</div>



<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->

<div id="modalPO" class="modalDialog">

<div>

<a href="#close" title="Close Profile Overview" class="close">X</a>

<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">

<h2 class="textModalh2">Tom Carpenter</h2>

<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>

<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>

<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>

<h5>Kempsey Adventist School</h5>

</div>

</div>

</div>



<div class="row"> <!-- Format for alignment of the sideBar and main panels -->

<div class="main"> <!-- Main learning or collaborative workspace -->

<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->

</div>

<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->

<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->

</div>

</div>

<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->

<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->

<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->

</div>

</div>

</body>

</html>





Thanks, Tom






@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}





@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}





/* Copyright (c) myEd (made by students, for students.) 2018. */



body { /* General Body Properties */

    font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

    margin: 0;

    overflow: hidden;

}



* { /* Key element to aligning <divs> (DO NOT REMOVE) */

    box-sizing: border-box;

}



#wrapper {

    bottom: 0;

    left: 0;

    overflow: hidden;

    position: absolute;

    right: 0;

    top: 0

}



.header { /* Header properties featuring myEd and school emblems */

    padding: 30px;

    text-align: center; /* Aligns links in the navBar */

    background-image: url(/Default/Img/backgroundHeader-4K.jpg);

    background-size: cover;

    background-repeat: no-repeat;

}



.myEd-reverse {

    width: 240px;

    height: 70px;

    float: left;

    margin-left: -60px;

    margin-top: -40px;

}



.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */

    overflow: hidden;

    background-color: #333;

    position: sticky;

    position: -webkit-sticky;

    top: 0;

    z-index: 100000;

}



.navBar a { /* Style the navBar links */

    float: left;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */

    float: right;

}



.navBar a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.navBar a.active { /* Active Link */

    background-color: #666;

    color: #fff;

}



.modalDialog { /* Modal Properties for all modals in myEd */

	position: fixed;

	font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: rgba(0,0,0,0.8);

	z-index: 99999;

	opacity:0;

	-webkit-transition: opacity 400ms ease-in;

	-moz-transition: opacity 400ms ease-in;

	transition: opacity 400ms ease-in;

	pointer-events: none;

}



.modalDialog:target { /* Modal Properties for all modals in myEd */

	opacity:1;

	pointer-events: auto;

}



.modalDialog > div { /* Modal Properties for all modals in myEd */

	width: 400px;

	position: relative;

	margin: 10% auto;

	padding: 5px 20px 13px 20px;

	border-radius: 10px;

	background: #d7d7d7;

	background: -moz-linear-gradient(#ddd, #666);

	background: -webkit-linear-gradient(#ddd, #666);

	background: -o-linear-gradient(#ddd, #666);

}



.close { /* Modal Properties for all modals in myEd */

	background: #606061;

	color: #FFFFFF;

	line-height: 10px;

	position: absolute;

	right: -5px;

	text-align: center;

	top: -10px;

	width: -5px;

	text-decoration: none;

	font-weight: bold;

	-webkit-border-radius: 12px;

	-moz-border-radius: 12px;

	border-radius: 12px;

	-moz-box-shadow: 1px 1px 3px #000;

	-webkit-box-shadow: 1px 1px 3px #000;

	box-shadow: 1px 1px 3px #000;

}



.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */



.textModalh2 { /* Text preferences of the modal box directed from the navBar */

    margin-top: 18px;

    margin-bottom: -15px;

}



.textModalh5 { /* Text preferences of the modal box directed from the navBar */

    margin-bottom: -15px;

}



.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */

    border-radius: 50%; 

    height: 130px; 

    width: 120px;

    float: left;

    margin-right: 40px;

    margin-top: 15px

}



.row { /* Alignment between sideBar and main */

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.sideBar { /* sideBar alignment properties */

    -ms-flex: 20%;

    flex: 20%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows myEd news to scroll */

    overflow: hidden;

    position: relative;

}



#newsmyEd {

    position: absolute;

    width: 100%;

    height: calc(100vh - 120px);

    top: 0;

    right: 0;

}



.main { /* Main Column */

    -ms-flex: 80%;

    flex: 80%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows embedded iFrame to scroll */

    position: relative;

    overflow: hidden;

}



.frameMain { /* Frame Properties */

    position: absolute;

    top: 0;

    left: 0;

    border: 0;

    height: calc(100vh - 120px);

}



.footer { /* Footer properties */

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #333;

}



.footer a { /* Footer navBar properties */

    float: right;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.footer a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.footer a.active { /* Active Link */

    background-color: #666;

    color: #fff;

} 



@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}

<!DOCTYPE HTML>

<!-- Copyright (c) myEd (made by students, for students.) 2018. -->

<html lang="en">

<head>

<title>Welcome | myEd</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">

</head>



<body>

<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding

</script>

<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->

<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->

<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->

</div> 

<div class="navBar"> <!-- Main sticky navBar with categories listed -->

<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->

<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->

<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->

<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->

<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->

<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->

<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->



<div id="modalQL" class="modalDialog">

<div>

<a href="#close" title="Close Quick Links" class="close">X</a>

<h3>Quick Links</h3>

<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>

<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>

<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>

<br>

<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>

</div>

</div>



<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->

<div id="modalPO" class="modalDialog">

<div>

<a href="#close" title="Close Profile Overview" class="close">X</a>

<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">

<h2 class="textModalh2">Tom Carpenter</h2>

<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>

<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>

<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>

<h5>Kempsey Adventist School</h5>

</div>

</div>

</div>



<div class="row"> <!-- Format for alignment of the sideBar and main panels -->

<div class="main"> <!-- Main learning or collaborative workspace -->

<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->

</div>

<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->

<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->

</div>

</div>

<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->

<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->

<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->

</div>

</div>

</body>

</html>





/* Copyright (c) myEd (made by students, for students.) 2018. */



body { /* General Body Properties */

    font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

    margin: 0;

    overflow: hidden;

}



* { /* Key element to aligning <divs> (DO NOT REMOVE) */

    box-sizing: border-box;

}



#wrapper {

    bottom: 0;

    left: 0;

    overflow: hidden;

    position: absolute;

    right: 0;

    top: 0

}



.header { /* Header properties featuring myEd and school emblems */

    padding: 30px;

    text-align: center; /* Aligns links in the navBar */

    background-image: url(/Default/Img/backgroundHeader-4K.jpg);

    background-size: cover;

    background-repeat: no-repeat;

}



.myEd-reverse {

    width: 240px;

    height: 70px;

    float: left;

    margin-left: -60px;

    margin-top: -40px;

}



.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */

    overflow: hidden;

    background-color: #333;

    position: sticky;

    position: -webkit-sticky;

    top: 0;

    z-index: 100000;

}



.navBar a { /* Style the navBar links */

    float: left;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */

    float: right;

}



.navBar a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.navBar a.active { /* Active Link */

    background-color: #666;

    color: #fff;

}



.modalDialog { /* Modal Properties for all modals in myEd */

	position: fixed;

	font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: rgba(0,0,0,0.8);

	z-index: 99999;

	opacity:0;

	-webkit-transition: opacity 400ms ease-in;

	-moz-transition: opacity 400ms ease-in;

	transition: opacity 400ms ease-in;

	pointer-events: none;

}



.modalDialog:target { /* Modal Properties for all modals in myEd */

	opacity:1;

	pointer-events: auto;

}



.modalDialog > div { /* Modal Properties for all modals in myEd */

	width: 400px;

	position: relative;

	margin: 10% auto;

	padding: 5px 20px 13px 20px;

	border-radius: 10px;

	background: #d7d7d7;

	background: -moz-linear-gradient(#ddd, #666);

	background: -webkit-linear-gradient(#ddd, #666);

	background: -o-linear-gradient(#ddd, #666);

}



.close { /* Modal Properties for all modals in myEd */

	background: #606061;

	color: #FFFFFF;

	line-height: 10px;

	position: absolute;

	right: -5px;

	text-align: center;

	top: -10px;

	width: -5px;

	text-decoration: none;

	font-weight: bold;

	-webkit-border-radius: 12px;

	-moz-border-radius: 12px;

	border-radius: 12px;

	-moz-box-shadow: 1px 1px 3px #000;

	-webkit-box-shadow: 1px 1px 3px #000;

	box-shadow: 1px 1px 3px #000;

}



.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */



.textModalh2 { /* Text preferences of the modal box directed from the navBar */

    margin-top: 18px;

    margin-bottom: -15px;

}



.textModalh5 { /* Text preferences of the modal box directed from the navBar */

    margin-bottom: -15px;

}



.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */

    border-radius: 50%; 

    height: 130px; 

    width: 120px;

    float: left;

    margin-right: 40px;

    margin-top: 15px

}



.row { /* Alignment between sideBar and main */

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.sideBar { /* sideBar alignment properties */

    -ms-flex: 20%;

    flex: 20%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows myEd news to scroll */

    overflow: hidden;

    position: relative;

}



#newsmyEd {

    position: absolute;

    width: 100%;

    height: calc(100vh - 120px);

    top: 0;

    right: 0;

}



.main { /* Main Column */

    -ms-flex: 80%;

    flex: 80%;

    background-color: #a7a7a7;

    padding: 0px;

    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */

    overflow-y: scroll; /* Allows embedded iFrame to scroll */

    position: relative;

    overflow: hidden;

}



.frameMain { /* Frame Properties */

    position: absolute;

    top: 0;

    left: 0;

    border: 0;

    height: calc(100vh - 120px);

}



.footer { /* Footer properties */

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #333;

}



.footer a { /* Footer navBar properties */

    float: right;

    display: block;

    color: #fff;

    text-align: center;

    padding: 6px 12px;

    text-decoration: none;

}



.footer a:hover { /* Change color on hover */

    background-color: #ddd;

    color: #000;

}



.footer a.active { /* Active Link */

    background-color: #666;

    color: #fff;

} 



@media (max-width: 768px) {

    .sideBar {

        display: none !important;

    }

}

<!DOCTYPE HTML>

<!-- Copyright (c) myEd (made by students, for students.) 2018. -->

<html lang="en">

<head>

<title>Welcome | myEd</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">

</head>



<body>

<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding

</script>

<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->

<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->

<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->

</div> 

<div class="navBar"> <!-- Main sticky navBar with categories listed -->

<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->

<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->

<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->

<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->

<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->

<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->

<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->



<div id="modalQL" class="modalDialog">

<div>

<a href="#close" title="Close Quick Links" class="close">X</a>

<h3>Quick Links</h3>

<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>

<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>

<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>

<br>

<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>

</div>

</div>



<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->

<div id="modalPO" class="modalDialog">

<div>

<a href="#close" title="Close Profile Overview" class="close">X</a>

<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">

<h2 class="textModalh2">Tom Carpenter</h2>

<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>

<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>

<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>

<h5>Kempsey Adventist School</h5>

</div>

</div>

</div>



<div class="row"> <!-- Format for alignment of the sideBar and main panels -->

<div class="main"> <!-- Main learning or collaborative workspace -->

<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->

</div>

<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->

<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->

</div>

</div>

<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->

<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->

<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->

</div>

</div>

</body>

</html>





html css




html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 22 hours ago









Ramesh

1,226319




1,226319










asked yesterday









user10341225

316




316








  • 2




    codepen.io/deyand/pen/pvmyjw
    – Ramesh
    yesterday










  • Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
    – user10341225
    yesterday










  • Your snippet contains unrelated codes to your question. Please provide only the relevant code.
    – Ramesh
    yesterday














  • 2




    codepen.io/deyand/pen/pvmyjw
    – Ramesh
    yesterday










  • Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
    – user10341225
    yesterday










  • Your snippet contains unrelated codes to your question. Please provide only the relevant code.
    – Ramesh
    yesterday








2




2




codepen.io/deyand/pen/pvmyjw
– Ramesh
yesterday




codepen.io/deyand/pen/pvmyjw
– Ramesh
yesterday












Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
– user10341225
yesterday




Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
– user10341225
yesterday












Your snippet contains unrelated codes to your question. Please provide only the relevant code.
– Ramesh
yesterday




Your snippet contains unrelated codes to your question. Please provide only the relevant code.
– Ramesh
yesterday












1 Answer
1






active

oldest

votes

















up vote
1
down vote













I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.



Here is the codepen






$(document).ready(function() {

  $('.mobile-menu-icon i.open').click(function() {

    $('.sidebar-wrapper').fadeIn();

    $(this).hide();

    $('.mobile-menu-icon i.close').fadeIn();

  });



  $('.mobile-menu-icon i.close').click(function() {

    $('.sidebar-wrapper').fadeOut();

    $(this).hide();

    $('.mobile-menu-icon i.open').fadeIn();

  });

});

.mobile-menu-icon i.close {

  display: none;

}



@media (min-width:768px) {

  .mobile-menu-icon {

    display: none;

  }

}



@media (max-width:767px) {

  .mobile-menu-icon {

    display: block;

  }

  .sidebar-wrapper {

    display: none;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="sideBar">

  <!-- sideBar featuring Profile, myEd News and directory -->

  <div class="mobile-menu-icon">

    <i class="fa fa-bars open" aria-hidden="true"></i>

    <i class="fa fa-times close" aria-hidden="true"></i>

  </div>

  <div class="sidebar-wrapper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"

      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

    <!-- myEd News -->

  </div>

</div>








share|improve this answer





















  • Thanks, the hamburger icon doesn't appear when I test run the website.
    – user10341225
    23 hours ago










  • Do you need to add a z-index to show the hamburger icon.
    – user10341225
    23 hours ago






  • 1




    @user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
    – Ramesh
    22 hours ago










  • Ok thanks for that
    – user10341225
    22 hours ago










  • Happy to help, If it's working for you mark this answer as a correct one
    – Ramesh
    22 hours ago











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372658%2ftoggle-sidebariframe-using-media-queries%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
1
down vote













I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.



Here is the codepen






$(document).ready(function() {

  $('.mobile-menu-icon i.open').click(function() {

    $('.sidebar-wrapper').fadeIn();

    $(this).hide();

    $('.mobile-menu-icon i.close').fadeIn();

  });



  $('.mobile-menu-icon i.close').click(function() {

    $('.sidebar-wrapper').fadeOut();

    $(this).hide();

    $('.mobile-menu-icon i.open').fadeIn();

  });

});

.mobile-menu-icon i.close {

  display: none;

}



@media (min-width:768px) {

  .mobile-menu-icon {

    display: none;

  }

}



@media (max-width:767px) {

  .mobile-menu-icon {

    display: block;

  }

  .sidebar-wrapper {

    display: none;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="sideBar">

  <!-- sideBar featuring Profile, myEd News and directory -->

  <div class="mobile-menu-icon">

    <i class="fa fa-bars open" aria-hidden="true"></i>

    <i class="fa fa-times close" aria-hidden="true"></i>

  </div>

  <div class="sidebar-wrapper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"

      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

    <!-- myEd News -->

  </div>

</div>








share|improve this answer





















  • Thanks, the hamburger icon doesn't appear when I test run the website.
    – user10341225
    23 hours ago










  • Do you need to add a z-index to show the hamburger icon.
    – user10341225
    23 hours ago






  • 1




    @user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
    – Ramesh
    22 hours ago










  • Ok thanks for that
    – user10341225
    22 hours ago










  • Happy to help, If it's working for you mark this answer as a correct one
    – Ramesh
    22 hours ago















up vote
1
down vote













I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.



Here is the codepen






$(document).ready(function() {

  $('.mobile-menu-icon i.open').click(function() {

    $('.sidebar-wrapper').fadeIn();

    $(this).hide();

    $('.mobile-menu-icon i.close').fadeIn();

  });



  $('.mobile-menu-icon i.close').click(function() {

    $('.sidebar-wrapper').fadeOut();

    $(this).hide();

    $('.mobile-menu-icon i.open').fadeIn();

  });

});

.mobile-menu-icon i.close {

  display: none;

}



@media (min-width:768px) {

  .mobile-menu-icon {

    display: none;

  }

}



@media (max-width:767px) {

  .mobile-menu-icon {

    display: block;

  }

  .sidebar-wrapper {

    display: none;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="sideBar">

  <!-- sideBar featuring Profile, myEd News and directory -->

  <div class="mobile-menu-icon">

    <i class="fa fa-bars open" aria-hidden="true"></i>

    <i class="fa fa-times close" aria-hidden="true"></i>

  </div>

  <div class="sidebar-wrapper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"

      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

    <!-- myEd News -->

  </div>

</div>








share|improve this answer





















  • Thanks, the hamburger icon doesn't appear when I test run the website.
    – user10341225
    23 hours ago










  • Do you need to add a z-index to show the hamburger icon.
    – user10341225
    23 hours ago






  • 1




    @user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
    – Ramesh
    22 hours ago










  • Ok thanks for that
    – user10341225
    22 hours ago










  • Happy to help, If it's working for you mark this answer as a correct one
    – Ramesh
    22 hours ago













up vote
1
down vote










up vote
1
down vote









I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.



Here is the codepen






$(document).ready(function() {

  $('.mobile-menu-icon i.open').click(function() {

    $('.sidebar-wrapper').fadeIn();

    $(this).hide();

    $('.mobile-menu-icon i.close').fadeIn();

  });



  $('.mobile-menu-icon i.close').click(function() {

    $('.sidebar-wrapper').fadeOut();

    $(this).hide();

    $('.mobile-menu-icon i.open').fadeIn();

  });

});

.mobile-menu-icon i.close {

  display: none;

}



@media (min-width:768px) {

  .mobile-menu-icon {

    display: none;

  }

}



@media (max-width:767px) {

  .mobile-menu-icon {

    display: block;

  }

  .sidebar-wrapper {

    display: none;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="sideBar">

  <!-- sideBar featuring Profile, myEd News and directory -->

  <div class="mobile-menu-icon">

    <i class="fa fa-bars open" aria-hidden="true"></i>

    <i class="fa fa-times close" aria-hidden="true"></i>

  </div>

  <div class="sidebar-wrapper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"

      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

    <!-- myEd News -->

  </div>

</div>








share|improve this answer












I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.



Here is the codepen






$(document).ready(function() {

  $('.mobile-menu-icon i.open').click(function() {

    $('.sidebar-wrapper').fadeIn();

    $(this).hide();

    $('.mobile-menu-icon i.close').fadeIn();

  });



  $('.mobile-menu-icon i.close').click(function() {

    $('.sidebar-wrapper').fadeOut();

    $(this).hide();

    $('.mobile-menu-icon i.open').fadeIn();

  });

});

.mobile-menu-icon i.close {

  display: none;

}



@media (min-width:768px) {

  .mobile-menu-icon {

    display: none;

  }

}



@media (max-width:767px) {

  .mobile-menu-icon {

    display: block;

  }

  .sidebar-wrapper {

    display: none;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="sideBar">

  <!-- sideBar featuring Profile, myEd News and directory -->

  <div class="mobile-menu-icon">

    <i class="fa fa-bars open" aria-hidden="true"></i>

    <i class="fa fa-times close" aria-hidden="true"></i>

  </div>

  <div class="sidebar-wrapper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"

      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

    <!-- myEd News -->

  </div>

</div>








$(document).ready(function() {

  $('.mobile-menu-icon i.open').click(function() {

    $('.sidebar-wrapper').fadeIn();

    $(this).hide();

    $('.mobile-menu-icon i.close').fadeIn();

  });



  $('.mobile-menu-icon i.close').click(function() {

    $('.sidebar-wrapper').fadeOut();

    $(this).hide();

    $('.mobile-menu-icon i.open').fadeIn();

  });

});

.mobile-menu-icon i.close {

  display: none;

}



@media (min-width:768px) {

  .mobile-menu-icon {

    display: none;

  }

}



@media (max-width:767px) {

  .mobile-menu-icon {

    display: block;

  }

  .sidebar-wrapper {

    display: none;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="sideBar">

  <!-- sideBar featuring Profile, myEd News and directory -->

  <div class="mobile-menu-icon">

    <i class="fa fa-bars open" aria-hidden="true"></i>

    <i class="fa fa-times close" aria-hidden="true"></i>

  </div>

  <div class="sidebar-wrapper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"

      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

    <!-- myEd News -->

  </div>

</div>





$(document).ready(function() {

  $('.mobile-menu-icon i.open').click(function() {

    $('.sidebar-wrapper').fadeIn();

    $(this).hide();

    $('.mobile-menu-icon i.close').fadeIn();

  });



  $('.mobile-menu-icon i.close').click(function() {

    $('.sidebar-wrapper').fadeOut();

    $(this).hide();

    $('.mobile-menu-icon i.open').fadeIn();

  });

});

.mobile-menu-icon i.close {

  display: none;

}



@media (min-width:768px) {

  .mobile-menu-icon {

    display: none;

  }

}



@media (max-width:767px) {

  .mobile-menu-icon {

    display: block;

  }

  .sidebar-wrapper {

    display: none;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="sideBar">

  <!-- sideBar featuring Profile, myEd News and directory -->

  <div class="mobile-menu-icon">

    <i class="fa fa-bars open" aria-hidden="true"></i>

    <i class="fa fa-times close" aria-hidden="true"></i>

  </div>

  <div class="sidebar-wrapper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"

      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

    <!-- myEd News -->

  </div>

</div>






share|improve this answer












share|improve this answer



share|improve this answer










answered yesterday









Ramesh

1,226319




1,226319












  • Thanks, the hamburger icon doesn't appear when I test run the website.
    – user10341225
    23 hours ago










  • Do you need to add a z-index to show the hamburger icon.
    – user10341225
    23 hours ago






  • 1




    @user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
    – Ramesh
    22 hours ago










  • Ok thanks for that
    – user10341225
    22 hours ago










  • Happy to help, If it's working for you mark this answer as a correct one
    – Ramesh
    22 hours ago


















  • Thanks, the hamburger icon doesn't appear when I test run the website.
    – user10341225
    23 hours ago










  • Do you need to add a z-index to show the hamburger icon.
    – user10341225
    23 hours ago






  • 1




    @user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
    – Ramesh
    22 hours ago










  • Ok thanks for that
    – user10341225
    22 hours ago










  • Happy to help, If it's working for you mark this answer as a correct one
    – Ramesh
    22 hours ago
















Thanks, the hamburger icon doesn't appear when I test run the website.
– user10341225
23 hours ago




Thanks, the hamburger icon doesn't appear when I test run the website.
– user10341225
23 hours ago












Do you need to add a z-index to show the hamburger icon.
– user10341225
23 hours ago




Do you need to add a z-index to show the hamburger icon.
– user10341225
23 hours ago




1




1




@user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
– Ramesh
22 hours ago




@user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
– Ramesh
22 hours ago












Ok thanks for that
– user10341225
22 hours ago




Ok thanks for that
– user10341225
22 hours ago












Happy to help, If it's working for you mark this answer as a correct one
– Ramesh
22 hours ago




Happy to help, If it's working for you mark this answer as a correct one
– Ramesh
22 hours ago


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372658%2ftoggle-sidebariframe-using-media-queries%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

'app-layout' is not a known element: how to share Component with different Modules

Image
0 My application was working fine until I decided to go with lazy loading: So, my shared component looks like this: import { Component, Renderer2 } from '@angular/core'; export interface FormModel { captcha?: string; } @Component({ selector: 'app-layout', templateUrl: './app-layout.component.html', styleUrls: ['./app-layout.css'] }) export class FullLayoutComponent { } app-layout.component.ts I am using this component in my Another component say school-home.component.html like this: <app-layout> </app-layout> and it was working fine until I created a Module school-home.module.ts like this: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SchoolhomeRoutingModule ...
Read more

android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 This is a simple project showing cubes on Unity, exported to android project and imported on Android studio. On maifest file it showed following warning: Expecting <uses-feature android:name="android.software.leanback" android:required="false" /> tag I have no information about it. And also on default emptyview android project does not use/mention this feature. I know it is required by TV's and such but why its not added by default? Why is this? And Should I concern about it? android unity3d ...
Read more

WPF add header to Image with URL pettitions [duplicate]

Image
up vote 0 down vote favorite This question already has an answer here: Image source URI requiring authorization 3 answers Add header to all* HTTP requests on a machine 1 answer first of all sorry for my english. Recently I added some security in the backend of my project, and now I need to send a validation code(apiKey) inside the headers to retrieve the images. I have a problem with ALL images in my project that I had attached in my UI. For example, before I had: <Image Height="90" Source="{Binding Video.Thumbnail}"/> Now I need to change my code to create a CUSTOM petition add the apiKey in the header:...
Read more