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

Can a sorcerer learn a 5th-level spell early by creating spell slots using the Font of Magic feature?

Image
28 6 $begingroup$ Per the Font of Magic feature, sorcerer can use Flexible Casting to create 5th-level spell slots at level 7, even though they are not typically available until level 9. You can transform unexpended sorcery points into one spell slot as a bonus action on your turn. The Creating Spell Slots table shows the cost of creating a spell slot of [5th level is 7] If such a sorcerer levels up while still having this 5th-level spell slot, can they choose a 5th-level spell as the spell they gain upon levelling up? The Spellcasting feature states: Additionally, when you gain a level in this class, you can choose one of the sorcerer spells you know and replace it with another spell from the sorcerer spell list, which also must be of a level for which you have spell slots.
Read more

Does disintegrating a polymorphed enemy still kill it after the 2018 errata?

Image
up vote 13 down vote favorite 1 After the 2018 errata, the disintegrate spell description now reads: A creature targeted by this spell must make a Dexterity saving throw. On a failed save, the target takes 10d6 + 40 force damage. The target is disintegrated if this damage leaves it with 0 hit points. If you were to polymorph an enemy into a rat and then disintegrate it, would the enemy be disintegrated or would it just return to its original form? I know that for Druids, it’s not an instant kill anymore, but is this the case for polymorph as well? dnd-5e spells polymorph errata share | improve this question edited 18 hours ago
Read more

A Topological Invariant for $pi_3(U(n))$

Image
3 3 $begingroup$ Recently, I saw a construction of topological invariant for $pi_3(U(n))$ with $ngeq 2$ : $$ N=frac{1}{24pi^2}int_{S^3} d^3x epsilon^{ijk} Tr[(U^{-1}partial_{x_i}U)(U^{-1}partial_{x_j}U)(U^{-1}partial_{x_k}U)] , $$ where $Uin U(n)$ depends on $boldsymbol{x}=(x_1,x_2,x_3)in S^3$ , $epsilon^{ijk}$ is the Levi-Civita symbol, $i,j,k=1,2,3$ , and the duplicated indexes are summed over. It is claimed that $N$ is an integer, but why? Update 02/02/2019 I think I got an argument for $n=2$ . In this case, $U=e^{i varphi} q$ with $qin SU(2)$ . Due to the trace and the Levi-Civita symbol in $N$ , $varphi$ does not contribute to $N$ . As $Tr[q^{dagger}partial_i q]=0$ and $(q^{dagger}partial_i q)^{dagger}=-q^{dagger}partial_i q$ , $q^{dagger}partial_i q$ in geneeral has the form $q^{dagger}partia
Read more