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;.
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>
I have been staring at this for hours, and moving things around in countless combinations. I have read everything on visibility and what properties make things disappear but still cause flow around, and what actually "collapsible" means, and I still cannot work this out.
I watched an introductory tutorial on HTML and CSS and decided to try coding it myself. Everything is visually fine and does what it's supposed to do.
The hamburger itself makes sense using the before and after for the visuals with a checkbox over it (with no opacity because that lets you respond to events). I conceptually understand everything quite well.
My question is:
After building out the overlay, even when the overlay menu is minimized (checkbox is unchecked), I cannot click on the button (link a tag) because the .menu is still overlaying the whole viewport even when my checkbox is toggled.
I did everything as the instructor did. I even went through his code as I am convinced that his code does not work either.
I read all about the properties, and thought that just setting the div visibility to hidden should work, but it does not.
I guess visibility: hidden does not actually collapse the element. But neither does visibility:collapse.
Only display: none does (but not on the .menu, but on the child div .menu > .menu-shrink), but since there is no midpoint, it cannot be used in a smooth transition, with the scale transition on the checkbox.
I tried to transform: scale(0), yet after all this, the inspector shows that there is still a .menu overlay across the whole overlay.
I learned that the transform actually keeps the original space and does not create overflow. But still, nothing under its original state can be clicked.
When a child div has a defined height and width, it stretches the parent div, correct? But if you set that div's visibility to hidden, wouldn't it show that.
I tried to set display: none; on .menu, but still nothing.
The error is either on .menu or .menu .menu shrink.
:root {
--primary-color: rgba(0, 0, 0, 0.75);
--secondary-color: rgba(255, 255, 255, 0.1);
--overlay-color: rgba(0, 0, 0, 0.8);
--menu-speed: .7s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
line-height: 1.4;
}
a {
text-decoration: none;
color: white;
}
ul {
list-style: none;
}
/* Showcase-Header */
.container {
max-width: 960px;
margin: auto;
padding: 0 3rem;
overflow: hidden;
background-color: var(--primary-color);
}
#showcase {
position: relative;
background: var(--primary-color);
color: white;
height: 100vh;
}
#showcase::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: url(./img/pexels-darius-krause-2228152.jpeg) no-repeat center
center/cover;
z-index: -1;
}
#showcase .showcase-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
#showcase h1 {
font-size: 3rem;
}
.btn {
display: inline-block;
border: none;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
background-color: var(--secondary-color);
backdrop-filter: saturate(190%) blur(3px);
transition: all 0.2s;
border-radius: 10px;
}
.btn:hover {
background: rgba(0, 0, 0, 1);
color: white;
box-shadow: 0px 0px 10px 1px;
}
/* Hamburger Menu (Mobile) */
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
height: 50px;
width: 50px;
opacity: 0;
z-index: 2;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
/* hambuerger menu lines */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hanburder lines Top and Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: "";
position: absolute;
top: -10px;
height: 2px;
width: 100%;
background: inherit;
z-index: 1;
}
.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(360deg);
}
/* When Hamburger Menu is Checked */
.menu-wrap .toggler:checked ~ .menu {
visibility: visible;
transition-duration: 0.2s;
}
.menu-wrap .toggler:checked ~ .menu > .menu-shrink {
transform: scale(1);
transition-duration: 0.4s;
display: flex;
}
.menu-wrap .toggler:checked ~ .menu > .menu-shrink > .menu-fade {
opacity: 1;
transition: opacity 3s 0.3s;
}
.menu-wrap .toggler:checked ~ .menu > .menu-shrink > .menu-fade >
/* Menu */
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
visibility: collapse;
}
.menu-wrap .menu > .menu-shrink {
background-color: var(--overlay-color);
backdrop-filter: saturate(190%) blur(3px);
height: 100vh;
width: 100vw;
display: flex;
/* flex: none; */
justify-content: center;
align-items: center;
transform: scale(0);
transition: all var(--menu-speed);
}
.menu-wrap .menu > .menu-shrink > .menu-fade {
text-align: center;
height: 100vh;
width: 88vw;
opacity: 0;
transition: opacity 0.3s;
}
.menu-wrap .menu > .menu-shrink > .menu-fade > ul {
height: 100%;
width: 100%;
padding: 10% 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5%;
}
.menu-wrap .menu > .menu-shrink > .menu-fade > ul > li {
font-size: 1.5rem;
opacity: 0.85;
transition: all 0.2s;
}
/* Menu Effects Once Open */
.hover-grow {
transition: all 0.5s;
}
.hover-grow:hover {
transform: scale(2);
opacity: 1;
text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="menu.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap"
rel="stylesheet"
/>
<title>Hamburger Menu Overlay</title>
</head>
<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger"><div></div></div>
<div class="menu">
<div class="menu-shrink">
<div class="menu-fade">
<ul>
<li class="hover-grow">Home</li>
<li class="hover-grow">About</li>
<li class="hover-grow">Info</li>
<li class="hover-grow">Portfolio</li>
<li class="hover-grow">Essay</li>
<li class="hover-grow">Contact</li>
</ul>
</div>
</div>
</div>
</div>
<header id="showcase">
<div class="container showcase-content">
<h1>Welcome</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
at accusamus repellat repellendus nihil quidem totam sapiente omnis
quae. Facere.
</p>
Read More
</div>
</header>
</body>
</html>
Move the checkbox in root and/or set .menu size to 0 if not checked.
:root {
--primary-color: rgba(0, 0, 0, 0.75);
--secondary-color: rgba(255, 255, 255, 0.1);
--overlay-color: rgba(0, 0, 0, 0.8);
--menu-speed: .7s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
line-height: 1.4;
}
a {
text-decoration: none;
color: white;
}
ul {
list-style: none;
}
/* Showcase-Header */
.container {
max-width: 960px;
margin: auto;
padding: 0 3rem;
overflow: hidden;
background-color: var(--primary-color);
}
#showcase {
position: relative;
background: var(--primary-color);
color: white;
height: 100vh;
}
#showcase::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: url(./img/pexels-darius-krause-2228152.jpeg) no-repeat center
center/cover;
z-index: -1;
}
#showcase .showcase-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
#showcase h1 {
font-size: 3rem;
}
.btn {
display: inline-block;
border: none;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
background-color: var(--secondary-color);
backdrop-filter: saturate(190%) blur(3px);
transition: all 0.2s;
border-radius: 10px;
}
.btn:hover {
background: rgba(0, 0, 0, 1);
color: white;
box-shadow: 0px 0px 10px 1px;
}
/* Hamburger Menu (Mobile) */
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
height: 50px;
width: 50px;
opacity: 0;
z-index: 2;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
/* hambuerger menu lines */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hanburder lines Top and Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: "";
position: absolute;
top: -10px;
height: 2px;
width: 100%;
background: inherit;
z-index: 1;
}
.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 */
#toggler:checked + .menu-wrap .toggler:hover + .hamburger > div {
transform: rotate(360deg);
}
/* When Hamburger Menu is Checked */
#toggler:checked + .menu-wrap .toggler ~ .menu {
visibility: visible;
transition-duration: all 0.2s;
}
#toggler:checked + .menu-wrap .toggler ~ .menu > .menu-shrink {
transform: scale(1);
transition-duration: 0.4s;
display: flex;
}
#toggler:checked + .menu-wrap .toggler ~ .menu > .menu-shrink > .menu-fade {
opacity: 1;
transition: opacity 3s 0.3s;
}
#toggler:checked + .menu-wrap .toggler ~ .menu > .menu-shrink > .menu-fade >
/* Menu */
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
visibility: collapse;
}
.menu-wrap .menu > .menu-shrink {
background-color: var(--overlay-color);
backdrop-filter: saturate(190%) blur(3px);
height: 100vh;
width: 100vw;
display: flex;
/* flex: none; */
justify-content: center;
align-items: center;
transform: scale(0);
transition: all var(--menu-speed);
}
.menu-wrap .menu > .menu-shrink > .menu-fade {
text-align: center;
height: 100vh;
width: 88vw;
opacity: 0;
transition: opacity 0.3s;
}
.menu-wrap .menu > .menu-shrink > .menu-fade > ul {
height: 100%;
width: 100%;
padding: 10% 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5%;
}
.menu-wrap .menu > .menu-shrink > .menu-fade > ul > li {
font-size: 1.5rem;
opacity: 0.85;
transition: all 0.2s;
}
/* Menu Effects Once Open */
.hover-grow {
transition: all 0.5s;
}
.hover-grow:hover {
transform: scale(2);
opacity: 1;
text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.1);
}
.hide {
display: none;
}
#toggler:not(:checked) + .menu-wrap .menu {
width: 0;
height: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="menu.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap"
rel="stylesheet"
/>
<title>Hamburger Menu Overlay</title>
</head>
<body>
<input type="checkbox" id="toggler" class="hide" />
<div class="menu-wrap">
<label class="toggler" for="toggler"></label>
<div class="hamburger"><div></div></div>
<div class="menu">
<div class="menu-shrink">
<div class="menu-fade">
<ul>
<li class="hover-grow">Home</li>
<li class="hover-grow">About</li>
<li class="hover-grow">Info</li>
<li class="hover-grow">Portfolio</li>
<li class="hover-grow">Essay</li>
<li class="hover-grow">Contact</li>
</ul>
</div>
</div>
</div>
</div>
<header id="showcase">
<div class="container showcase-content">
<h1>Welcome</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
at accusamus repellat repellendus nihil quidem totam sapiente omnis
quae. Facere.
</p>
Read More
</div>
</header>
</body>
</html>
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
}
}
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;
}
i created a hamburger menu using css only
/*based on this*/ <input type="checkbox" class="toggler">
and the toggle is not clickable
(i searched a lot and most questions/answers/problems deal with js/jquery based hamburger menu )
tutorial https://www.youtube.com/watch?v=DZg6UfS5zYg
similar code on StackOverflow https://stackoverflow.com/a/60157218/12919436
i have included a video background
code
:root {
--primary-color: rgba(13, 110, 139, 0.75);
--overlay-color: rgba(24, 39, 51, 0.85);
--menu-speed: 0.75s;
}
*{
box-sizing: border-box;
}
body{
margin:0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size:1rem;
font-weight:normal;
line-height:1.5;
color:#333;
overflow-x:hidden;
}
.v-header{
height:100vh;
display:flex;
align-items:center;
color:#fff;
}
.container{
max-width:960px;
padding-left:1rem;
padding-right:1rem;
margin:auto;
text-align:center;
}
.fullscreen-video-wrap{
position:absolute;
top:0;
left:0;
width:100%;
height:100vh;
overflow:hidden;
}
.fullscreen-video-wrap video{
min-height:100%;
min-width:100%;
}
.header-overlay{
height:100vh;
position: absolute;
top:0;
left:0;
width:100vw;
z-index:1;
background:#fffcb7;
opacity:0.65;
}
.header-content{
z-index:2;
}
.header-content h1{
font-size:50px;
margin-bottom:0;
}
.header-content p{
font-size:1.5rem;
display:block;
padding-bottom:2rem;
}
.btn{
background: #34b3a0;
color:#fff;
font-size:1.2rem;
padding: 1rem 2rem;
text-decoration: none;
}
.section{
padding:20px 0;
}
.section-b{
background:#333;
color:#fff;
}
#media(max-width:960px){
.container{
padding-right:3rem;
padding-left:3rem;
}
}
.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;
transition: all 0.4s ease;
}
/*Hamburger Line*/
.menu-wrap .hamburger > div{
position: relative;
width: 100%;
height: 2px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
/* top and 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;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
z-index: 1;
}
/* 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;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/menu.css">
<title>blog</title>
</head>
<body>
<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>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<input type="checkbox" class="toggler">
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="video.mp4" autoplay="true" loop="true"></video>
</div>
<div class="header-overlay"></div>
<div class="header-content">
<h1>Welcome</h1>
<p> welcome to the world of life and every
minute detail of being you and the best version of your being
</p>
Read More
</div>
</header>
</body>
</html>
Change the .menu-wrap with following:
.menu-wrap{
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
You have two solutions:
Solution 1:
Let menu-wrap element have a z-index higher than header-overlay z-index
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
Solution 2:
Add position:relative; z-index:0; to your header so it will become layer under the menu wrap:
.container{
position: relative;
z-index: 0;
}
Your header overlay is covering your button,
Set a z-index lower on it and you're good
.header-overlay{
/* z-index: 1; Original line in your code*/
z-index: 0;
}