I have a question about my full screen menu. I want it transparent when just scrolling and using the page. But when I click on the hamburger icon in the right top the full screen menu opens. The problem is that I can't fix the background to get a black color when it opens. It stays transparent. Can someone please help me to get the background of the menu black on click?
This is the code I use in the header
Menu Toggle animation
<html>
<div id="wrapper">
<span class="label">Click for animation.</span>
<div id="smallWrapper">
<input type="checkbox">
<div id="bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>
</html>
<style>
#wrapper {
width:100%;
height:100%;
}
.label {
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 2em);
font-size: 50px;
width: 4em;
font-family: sans-serif;
color: #CCC;
}
#smallWrapper {
position:absolute;
top:calc(50% - 20px);
left:calc(50% - 20px);
}
input {
opacity:0;
z-index:1;
width:40px;
height:40px;
margin:0;
padding:0;
position:absolute;
appearance: none;
}
#bars {
width:40px;
height:35.3333333333333333px;
padding-top: 4.6666666666666666666px;
border-radius: 10px;
transition: background-color 0.2s, transform 0.3s ease-in-out;
}
.bar {
width 40px;
height: 4px;
margin-bottom: 9.3333333333333333px;
background: #fff;
transition: transform 0.2s ease-in-out, color 0.5s linear;
}
input:checked + #bars {
background-color: hsla(0, 100%, 20%, 0.0);
transform: rotate(270deg);
}
input:checked + #bars .bar {
background:#fff;
}
input:checked + #bars .bar:first-child {
transform: rotate(45deg) translate(10px, 9.33333333333333333px);
}
input:checked + #bars .bar:nth-child(2) {
transform-origin: 50% 50%;
transform: rotate(-45deg);
}
input:checked + #bars .bar:last-child {
transform: rotate(45deg) translate(-10px, -9.33333333333333333px);
}
</style>
Menu transform to full screen animation:
<script>jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});</script>
<style>
section-transform{
cursor: pointer;
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #000000 !important;
}
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
</style>
JS that belongs to above css:
<script>
$('#hamburger').click(function() {
$( this ).toggleClass( "active" );
});
</script>
I Hope someone can help me out. The URL of the site is www.nr-design.nl
Thanks in advance, Nick
hey use onClick function to make your background black when you click on it