We Keep Coding

position: fixed won't keep the elements fixed to the bottom of an element

With the following styles:
#fullpage-menu > .gradient {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.3rem;
}
where #fullpage-menu has the styling:
#fullpage-menu {
height: 100%;
width: 100%;
background-color: var(--secondary-button-color);
left: 0;
position: absolute;
top: 0;
animation: expand-fullpage-menu 500ms cubic-bezier(0.42, 0, 0.07, 1.43);
z-index: 1001;
animation-fill-mode: both;
padding: 1rem;
box-sizing: border-box;
overflow: hidden;
transform: translate(-100%);
overflow-y: auto;
}
and
.apply-for-org .apply-button {
background-color: var(--dark-secondary-button-color);
padding: 0.5rem 1rem;
border-radius: 10rem;
border: none;
cursor: pointer;
color: var(--title-color);
transition: all 300ms ease-out;
user-select: none;
display: block;
clear: left;
font-size: 1.3rem;
text-transform: capitalize;
font-family: bahnschrift;
letter-spacing: 0.05em;
margin: 1rem 0 0 1rem;
position: fixed;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
font-weight: lighter;
}
Where .gradient is displayed on the bottom of each fullscreen menu, and .apply-button is displayed at the bottom of the .apply-for-org <div>, which also has the id #fullpage-menu.
In other words, the .apply-for-org menu should have a gradient bar at the bottom, which should stay there when scrolling through the div if the content height exceeds the screen height.
In addition, the HTML would look like this for a fullpage-menu:
<div id="fullpage-menu" class="apply-for-org">
<!--Content and other cool stuff-->
<button class="apply-button">Apply for Organisation</button>
<div class="gradient"></div>
</div>
So why does this not work? Why doesn't the gradient bar and the apply button stick to the bottom of the screen when scrolling through the content?
EDIT 15/04/2021:
#fullpage-menu {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #121a21;
overflow-y: auto;
}
#fullpage-menu > button.close {
padding: 0.5rem 1rem;
position: absolute;
top: 1rem;
right: 1rem;
border-radius: 10rem;
font-family: bahnschrift;
background-color: #070b0e;
border: none;
color: white;
}
#fullpage-menu .gradient {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.2rem;
background: rgb(131,58,180);
background: linear-gradient(41deg, rgba(131,58,180,1) 0%, rgba(181,73,227,1) 28%, rgba(253,29,29,1) 83%, rgba(252,145,69,1) 100%);
}
.apply-for-org .apply-button {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
background-color: #070b0e;
border-radius: 10rem;
border: none;
color: white;
padding: 0.5rem 1rem;
font-family: bahnschrift;
cursor: pointer;
}
/*Styling exclusive for this example*/
#example-content {
height: 100rem;
width: 70%;
margin: auto;
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
opacity: 0.5;
}
<div id="fullpage-menu" class="apply-for-org">
<button class="close">Close</button>
<div id="example-content"></div>
<button class="apply-button">Apply for Organisation</button>
<div class="gradient"></div>
</div>
I also noticed that it works just fine in the code snippet that I posted, but apparently it doesn't work as well on my locally hosted server..
If it matters, I'm using .ejs instead of .html, but it shouldn't be of any importance (i believe)

For anyone having the same problem in the distant or near future, it can be fixed by wrapping all the content in another div with position:block attribute:
<div id="fullpage-menu" class="apply-for-org">
<div class="main-wrapper">
<!--Place all the fancy content here-->
<div class="gradient"></div>
<button class="apply-button">Apply for Organisation</button>
</div>
</div>
And then by giving these styles, everything will work :)
#fullpage-menu {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #121a21;
overflow-y: auto;
}
#fullpage-menu .gradient {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.2rem;
background: rgb(131,58,180);
background: linear-gradient(41deg, rgba(131,58,180,1) 0%, rgba(181,73,227,1) 28%, rgba(253,29,29,1) 83%, rgba(252,145,69,1) 100%);
}
.apply-for-org .apply-button {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
background-color: #070b0e;
border-radius: 10rem;
border: none;
color: white;
padding: 0.5rem 1rem;
font-family: bahnschrift;
cursor: pointer;
}
/*This part is important!*/
.apply-for-org > .main-wrapper {
height: 100%;
width: 100%;
overflow-y: auto;
}
I don't know why, apparently my CSS and HTML knowledge is too limited, or I am too stupid, but at least this works. It wouldn't work without the .main-wrapper element wrapping all of the content.
EDIT:
disinfor mentioned something that might just as well work, haven't tried it though:
A fixed element can be positioned against its parent, if you set a transform property on the parent. Try adding transform: translate(0,0) to the parent element.

Lightbox2, trouble with horizontal photo and order to display photos

I have a problem with the Lightbox2 made by Lokesh.
https://lokeshdhakar.com/projects/lightbox2/
I am v2.11.3 and the display of horizontal photo is on the top of the screen in mobiles devices. I have try different options but doesn't work.
Another problem es the order the photos are displaying by Lightbox, I am using Colcate for horizontal grid, so the image follow left to right order but the Lightbox show me the photos follow the vertical order top to bottom, I don't know how I can fix it.
(https://user-images.githubusercontent.com/73562012/108930646-68c95c00-769a-11eb-9c71-ec83b816f2da.png)
leave you part of my code,
the file lightbox-plus-jquery.min.js you que find in the lokesh's page
thanks!
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<div class="container gallery">
<div class="grid">
<!-- current -->
<div class="grid-col grid-col--1">
</div>
<div class="grid-col grid-col--2">
</div>
<div class="grid-col grid-col--3">
</div>
<div class="grid-col grid-col--4">
</div>
<div class="grid-col grid-col--5">
</div>
<div class="grid-item">
<a href="images/urban//urban7-david-porter.jpg"
data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban7-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
<div class="grid-item">
<a href="images/urban/urban00-david-porter.jpg" data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban00-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
<div class="grid-item">
<a href="images/urban/urban10-david-porter.jpg" data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban10-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
</div>
</div>
<!-- colcate- grid -->
<script src="https://unpkg.com/colcade#0/colcade.js"></script>
<script>
var colc = new Colcade( '.grid', {
columns: '.grid-col',
items: '.grid-item'
});
</script>
<!-- lightbox -->
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
lightbox.option({
resizeDuration: 200,
wrapAround: true,
fadeDuration: 2000,
fitImagesInViewport: true,
wrapAround: true,
});
</script>
my css
body.lb-disable-scrolling {
overflow: hidden;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
outline: none;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #EDE7E5;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.2em;
}
.lb-data .lb-caption {
font-size: 1rem;
font-weight:;
line-height: 1em;
}
.lb-data .lb-caption a {
color: #424242;
}
.lb-data .lb-number {
display: block;
text-align: left;
width: 100% !important;
padding-bottom: 1em;
font-size: 12px;
color: #C7C2C0;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

Locking the body scroll, but some div in body is possible to scroll

In the mobile device,
when the user touches the (.menu-btn), (.menu) is shown and the (body) is locked to scroll.
But the problem is (.menu) was also looked too.
How can I make (.menu) is possible to scroll even though the (body) is looked to scroll?
https://jsfiddle.net/n17qw8sb/
I know there is body-scroll-lock. : https://github.com/willmcpo/body-scroll-lock
Unfortunately, I'm not allowed to use webpack for this one :(
<body>
<header>
<h2> Top area </h2>
<div class="menu-btn">
</div>
<div class="menu">
<h2> Hamburger menu area </h2>
</div>
</header>
<section class="contents">
<h2> Contents area </h2>
</section>
</body>
$('.menu-btn').on('click', function() {
$('.menu').toggleClass('active');
$('body').toggleClass('lock-scroll');
$('html').toggleClass('lock-scroll');
})
body {
width: 100%;
background-color: lavender;
}
body.lock-scroll {
overflow: hidden;
}
html.lock-scroll {
overflow: hidden;
}
header {
width: 100%;
height: 3em;
position: fixed;
top: 0;
background-color: beige;
z-index: 100;
}
.menu-btn {
width: 1em;
height: 1em;
background-color: lightseagreen;
position: fixed;
z-index: 300;
top: 1em;
right: 1em;
}
.menu {
width: 100%;
height: 130vh;
position: fixed;
top: 0;
z-index: 200;
padding-top: 40%;
background-color: rgba(255,255,255, .5);
transform: translateX(100%);
transition: all .5s ease;
}
.menu.active {
transform: translateX(0%);
}
.contents {
width: 100%;
padding-top: 50%;
height: 150vh;
background-color: lightblue;
}
h2 {
text-align: center;
}

add a .menu-content element and place the content of .menu element inside that.
And also add this style to end of your style
.menu {
height: 100%;
overflow: scroll;
}
.menu-content {
height: 130vh;
}
https://jsfiddle.net/dm8zrabx/
$('.menu-btn').on('click', function() {
$('.menu').toggleClass('active');
$('body').toggleClass('lock-scroll');
$('html').toggleClass('lock-scroll');
})
body {
width: 100%;
background-color: lavender;
}
body.lock-scroll {
overflow: hidden;
}
html.lock-scroll {
overflow: hidden;
}
header {
width: 100%;
height: 3em;
position: fixed;
top: 0;
background-color: beige;
z-index: 100;
}
.menu-btn {
width: 1em;
height: 1em;
background-color: lightseagreen;
position: fixed;
z-index: 300;
top: 1em;
right: 1em;
}
.menu {
width: 100%;
height: 130vh;
position: fixed;
top: 0;
z-index: 200;
padding-top: 40%;
background-color: rgba(255,255,255, .5);
transform: translateX(100%);
transition: all .5s ease;
}
.menu.active {
transform: translateX(0%);
}
.contents {
width: 100%;
padding-top: 50%;
height: 150vh;
background-color: lightblue;
}
h2 {
text-align: center;
}
/* newly added style */
.menu {
height: 100%;
overflow: scroll;
}
.menu-content {
height: 130vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<h2> Top area </h2>
<div class="menu-btn">
</div>
<div class="menu">
<div class="menu-content">
<h2> Hamburger menu area </h2>
</div>
</div>
</header>
<section class="contents">
<h2> Contents area </h2>
</section>
</body>
Note: See the result in full-page view

How to animate a text cutout over a background-image

I'm trying to imitate the animation shown below using CSS and/or JavaScript. I have created the beginning step but cannot figure out how to animate the zooming in part.
body {
background-color: #222;
}
.container {
background-image: url(test.jpg);
height: 96vh;
width: 100%;
}
.box {
background-color: #fff;
height: 98vh;
width: 100%;
}
.big {
font-size: 17vw;
background: url(http://viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg) 33px 659px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding-top: 24vh;
margin-top: 0;
text-align: center;
animation: opac 2s infinite;
}
#keyframes opac {
0%, 100% {
/*rest the move*/
}
50% {
/*move some distance in y position*/
}
}
<div class="container">
<div class="box">
<h1 class="big">TRY THIS</h1>
</div>
<!--end of box-->
</div>
<!--end of conatiner-->
And my TARGET:

A posibility, using 2 elements, one for the image and another for the text, and blend mode to achieve transparency:
Note that blend mode is not supported by IE or Edge
body,
html {
width: 100%;
height: 100%;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: url(http://placekitten.com/1000/600);
background-size: cover;
}
.box {
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background-color: white;
overflow: hidden;
mix-blend-mode: lighten;
}
.big {
position: absolute;
left: 20%;
top: 30%;
font-size: 10vw;
color: black;
animation: zoom 4s infinite;
}
#keyframes zoom {
from {
transform: scale(0.2, 0.2);
}
to {
transform: scale(4, 4);
}
}
<div class="container">
<div class="box">
<div class="big">TRY THIS</div>
</div>
</div>

I came up with a solution based on your original code using -webkit-text-fill-color and -webkit-background-clip-text and added font-size and a negative text-indent for the animation. The negative text-indent is needed to keep the text "centered" within the element because text within elements always wants to bump up against the left edge.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 160px;
overflow: hidden;
position: absolute;
width: 600px;
}
#image {
animation: scale 3000ms linear infinite;
background: url(http://viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg);
bottom: 0;
font: 96px "Arial";
font-weight: bold;
left: 0;
line-height: 160px;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
top: 0;
text-transform: uppercase;
white-space: nowrap;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
#keyframes scale {
0% {
font-size: 66px;
text-indent: 0;
}
16% {
font-size: 132px;
text-indent: 0;
}
80% {
font-size: 330px;
text-indent: -500px;
}
100% {
font-size: 10000px;
text-indent: -25300px;
}
}
<div id="container">
<div id="image">try this</div>
</div>
Basically, I'm adjusting the text-indent so that as the font-size increases the middle "T" stays centered (it's really not in the center though) and then the text becomes so big (10,000 pixels!) that the "T" does the "reveal" effect by filling the space.

body {
margin: 0;
}
.image {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url("https://www.viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg");
background-size: cover;
overflow: hidden;
}
.text-container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: white;
mix-blend-mode: lighten;
animation: 2s scale cubic-bezier(0.88, 0, 1, 0.1) infinite;
}
.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) translateX(-0.3em);
font: bold 7vw "Arial", sans-serif;
white-space: nowrap;
}
#keyframes scale {
from {
transform: scale(1);
}
to {
transform: scale(500);
}
}
<div class="image">
<div class="text-container">
<div class="text">TRY THIS</div>
</div>
</div>

Menu not open when clicking open button

I have one problem with my menu.
This is the problem DEMO from codepen.io
In this demo you can see there is a left sidebar menu area. When you change the browser size width < 1050px then the menu opacity:0; and the button will showing on top left side (blue button).
The problem is left sidebar not opening when i click the button. The working example is here without css media screen.
Working DEMO without css media screen
Here is a code:
HTML
<div class="header-left">
Change browser size width < 1050px
<div class="menu-area">
<div class="icon-header-home-menu menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>
CSS
.header-left{
float: left;
width: 50%;
background-color:black;
color:#ffffff;
padding:10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color:blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color:red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color:green;
}
.menu-area-wrap.active {
opacity:1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide{
display:none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display:block;
}
.menu-area-wrap{
position: absolute;
top: 42px;
left:0; /*changed here*/
width:100%; /*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
display:none;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity:0;
}
}
JS
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".icon-header-home-menu").click (function(e){
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click (function(e){
e.stopPropagation();
});

Try this inside your media screen:
.menu-area-wrap.active {
display: block;
}
Your media screen has display: none while your active class doesn't have display:block.
So, in desktop you were changing opacity but in mobile you are changing displays, therefore, your active class won't do anything because it still has display:none overwriting your opacity: 0.
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".tt").click(function(e) {
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click(function(e) {
e.stopPropagation();
});
.header-left {
float: left;
width: 50%;
background-color: black;
color: #ffffff;
padding: 10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color: blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color: red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color: green;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide {
display: none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display: block;
}
.menu-area-wrap.active {
display: block;
}
.menu-area-wrap {
position: absolute;
top: 42px;
left: 0;
/*changed here*/
width: 100%;
/*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
display: none;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-left">
Change browser size width
< 1050px <div class="menu-area">
<div class="icon-header-home-menu tt menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>
With animation:
Removed the display: none in mobile.
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".tt").click(function(e) {
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click(function(e) {
e.stopPropagation();
});
.header-left {
float: left;
width: 50%;
background-color: black;
color: #ffffff;
padding: 10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color: blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color: red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color: green;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide {
display: none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display: block;
}
.menu-area-wrap {
position: absolute;
top: 42px;
left: 0;
/*changed here*/
width: 100%;
/*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity: 0;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-left">
Change browser size width
< 1050px <div class="menu-area">
<div class="icon-header-home-menu tt menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>