I have a hamburger toggled menu using (short) videos as menu options. The css code was written through sass so I will include both the scss and the corresponding css code.
https://frysling.netlify.app/
All these menu options should have functioning links and a hover effect removing the black #000 overlay with a hover effect, setting the opacity of the overlay div to 0.
However, only the first (1/4) and the last (4/4) menu option have the hover effect and functioning links. The links go nowhere atm but the pointer cursor is showing on those two .footer-content divs.
I've tried rewriting the 2nd and 3rd .footer-content HTML divs to be, content aside, the same code as the functioning first and fourth div. I've also tried splitting up the classes into .footer-content-1 till four, nothing changed.
Here is the html code, i've tried to be descriptive in the comments. Forgive me for posting the entire code, I'm just not sure what detail could cause the problem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Lora&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Frysling | De Noorderlijkse Wijngaard</title>
</head>
<body>
<!-- Logo & shopping cart -->
<img src="img/logo.png" alt="" id="logo" />
<a href="#"
><img src="img/shopping-cart.png" alt="" id="shopping-cart"
/></a>
<!-- Hamburger Menu -->
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<!-- Menu Content Grid -->
<div class="footer-grid">
<!-- About/Over Ons -->
<div class="footer-content">
<div class="menu-video-wrap">
<video
src="img/menu_vid_overons.mov"
muted
preload
autoplay
loop="yes"
></video>
<div class="vid-text">
<a href="#"
><h1>Over Ons</h1>
<h5>Historie en filosofie</h5></a
>
</div>
<div class="menu-overlay"></div>
</div>
</div>
<!-- Our Vineyard / Onze Wijngaard -->
<div class="footer-content">
<div class="menu-video-wrap">
<video
src="img/menu_vid_wijngaard.mp4"
muted
preload
autoplay
loop="yes"
></video>
<div class="vid-text">
<a href="#"
><h1>Onze Wijngaard</h1>
<h5>Proeverijen, evenementen en vrijwilligers</h5></a
>
</div>
<div class="menu-overlay"></div>
</div>
</div>
<!-- Wines / Wijnen -->
<div class="footer-content">
<div class="menu-video-wrap">
<video
src="img/menu_vid_wijnen.mp4"
muted
preload
autoplay
loop="yes"
></video>
<div class="vid-text">
<a href="#"
><h1>Wijnen</h1>
<h5>Stille en mousserende wijnen</h5></a
>
</div>
<div class="menu-overlay"></div>
</div>
</div>
<!-- Contact -->
<div class="footer-content">
<div class="menu-video-wrap">
<video
src="img/menu_vid_contact.mp4"
autoplay
loop="yes"
muted
preload
></video>
<div class="vid-text">
<a href="#"
><h1>
Contact
</h1>
<h5>Neem contact op</h5>
</a>
</div>
<div class="menu-overlay"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Showcase Hero -->
<header id="showcase">
<div class="showcase-overlay"></div>
<div class="container showcase-container">
<h1>Wijngaard de Frysling</h1>
<p>De Noorderlijkste Wijngaard van Nederland</p>
</div>
</header>
</body>
</html>
Here is the css, below I will also post the scss which appears more readable:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul {
list-style: none;
}
body {
font-family: "Lora", sans-serif;
}
.container {
max-width: 960px;
margin: auto;
overflow: hidden;
padding: 0 3rem;
}
#logo {
width: 150px;
margin-top: 1rem;
margin-left: 3rem;
position: absolute;
z-index: 1;
}
#shopping-cart {
margin-top: 0.5rem;
position: absolute;
right: 6%;
width: 40px;
z-index: 1;
}
.menu-wrap {
position: absolute;
top: 0;
right: 5%;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.menu-wrap .hamburger > div {
position: relative;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 100%;
height: 2.5px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.menu-wrap .hamburger > div::before, .menu-wrap .hamburger > div::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2.5px;
background: inherit;
}
.menu-wrap .hamburger > div::after {
top: 10px;
}
.menu-wrap .menu {
position: fixed;
left: 0;
width: 100%;
overflow: hidden;
visibility: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
bottom: 0;
}
.menu-wrap .menu > div {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
bottom: 0;
}
.menu-wrap .menu > div > div {
opacity: 0;
-webkit-transition: opacity 0.4s easy;
transition: opacity 0.4s easy;
}
.menu-wrap .menu > div > div .footer-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (25vw)[4];
grid-template-columns: repeat(4, 25vw);
-ms-grid-rows: 25vh;
grid-template-rows: 25vh;
grid-gap: 1rem;
bottom: 0;
}
.menu-wrap .menu > div > div .footer-grid .footer-content {
display: inline-block;
position: relative;
bottom: 0;
}
.menu-wrap .menu > div > div .footer-grid .footer-content .menu-video-wrap {
width: 100%;
height: 100%;
overflow: hidden;
}
.menu-wrap .menu > div > div .footer-grid .footer-content .menu-video-wrap video {
-o-object-fit: fill;
object-fit: fill;
width: 100%;
height: 100%;
}
.menu-wrap .menu > div > div .footer-grid .footer-content .menu-video-wrap .menu-overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
z-index: 1;
opacity: 0.5;
}
.menu-wrap .menu > div > div .footer-grid .footer-content .menu-video-wrap .menu-overlay:hover {
opacity: 0;
}
.menu-wrap .menu > div > div .footer-grid .footer-content .menu-video-wrap .vid-text {
position: absolute;
z-index: 3;
margin: 0 auto;
left: 0;
right: 0;
top: 40%;
text-align: center;
}
.menu-wrap .menu > div > div .footer-grid .footer-content .menu-video-wrap .vid-text a {
color: #fff;
text-decoration: none;
z-index: 3;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
/* Turns lines into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/* Rotate on Hover when checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition-duration: 0.75s;
transition-duration: 0.75s;
}
.menu-wrap .toggler:checked ~ .menu > div > div {
opacity: 1;
-webkit-transition: opacity 0.4s ease 0.4s;
transition: opacity 0.4s ease 0.4s;
}
#showcase {
height: 100vh;
}
#showcase:before {
content: "";
background: url("https://images.pexels.com/photos/39511/purple-grapes-vineyard-napa-valley-napa-vineyard-39511.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#showcase .showcase-overlay {
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
#showcase .showcase-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
height: 100%;
margin: auto;
color: #fff;
z-index: 1;
position: relative;
}
#showcase .showcase-container h1 {
line-height: 1.4;
font-size: 4.5rem;
}
#showcase .showcase-container p {
line-height: 1.4;
font-weight: bold;
font-size: 1.5rem;
}
/*# sourceMappingURL=style.css.map */
Here is the SCSS code:
// Variables
$primary-color: #f6f5e8;
$secondary-color: green;
$overlay-color: #333;
$menu-speed: 0.75s;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
body {
font-family: "Lora", sans-serif;
}
.container {
max-width: 960px;
margin: auto;
overflow: hidden;
padding: 0 3rem;
}
// Logo
#logo {
width: 150px;
margin-top: 1rem;
margin-left: 3rem;
position: absolute;
z-index: 1;
}
// Shopping Cart
#shopping-cart {
margin-top: 0.5rem;
position: absolute;
right: 6%;
width: 40px;
z-index: 1;
}
// Hamburger Menu
.menu-wrap {
position: absolute;
top: 0;
right: 5%;
z-index: 1;
.toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
> div {
position: relative;
flex: none;
width: 100%;
height: 2.5px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
&::before,
&::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2.5px;
background: inherit;
}
&::after {
top: 10px;
}
}
}
.menu {
position: fixed;
left: 0;
width: 100%;
overflow: hidden;
visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
> div {
transform: scale(0);
transition: all 0.4s ease;
width: 100%;
height: 100%;
display: flex;
flex: none;
align-items: center;
justify-content: center;
bottom: 0;
> div {
opacity: 0;
transition: opacity 0.4s easy;
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 25vw);
grid-template-rows: 25vh;
grid-gap: 1rem;
bottom: 0;
.footer-content {
display: inline-block;
position: relative;
bottom: 0;
.menu-video-wrap {
width: 100%;
height: 100%;
overflow: hidden;
video {
object-fit: fill;
width: 100%;
height: 100%;
}
.menu-overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
z-index: 1;
opacity: 0.5;
&:hover {
opacity: 0;
}
}
.vid-text {
position: absolute;
z-index: 3;
margin: 0 auto;
left: 0;
right: 0;
top: 40%;
text-align: center;
a {
color: #fff;
text-decoration: none;
z-index: 3;
}
}
}
}
}
}
}
}
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns lines into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate on Hover when checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: $menu-speed;
}
.menu-wrap .toggler:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
// Showcase
#showcase {
height: 100vh;
&:before {
content: "";
// Placeholder background
background: url("https://images.pexels.com/photos/39511/purple-grapes-vineyard-napa-valley-napa-vineyard-39511.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.showcase-overlay {
background: rgba($color: #000000, $alpha: 0.3);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.showcase-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
margin: auto;
color: #fff;
z-index: 1;
position: relative;
h1 {
line-height: 1.4;
font-size: 4.5rem;
}
p {
line-height: 1.4;
font-weight: bold;
font-size: 1.5rem;
}
}
}
This is because your main container overlaying all your elements with z-index: 1;.
Try to remove z-index from this and you will be fine:
#showcase .showcase-container {
z-index: 1;
}
Related
So, I've created a hamburger menu from tutorial on YouTube and everything works fine! But... when I want to add more "div" it's getting problematic.
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li>Home</li>
<li>Playlista</li>
<li>Support</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<div class="showcase">
<div class="showcase-inner">
<h1>Welcome</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique explicabo obcaecati mollitia tempora esse soluta, est odio magni ea aspernatur.</p>
Read more
<div class="swiper"><img src="1.jpg"></div>
</div>
</div>
This is all i have on HTML. I want to add div "swiper" but everything in this div when I open a hamburger menu is shown up, if I delete the div everything is hided when I click hamburger menu. I copy all css code that I have, I don't know what should I add to hide this div and image when I click on hamburger menu.
background-color: var(--primary-color);
color: #fff;
height: 100vh; /* cała powierzchnia */
position: relative;
}
.showcase .showcase-inner{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.btn {
display: inline-block;
border: none;
background-color: var(--overlay-color);
color: #fff;
padding: 0.75rem 1.5rem;
text-decoration: none;
}
.btn:hover{
opacity: 0.7;
}
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--overlay-color);
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .hamburger > div {
position: relative;
width: 100%;
height: 2px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease-out;
}
/* Top i bottom lines */
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after{
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves line down */
.menu-wrap .hamburger > div:after {
top: 10px;
}
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Pokazuje menu */
.menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: var(--menu-speed);
}
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu > div {
background: var(--overlay-color);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
.menu-wrap .menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
/* opacity: 0; */
transition: opacity 0.4 ease;
}
.menu-wrap .menu > div > div > ul > li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 1rem;
}
.menu-wrap .menu > div > div > ul > li > a {
color: inherit;
text-decoration: none;
transition: color 0.4s ease;
}
-> https://i.stack.imgur.com/ybDE5.png I want this image to be hided.
First off, when providing code use the Snippet inserter in the toolbar to provide a live code sample. Second, when you provide code try to be more careful with your copy paste, you are definitely missing some elements from the code you supplied.
That being said, I get what you were trying to achieve and I was able to fill in the blanks and create a working snippet from what you provided.
The outcome is not polished but I think it's generally what you were intending. However, I think the click area for your menu toggle should be the whole container and not just some of the lines.
:root {
--primary-color: purple;
--overlay-color: red;
}
body {
background-color: var(--primary-color);
color: #fff;
height: 100vh;
/* cała powierzchnia */
position: relative;
}
.showcase .showcase-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.btn {
display: inline-block;
border: none;
background-color: var(--overlay-color);
color: #fff;
padding: 0.75rem 1.5rem;
text-decoration: none;
}
.btn:hover {
opacity: 0.7;
}
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--overlay-color);
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .hamburger>div {
position: relative;
width: 100%;
height: 2px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease-out;
}
/* Top i bottom lines */
.menu-wrap .hamburger>div:before,
.menu-wrap .hamburger>div:after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves line down */
.menu-wrap .hamburger>div:after {
top: 10px;
}
.menu-wrap .toggler:checked+.hamburger>div {
transform: rotate(135deg);
}
.menu-wrap .toggler:checked+.hamburger>div:before,
.menu-wrap .toggler:checked+.hamburger>div:after {
top: 0;
transform: rotate(90deg);
}
/* Pokazuje menu */
.menu-wrap .toggler:checked~.menu {
visibility: visible;
}
.menu-wrap .toggler:checked~.menu>div {
transform: scale(1);
transition-duration: var(--menu-speed);
}
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu>div {
background: var(--overlay-color);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
.menu-wrap .menu>div>div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
/* opacity: 0; */
transition: opacity 0.4 ease;
}
.menu-wrap .menu>div>div>ul>li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 1rem;
}
.menu-wrap .menu>div>div>ul>li>a {
color: inherit;
text-decoration: none;
transition: color 0.4s ease;
}
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<ul>
<li>Home</li>
<li>Playlista</li>
<li>Support</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="showcase">
<div class="showcase-inner">
<h1>Welcome</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique explicabo obcaecati mollitia tempora esse soluta, est odio magni ea aspernatur.</p>
Read more
<div class="swiper"><img src="https://via.placeholder.com/600x400"></div>
</div>
</div>
Here my code is working. but hamburger menu not visible. Here .menu-wrap .menu this selector causing the problem. After adding this hamburger is not visible. How can design so that I can see the hamburger menu and click. Is there any way to do this. If needed I can load image for understanding.
:root {
--primary-color: rgba(13, 124, 140, 0.75);
--overlay-color: rgba(24, 39, 51 , 0.85);
--menu-speed: 0.75s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
line-height: 1.4px;
}
nav{
margin: 0px;
padding: 10px 0;
}
header {
background-color: #333333;
position: fixed;
width: 100%;
z-index: 1;
}
.menu-top li {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 20px;
display: inline-block;
width: 100px;
}
/*menu style */
.menu-top li a{
color: #fff;
}
.menu-wrap{
position:fixed ;
top: 0;
right: 0;
z-index: 1;
}
.menu-wrap .toggler{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
/*humburger line */
.menu-wrap .hamburger > div{
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/*humburger line for top and bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after{
position: absolute;
content: '';
top: -10px;
width: 100%;
height: 2px;
z-index: 1;
background: inherit;
}
.menu-wrap .hamburger >div::after{
top: 10px;
}
/* Toggler animation*/
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/*turn to x*/
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after
{
top:0;
transform: rotate(90deg);
}
/* rotate the hover when cheched */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
/*rotate the hover when cheched */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
.menu-wrap .menu{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100%;
visibility:hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu > div{
background: var(--overlay-color);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(1);
transition: all 0.4s ease;
}
.menu-wrap .menu > div > div{
text-align: center;
max-width: 90vw;
min-height: 100vh;
opacity: 1;
transition: opacity 0.4s ease;
}
.menu-wrap .menu > div > div>ul>li{
list-style: none;
color: #fff;
padding: 1.5rem;
font-size: 1.5rem;
}
.menu-wrap .menu > div > div > ul > li > a {
color: inherit;
text-decoration: none;
transition: color 0.4s ease;
}
/* show menu*/
.menu-wrap .toggler:checked ~ .menu {
visibility:visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: var(--menu-speed);
}
.menu-wrap .toggler:cheched ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
.container {
max-width: 960px;
margin: auto;
overflow: hidden;
padding: 0 3rem;
}
.showcase{
background:var(--primary-color) ;
color: #fff;
height: 100vh;
position: relative;
}
.showcase:before {
content: '';
background: url('/portfolio/image/landscape.jpg') no-repeat center center/cover;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.showcase .showcase-inner{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
.showcase h1{
font-size: 4rem;
}
.showcase p{
font-size: 1.3rem;
}
.btn {
display: inline-block;
border: none;
background: #000;
color: #fff;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
transition: opacity 1s ease-in-out;
text-decoration: none;
}
.btn:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='./styles/style.css' rel='stylesheet' type='text/css'/>
<link rel ="preconnect" href="https://fonts.gstatic.com"/>
<abbr rel="stylesheet" type="text/css" href="./styles/bootstrap-grid.css">
<link rel="stylesheet" href="./styles/bootstrap.min.css">
</head>
<body>
<header>
<nav>
<section>
<div class="row">
<div class="col-sm-8">
<ul class="menu-top">
<li active>HOME</li>
<li >CONTACT</li>
</ul>
</div>
<div class="col-sm-4">
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Resume</li>
<li>Certificate</li>
<li>FAQ</li>
<li>About Me</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</nav>
</header>
<section class="showcase">
<div class="container showcase-inner">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas maiores sint impedit
delectus quam molestiae explicabo cum facere ratione veritatis.</p>
Read More
</div>
</section>
</body>
</html>
In your css, where you style your hamburger menu:
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
You want it align to the top right of your screen, so just replace left: 0; with right: 0;.
HTMl SECTION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Harm</title>
</head>
<body>
<!-- Desktop Nav -->
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
<span class="text-primary"><i class="fas fa-book-open"></i>Edge</span> Ledger
</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Cases</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- Mobile Navigation-->
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<h1>The Sky Is The limit</h1>
<p>We provide world class financial assistance</p>
<i class="fa fa-chevron-right" aria-hidden="true"></i>Read More
</div>
</header>
</body>
</html>
CSS SECTION
:root {
--primary-color: rgba(13, 110, 139, 0.75);
--secondary-color: rgba(229, 148, 0 , 0.9);
--overlay-color: rgba(24, 39, 51 , 0.85);
--menu-speed: 0.75s;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
list-style: none;
}
ul{
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
opacity: 0.8;
width: 100%;
height: 70px;
position: fixed;
top: 0px;
padding: 0 30px;
transition: 0.5s;
}
.navbar.top {
background: transparent;
}
.navbar a {
color: #fff;
padding: 10px 20px;
margin: 10px 5px;
list-style: none;
}
.navbar a:hover {
border-bottom: #28a745 2px solid;
}
.navbar ul {
display: flex;
}
.navbar .logo {
font-weight: 400;
}
/* Header */
.hero {
background: url('../images/home/showcase.jpg') no-repeat center center/cover;
height: 100vh;
position: relative;
color: #fff;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
padding: 0 20px;
}
.hero .content h1 {
font-size: 55px;
}
.hero .content p {
font-size: 23px;
max-width: 600px;
margin: 20px 0 30px;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
}
.menu-wrap{
display: none;
}
#media (max-width:500px){
.navbar{
display: none;
}
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: var(--menu-speed);
}
.menu-wrap .toggler:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu > div {
background: var(--overlay-color);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
.menu-wrap .menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
.menu-wrap .menu > div > div > ul > li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 1rem;
}
.menu-wrap .menu > div > div > ul > li > a {
color: inherit;
text-decoration: none;
transition: color 0.4s ease;
}
.menu-wrap .menu > div > div > ul > li > a:hover {
color: var(--secondary-color);
}
}
I am trying to remove the navigation bar by replacing it with the hamburger button when the screen width max is 500, the issue basically is when i am on large screens i want the navigation bar to display the normal way and when my screen width maximum is 500px, the navigation bar should change to a mobile navigation Menu
You should add "display: block" in the media query for .menu-wrap:
#media (max-width:500px){
.menu-wrap {
display: block;
}
}
You are missing out display:block
#media (max-width:500px){
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
display:block
}
}
So this is my html:
<div class="showcase">
<div class="overlay">
<div class="container">
<h1>Мышонок</h1>
<!-- Hamburger -->
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li>Personal</li>
<li>Men</li>
<li>Women</li>
<li>Video</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And this is my CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: "Oswald", sans-serif;
}
img {
width: 100%;
height: auto;
}
/* Utility */
.container {
margin: 0 auto;
max-width: 1160px;
padding: 0 20px;
overflow: hidden;
}
.overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.hidden {
display: none;
}
/* Home */
.showcase {
position: relative;
height: 100vh;
background-image: url(../img/homebg/bg1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation: slide 18s infinite;
transition: 100ms ease-in-out;
}
.showcase h1 {
font-size: 4rem;
font-weight: 500;
color: #fff;
padding-top: 40px;
text-transform: uppercase;
z-index: 1;
}
#keyframes slide {
0% {
background-image: url(../img/homebg/bg1.jpg);
}
20% {
background-image: url(../img/homebg/bg2.jpg);
}
40% {
background-image: url(../img/homebg/bg3.jpg);
}
60% {
background-image: url(../img/homebg/bg4.jpg);
}
80% {
background-image: url(../img/homebg/bg5.jpg);
}
100% {
background-image: url(../img/homebg/bg1.jpg);
}
}
This is additional CSS I have for hamburger menu style:
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 60px;
height: 60px;
padding: 1rem;
/* background: rgba(0, 0, 0, 0.5); */
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Icon */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .haumburger > div {
transform: rotate(135deg);
}
Problem: I cannot toggle the check input button. I look in the inspector, it is positioned in left top corner like it should, but I cannot check it. It is just uncheckable. What am I doing wrong here?
I need to toggle checkbox of input with class "toggler", but it just not checking..? Please help
P.S. I think it has to do something with my overlay. Can someone check? Cuz I don't understand what could be wrong
So, I have messed up with the z-index.
The correct z-index in order for the checkbox to work is:
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 1002;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1001;
width: 60px;
height: 60px;
padding: 1rem;
/* background: rgba(0, 0, 0, 0.5); */
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Icon */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
body {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 16px;
box-sizing: border-box !important;
}
a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
}
a:hover,
a:link,
a:active {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
.container {
width: 100%;
height: 100%;
min-height: 100vh;
position: relative;
}
.main-content {
max-width: 800px;
margin: 0 auto;
padding: 50px 100px;
transition: transform .3s ease;
}
.header {
width: 100%;
height: 56px;
background: black;
}
.header-container {
height: 100%;
padding: 0 40px;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative;
}
.bottom, .right {
position: fixed;
background: black;
}
.right {
top: 0; bottom: 0;
width: 56px;
right: 0;
}
.bottom {
left: 0; right: 0;
height: 3.5vh;
bottom: 0;
}
.logo {
width: 10%;
}
.nav-bar {
display: flex;
flex-direction: row;
width: 90%;
align-items: center;
align-self: stretch;
}
#media screen and (max-width: 600px) {
.nav-bar {
position: absolute;
top: 56px;
left: 0;
width: 100%;
height: 0;
overflow: hidden;
background-color: black;
flex-direction: column;
justify-content: flex-start;
align-items: center;
z-index: 8888;
transition: height .3s .1s ease;
}
}
.nav-list {
list-style: none;
padding: 100px;
margin: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
#media screen and (max-width: 600px) {
.nav-list {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: space-evenly;
height: 80%;
/*
Initially list will be hidden and will reappear once the
nav-bar is opened
*/
visibility: hidden;
opacity: 0;
transition: visibility .2s ease, opacity .2s ease;
}
}
.nav-list-item {
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
position: relative;
right: 75.5vw;
left: -23.5vw;
transition: color .3s ease;
color: #989797;
}
.nav-list-item:not(:last-child) {
margin-right: 99px;
}
#media screen and (max-width: 600px) {
a {
justify-content: flex-start;
}
.nav-list-item {
margin: 0px auto 0px auto !important;
border-bottom: 1px solid #989797;
width: 80%;
justify-content: left;
padding: 15px 0;
}
}
.sub-list-container {
overflow: hidden;
position: absolute;
top: 56px;
left: 10%;
transform: translateX(-50%);
/* If we need show/hide feature */
height: inherit;
visibility: hidden;
opacity: 0;
transition: all .3s ease;
}
#media screen and (max-width: 600px) {
.sub-list-container {
display: none;
}
}
.sub-list {
width: 200px;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
background: black;
}
.sub-item {
color: #989797;
font-size: 16px;
padding: 10px;
position: relative;
align-self: stretch;
text-align: center;
z-index: 2;
transition: color .3s ease;
}
.sub-item:hover {
color: white;
}
.sub-item::before {
z-index: 1;
}
.nav-list-item:hover {
cursor: pointer;
color: white;
}
.nav-list-item:hover .sub-list-container {
/* For show/hide feature */
visibility: visible;
opacity: 1;
}
.toggle-nav {
display: none;
}
.toggle-nav-off {
display: none;
}
#media screen and (max-width: 600px) {
.toggle-nav {
display: block;
}
.toggle-nav-off {
display: block;
background: white;
border-radius: 50%;
height: 30px;
width: 30px;
}
:target {
/* Defining the height of the shutter effect */
height: calc(100vh - 56px);
}
:target .nav-list {
visibility: visible;
opacity: 1;
transition: visibility .2s .2s ease, opacity .2s .2s ease;
}
}
/* Code for the side-bar starts here */
.side-bar {
position: absolute;
top: 56px;
left: 0;
width: 60px;
/* Initial width according to size of image */
height: calc(100% - 56px);
background: black;
color: white;
overflow: hidden;
/* Imp to give as the List is having width larger than the initial width of the side-bar */
transition: all .3s ease;
}
.side-bar {
width: 8vw;
}
.side-bar-left {
position: absolute;
top: 56px;
right: 10px;
width: 60px;
/* Initial width according to size of image */
height: calc(100% - 56px);
background: black;
color: white;
overflow: hidden;
/* Imp to give as the List is having width larger than the initial width of the side-bar */
transition: all .3s ease;
width: 250px;
}
.item-list {
list-style: none;
width: 250px;
left: -3.2vw;
display: flex;
flex-direction: column;
position: relative;
z-index: 10;
}
.item {
display: flex;
justify-content: flex-start;
align-items: center;
align-self: stretch;
padding: 3.85vh .3vw;
transition: all .5s ease;
position: relative;
color: #989797;
}
.item:not(:last-child) {
margin-bottom: 5px;
}
.item:hover {
color: white;
cursor: pointer;
}
.item-img {
margin-right: 10px;
width: 10px;
height: 5px;
padding: 0 10px;
transition: all .3s ease;
}
.item #dribble, .item #behance, .item #flickr {
width: 3.5vw;
height: 7vh;
}
.item #instagram {
width: 3vw;
height: 6vh;
margin-left: .5vw;
}
.item #etsy {
width: 6vw;
height: 7vh;
margin-left: -2.1vw;
}
.item #behance {
margin-left: .3vw;
}
.item #flickr{
margin-left: -.5vw;
}
.item #dribble {
margin-left: .2vw;
}
.item #pinterest {
width: 3.5vw;
height: 7vh;
margin-left: .4vw;
}
/* Code for the HOVER effect on the list items */
.item::before {
transform: scaleY(0);
width: 3px;
transition: transform .2s ease, width .3s .2s ease;
}
.sub-item::before {
width: 0px;
transition: transform .1s ease, width .2s .1s ease;
}
.item::before,
.sub-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(to bottom right, #ff506e, black);
z-index: -1;
}
.item:hover::before {
transform: scaleY(1);
}
.item:hover::before,
.sub-item:hover::before {
width: 100%;
}
.active {
color: #989797;
/* background: linear-gradient(to bottom right, #ff506e, black); THIS MAKES THE FIRST BUTTON ALWAYS RED AND HIGHLIGHTED, WHICH WE DON'T WANT */
}
.nav-active {
color: 989797;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: hsl(200deg, 50%, 92%);
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: all .3s ease;
}
.modal-item {
position: absolute;
width: 500px;
height: 350px;
background: url("https://37.media.tumblr.com/53fc4e7e4096cba63c0133167a4b6168/tumblr_n33ukkyWLN1rwhqloo1_500.gif");
background-position: center;
background-repeat: no-repeat;
border-radius: 2px;
padding: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform .3s ease;
}
.toggle-modal {
position: absolute;
top: 2vh;
left: 1.4vw;
}
/* Opening modal using CSS */
:target {
visibility: visible;
opacity: 1;
}
:target .modal-item {
transform: translate(-50%, -50%) scale(1);
}
/* .container {
display: grid;
height: 100%;
overflow: auto;
background: white;
} */
.iframe {
position: relative;
margin-left: -41.98vw;
top:52.09vh;
height: 92.322vh;
width: 90vw;
border: black;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>"Users folio"</title>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="header-container">
<div class="logo">
<!-- COMPANY LOGO GOES HERE -->
</div>
<nav class="nav-bar" id="nav">
<ul class="nav-list">
<li class="nav-list-item nav-active">Home</li>
<li class="nav-list-item">
About
<div class="sub-list-container">
<ul class="sub-list">
<li class="sub-item">About Our Company</li>
<li class="sub-item">Our Mission</li>
<li class="sub-item">Happy Clients</li>
<li class="sub-item">Team</li>
</ul>
</div>
</li>
<li class="nav-list-item">
Instructions
</li>
</ul>
<div class="toggle-nav-off">
<img src="https://icon-icons.com/icons2/1157/PNG/512/1487086345-cross_81577.png" alt="Close Icon" width="30" height="30">
</div>
</nav>
<div class="toggle-nav">
<img src="https://cdn2.iconfinder.com/data/icons/menu-elements/154/menu-round-512.png" alt="Close Icon" width="30" height="30">
</div>
<div class="container">
<!--
Currently just researching which sites are able to have their x-options
bypassed in order to allow viewing within an iframe, so disregard the iframe source.
-->
<iframe class="iframe" name="change-website" src="https://www.etsy.com"></iframe>
</div>
</header>
<div class="side-bar">
<ul class="item-list">
<li class="item active"><img id="behance" src="images/behance.png" width="50" height="50" class="item-img" />Behance</li>
<li class="item"><img id="dribble" src="images/dribble3.png" width="50" height="50" class="item-img" />Dribble</li>
<li class="item"><img id="etsy" src="images/etsy11.png" width="50" height="50" class="item-img"/>Etsy</li>
<li class="item"><img id="flickr" src="images/flick2.png" width="50" height="50" class="item-img" />Flickr</li>
<li class="item"><img id="instagram" src="images/Instagram_AppIcon_Aug2017.png" width="50" height="50" class="item-img" />Instagram</li>
<li class="item"><img id="pinterest" src="images/pinterest3.png" width="50" height="50" class="item-img" />Pinterest</li>
<!-- <li class="item"><img id="flickr" src="images/twitch3.png" width="50" height="50" class="item-img"/>Twitch</li> -->
</ul>
</div>
<div class="left-side-bar">
<p></p>
</div>
<div class="main-content">
<div class="modal" id="modal-item">
<div class="modal-item">
<div class="toggle-modal">
<img src="https://icon-icons.com/icons2/1157/PNG/512/1487086345-cross_81577.png" alt="Close Icon" width="30" height="30">
</div>
</div>
</div>
</div>
<div class="bottom"></div>
<div class="right"></div>
</div>
<link rel="stylesheet" href="scripts.js">
</body>
</html>
So I know that I need to use media queries to properly scale and put the code into different media queries for each max width ect.
Here is the code I have been working with, but when I change the size, even when I have tried to put them into different media queries and code them to that scale when I change the browser size, I still get issues where things like my iframe and the top menu bar moving and not being in the correct place.
I am still pretty new to frontend but I was just curious what I may be able to do to fix this?
When the browser resizes, everything should stay in its correct place.
The Home, About and Instructions should be starting from above the iframe and slightly past the top left of the iframe
Well, taking a look at your code, it's seen that you missed a meta tag to make your website resizable, add it on your head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
This should fix your issue.