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
}
}
Related
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>
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;.
I have a pure css hamburger menu based on this codepen and I made my hamburger menu only show up on devices with 768px width and below, the hamburger menu also has some transitions when opening and closing to make it look smooth but the problem is that when the page is refreshed, you can see the menu show up for a split second before it transitions under the header. This can also be seen when you're manually resizing the viewport from a width larger than 768px and when it gets to 767px, you can the see the menu appear for a split second before it disappears. Please I need help to make this behaviour stop. Below is the code required to recreate this problem:
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<!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="styles.css">
<title>Product Landing Page</title>
</head>
<body>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</main>
</body>
</html>
I also provided a fiddle you can use to check out the problem.
P.S: The original codepen I got the idea from also has the same issue if you copy the code and preview it in a browser and reload the page.
Using javascript we can add the stop-transition class to the body for some few milliseconds. Then in the css we can add the rule to stop play any transition momentarily. After that, when the resize is done, we can remove the stop-transition class from the body to make sure that everything acts accordingly.
Here's the fiddle.
(function () {
const classes = document.body.classList;
let timer = null;
window.addEventListener('resize', function () {
if (timer){
clearTimeout(timer);
timer = null;
} else {
classes.add('stop-transition');
}
timer = setTimeout(() => {
classes.remove('stop-transition');
timer = null;
}, 100);
});
})();
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
/* Stop playing transition momentarily on viewport resize. */
body.stop-transition .menu {
transition: none;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</main>
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;
}