Related
I have copied and paste the following code and I want to apply this to my website. It should float at the right bottom.
I'm just a noob, I haven't tried anything, since I just don't know.
<div class="float" />
<div class="dot" />
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="verkoper" src="https://d2tyltutevw8th.cloudfront.net/media/image/trump-round-1500174198.jpg" />
</div>
<div class="at-about-fab__meta">
<h2>Call us now!</h2>
<p>12345567890</p>
</div>
</div>
</div>
.float{
position:fixed;
width:290px;
height:100px;
bottom:14px;
right:10px;
background-color:4d4d4d;
opacity: 0.1;
border-radius:50px;
box-shadow: 2px 2px 3px #999;
opacity=50;
}
.dot {
position: absolute;
right: 215px;
display:block;
z-index:1000000;
bottom: 30px;
height: 35px;
width: 35px;
background-color: #bbb;
border-radius: 50%;
width: 14px;
height: 14px;
background: #228B22;
-webkit-transition:opacity 0.2s ease;
-moz-transition:opacity 0.2s ease;
-o-transition:opacity 0.2s ease;
}
.dot:hover{
// Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1)
background-color:rgba(100,100,100,0);
opacity:0;
}
.at-about-fab {
z-index: 999999;
position: fixed;
right: 40px;
bottom: 40px;
display: flex;
align-items: center;
flex-direction: row;
}
.at-about-fab:hover .at-about-fab__meta {
opacity: 1;
}
.at-about-fab__thumbnail {
position: absolute;
top: 50%;
left: -88px;
background: #FFFFFF;
width: 78px;
height: 78px;
border: 4px solid #EEEEEE;
border-radius: 100%;
padding: 1px;
box-sizing: border-box;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow: show;
cursor: pointer;
}
.at-about-fab__thumbnail img {
display: block;
width: 100%;
border-radius: 100%;
}
.at-about-fab__meta {
font-family: 'Open Sans', sans-serif;
opacity: 1;
transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
margin: 0;
padding: 0;
}
.at-about-fab__meta h2 {
color: #444444;
font-size: 14px;
font-weight: 500;
}
.at-about-fab__meta p {
color: #1a9228;
font-size: 24px;
font-weight: 300;
}
.at-about-fab__meta a {
color: inherit;
font-weight: 700;
text-decoration: none;
}
I want just everything floating at the right corner, i cannot seperate css and html since its going via tag manager.
By the way, I also please want to blur the background of the class=float, but do not know how.
Can someone help me?
So I checked your code and there were a few typos. First there is a </div> too much. And in your css you use opacity, change the = to :. Also the dot position has to be fixed and not absolute. And for the blur you can add this backdrop-filter: blur(10px);
.float{
position:fixed;
width:290px;
height:100px;
bottom:14px;
right:10px;
background-color:4d4d4d;
opacity: 0.1;
border-radius:50px;
box-shadow: 2px 2px 3px #999;
opacity:50;
backdrop-filter: blur(10px);
}
.dot {
position: fixed;
right: 215px;
display:block;
z-index:1000000;
bottom: 30px;
height: 35px;
width: 35px;
background-color: #bbb;
border-radius: 50%;
width: 14px;
height: 14px;
background: #228B22;
-webkit-transition:opacity 0.2s ease;
-moz-transition:opacity 0.2s ease;
-o-transition:opacity 0.2s ease;
}
.dot:hover{
background-color:rgba(100,100,100,0);
opacity:0;
}
.at-about-fab {
z-index: 999999;
position: fixed;
right: 40px;
bottom: 40px;
display: flex;
align-items: center;
flex-direction: row;
}
.at-about-fab:hover .at-about-fab__meta {
opacity: 1;
}
.at-about-fab__thumbnail {
position: absolute;
top: 50%;
left: -88px;
background: #FFFFFF;
width: 78px;
height: 78px;
border: 4px solid #EEEEEE;
border-radius: 100%;
padding: 1px;
box-sizing: border-box;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow: show;
cursor: pointer;
}
.at-about-fab__thumbnail img {
display: block;
width: 100%;
border-radius: 100%;
}
.at-about-fab__meta {
font-family: 'Open Sans', sans-serif;
opacity: 1;
transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
margin: 0;
padding: 0;
}
.at-about-fab__meta h2 {
color: #444444;
font-size: 14px;
font-weight: 500;
}
.at-about-fab__meta p {
color: #1a9228;
font-size: 24px;
font-weight: 300;
}
.at-about-fab__meta a {
color: inherit;
font-weight: 700;
text-decoration: none;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna.
<div class="float">
</div>
<div class="dot"></div>
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="verkoper" src="https://d2tyltutevw8th.cloudfront.net/media/image/trump-round-1500174198.jpg" />
</div>
<div class="at-about-fab__meta">
<h2>Call us now!</h2>
<p>12345567890</p>
</div>
</div>
Hello #Rick float is the property of the class, not a class. Use following style.
.your_class_name
{
float: right; /* Left or right depends on your design */
}
I'm working to create an infinite autoplay carousel based on the example here: https://codepen.io/jackoliver/pen/qVbQqW
Notice how smooth the codepen example is, it never jumps when the carousel resets from the last to first item.
Mine is less smooth - Mine is jumping on reset and I can't figure out why...
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-456px * 2));
}
}
.quotes-famous {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
height: 500px;
margin: auto;
overflow: hidden;
position: relative;
width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
height: 500px;
position: absolute;
width: 200px;
z-index: 2;
}
.quotes-famous::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
.quotes-famous::before {
left: 0;
top: 0;
}
.quotes-famous__track {
animation: scroll 1s linear infinite;
display: flex;
width: calc(456px * 4);
}
.quotes-famous__quote {
background: #efefef;
height: 500px;
width: 456px;
}
<div class="quotes-famous">
<div class="quotes-famous__track">
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
</div>
</div>
</div>
The codepen example doubles up on all the images (or quotes in your case).
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-456px * 2));
}
}
.quotes-famous {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
height: 500px;
margin: auto;
overflow: hidden;
position: relative;
width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
height: 500px;
position: absolute;
width: 200px;
z-index: 2;
}
.quotes-famous::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
.quotes-famous::before {
left: 0;
top: 0;
}
.quotes-famous__track {
animation: scroll 4s linear infinite;
display: flex;
width: calc(456px * 4);
}
.quotes-famous__quote {
background: #efefef;
height: 500px;
width: 456px;
}
<div class="quotes-famous">
<div class="quotes-famous__track">
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
</div>
</div>
</div>
Why does adding min-width break the smoothness of the animation?
If the code snippet uses the following it works perfectly (not jumping)
.quotes-famous__quote {
background: #efefef;
height: 500px;
width: 456px;
margin: 0 32px;
}
Problem is I need a min-width of 456px which causes it to break. Why?
.quotes-famous__quote {
background: #efefef;
height: 500px;
width: 456px;
min-width: 456px;
margin: 0 32px;
}
Why does the min-width cause this animation to break, be jumpy and not appear like an infinite carousel?
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-456px * 2));
}
}
.quotes-famous {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
height: 500px;
margin: auto;
overflow: hidden;
position: relative;
width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
height: 500px;
position: absolute;
width: 200px;
z-index: 2;
}
.quotes-famous::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
.quotes-famous::before {
left: 0;
top: 0;
}
.quotes-famous__track {
animation: scroll 2s linear infinite;
display: flex;
width: calc(456px * 4);
}
.quotes-famous__quote {
background: #efefef;
height: 500px;
width: 456px;
min-width: 456px;
margin: 0 32px;
}
<div class="quotes-famous">
<div class="quotes-famous__track">
<div class="quotes-famous__quote">
<p class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
</div>
</div>
</div>
It's a matter of calculation. You need to adjust the calc of the transform like below considering the width of 4 elements and their margin:
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc((-456px * 4) - (8 * 32px)));
}
}
.quotes-famous {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
height: 500px;
margin: auto;
overflow: hidden;
position: relative;
width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
height: 500px;
position: absolute;
width: 200px;
z-index: 2;
}
.quotes-famous::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
.quotes-famous::before {
left: 0;
top: 0;
}
.quotes-famous__track {
animation: scroll 4s linear infinite;
display: flex;
width: calc(456px * 4);
}
.quotes-famous__quote {
background: #efefef;
height: 500px;
width: 456px;
min-width: 456px;
margin: 0 32px;
}
<div class="quotes-famous">
<div class="quotes-famous__track">
<div class="quotes-famous__quote">
<p class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
</div>
</div>
</div>
Try this:
See it here https://jsfiddle.net/j5nuc7s1/5/
I made 2 changes:
1) Added new class
2) Changed p to div
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-456px * 2));
}
}
.quotes-famous {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
height: 500px;
margin: auto;
overflow: hidden;
position: relative;
width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
height: 500px;
position: absolute;
width: 200px;
z-index: 2;
}
.quotes-famous::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
.quotes-famous::before {
left: 0;
top: 0;
}
.quotes-famous__track {
animation: scroll 2s linear infinite;
display: flex;
width: calc(456px * 4);
}
.quotes-famous__quote {
background: #efefef;
height: 500px;
width: 456px;
margin: 0 32px;
overflow:hidden;
}
/* added new */
.quotes-famous__quote .quotes-famous__text{
min-width: 456px;
}
<div class="quotes-famous">
<div class="quotes-famous__track">
<div class="quotes-famous__quote">
<div class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</div>
</div>
<div class="quotes-famous__quote">
<div class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</div>
</div>
<div class="quotes-famous__quote">
<div class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</div>
</div>
<div class="quotes-famous__quote">
<div class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</div>
</div>
<div class="quotes-famous__quote">
<div class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</div>
</div>
<div class="quotes-famous__quote">
<div class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</div>
</div>
<div class="quotes-famous__quote">
<div class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</div>
</div>
<div class="quotes-famous__quote">
<div class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</div>
</div>
</div>
</div>
I have a pure CSS menu that is causing me some issues mostly on small screens/mobile devices.
Issue 1
When the menu is open the background is still scrollable. I would like the focus to be on the menu, and therefore the background would not scroll when the menu is open.
Issue 2
On a small screen the menu items are collapsed by default and expand once clicked on to show submenu. If one or two are expanded and the content goes beyond the devices window there is no way to scroll down to see the content outside of the current window view. If the menu is expanded it needs to be scrollable.
I experimented with the overflow property but can't fix the issue. hoping someone know how. Thanks!
body {
margin: 0;
font-family: serif;
background-color: #f4f4f4;
}
html {
color: #222;
font-size: 1.2em;
line-height: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* ==========================================================================
Global Header
========================================================================== */
.global-nav {
/*overflow: hidden;*/
background-color: #FFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 28px 0 0 0;
}
.header {
background-color: #fff;
margin: 0 auto;
width: 1170px;
z-index: 3;
clear: both;
}
.header div.menu {
overflow: hidden;
background-color: #fff;
padding: 20px 0 0 0;
-webkit-box-shadow: 0px 3px 3px 0px rgba(136,136,136,1);
-moz-box-shadow: 0px 3px 3px 0px rgba(136,136,136,1);
box-shadow: 0px 3px 3px 0px rgba(136,136,136,1);
z-index: 99999999;
}
.header img {
vertical-align: baseline;
}
.header div.menu ul.menu-links {
margin: 0;
padding: 0;
list-style: none;
}
.menu-col-one {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-two {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-three {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-four {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-five {
display: none;
}
.header div.menu ul.menu-links li a {
display: block;
padding: 20px 0 0 0;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
width: 100%;
position: fixed;
left: 0;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
padding: 31px 32px 25px 0;
position: relative;
}
.header .menu-icon .navicon {
background: #00539D;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 40px;
}
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {
background: #00539D;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 12px;
}
.header .menu-icon .navicon:after {
top: -12px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 100%;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.ac-container {
width: 1170px;
margin: 40px auto 30px auto;
text-align: left;
}
.ac-container article {
overflow: visible;
padding-right: 30px;
}
.ac-container input {
display: none;
}
.ac-container label {
position: relative;
z-index: 20;
display: block;
cursor: pointer;
font-size: 25px;
}
#media only screen and (max-width: 1169px) {
.header {
margin: 0 2%;
width: 96%;
padding-right: 0;
}
.ac-container {
width: 96%;
padding: 0 2%;
}
}
#media only screen and (max-width: 970px) {
.global-nav {
padding: 14px 0 0 0;
}
.header .menu-icon {
padding: 31px 1% 25px 0;
}
.header-content-right {
display: none;
}
.header div.menu {
margin-top: 0px;
}
.header div.menu ul.menu-links {
margin: 0;
}
.menu-col-one {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-left: 0%;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-two {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-three {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-four {
width: 100%;
margin-right: 0%;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-five {
width: 100%;
margin-right: 0%;
display: block;
}
.header div.menu ul li.list-header {
display: block !important;
}
.header div.menu ul li.list-item {
display: none;
}
.ac-container label {
font-size: 16px;
color: #636c76;
font-weight: bold;
letter-spacing: 0.2px;
}
.ac-container input:checked + label, .ac-container input:checked + label:hover {
color: #454545;
}
.ac-container input + label:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: -6px;
}
.ac-container article {
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
position: relative;
z-index: 10;
-webkit-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-moz-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-o-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-ms-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
max-height: 0;
font-size: 14px;
}
.ac-container article a {
color: #636c76;
}
.ac-container article p {
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.ac-container article ul li {
padding: 10px 0;
}
.ac-container article ul li span {
display: none;
}
.ac-container input:checked ~ article {
-webkit-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-moz-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-o-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-ms-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
max-height: 500px;/*added*/
}
}
<!-- [Start] Header Section-->
<section class="global-nav" role="region" aria-label="globalnav">
<header class="header" role="banner">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<div class="menu">
<section class="ac-container">
<div class="menu-col-one">
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">DD 1</label>
<article class="ac-small">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-two">
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">DD 2</label>
<article class="ac-medium">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-three">
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">DD 3</label>
<article class="ac-large">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-four">
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">DD 4</label>
<article class="ac-large">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-five">
<div class="btn-group">
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
</div>
</div>
</section>
</div>
</header>
</section>
<!-- [End] Header Section-->
<!-- [Start] Main Content -->
<main role="main">
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<!-- [End] Main Content -->
</main>
Quick answer:
Add overflow: auto on the main and .menu
Add height: 100% to html, body, main.
Add max-height: 100% to .menu
Made header smaller by 17px and only displayed box-shadow on the bottom. You'll have to override this for mobile devices where the scrollbar is completely removed, though...
Personally, I would just add a padding at the top of the body, then let the menu slide over the content. It would be the most elegant.
body {
margin: 0;
font-family: serif;
background-color: #f4f4f4;
height: 100%; /* My code */
}
html {
color: #222;
font-size: 1.2em;
line-height: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%; /* My code */
overflow: hidden; /* My code */
}
/* My code */
main {
height: 100%;
overflow: auto;
}
/* ==========================================================================
Global Header
========================================================================== */
.global-nav {
/*overflow: hidden;*/
background-color: #FFF;
position: fixed;
top: 0;
left: 0;
width: calc(100% - 17px); /* My code */
z-index: 9999;
padding: 28px 0 0 0;
}
.header {
background-color: #fff;
margin: 0 auto;
width: 1170px;
z-index: 3;
clear: both;
}
.header div.menu {
overflow: hidden;
background-color: #fff;
padding: 20px 0 0 0;
-webkit-box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */
-moz-box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */
box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */
z-index: 99999999;
}
.header img {
vertical-align: baseline;
}
.header div.menu ul.menu-links {
margin: 0;
padding: 0;
list-style: none;
}
.menu-col-one {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-two {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-three {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-four {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-five {
display: none;
}
.header div.menu ul.menu-links li a {
display: block;
padding: 20px 0 0 0;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
width: calc(100% - 17px); /* My code */
position: fixed;
left: 0;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
padding: 31px 32px 25px 0;
position: relative;
}
.header .menu-icon .navicon {
background: #00539D;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 40px;
}
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {
background: #00539D;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 12px;
}
.header .menu-icon .navicon:after {
top: -12px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: calc(100% - 20px); /* My code */
overflow: auto; /* My code */
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.ac-container {
width: 1170px;
margin: 40px auto 30px auto;
text-align: left;
}
.ac-container article {
overflow: visible;
padding-right: 30px;
}
.ac-container input {
display: none;
}
.ac-container label {
position: relative;
z-index: 20;
display: block;
cursor: pointer;
font-size: 25px;
}
#media only screen and (max-width: 1169px) {
.header {
margin: 0 2%;
width: 96%;
padding-right: 0;
}
.ac-container {
width: 96%;
padding: 0 2%;
}
}
#media only screen and (max-width: 970px) {
.global-nav {
padding: 14px 0 0 0;
}
.header .menu-icon {
padding: 31px 1% 25px 0;
}
.header-content-right {
display: none;
}
.header div.menu {
margin-top: 0px;
}
.header div.menu ul.menu-links {
margin: 0;
}
.menu-col-one {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-left: 0%;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-two {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-three {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-four {
width: 100%;
margin-right: 0%;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-five {
width: 100%;
margin-right: 0%;
display: block;
}
.header div.menu ul li.list-header {
display: block !important;
}
.header div.menu ul li.list-item {
display: none;
}
.ac-container label {
font-size: 16px;
color: #636c76;
font-weight: bold;
letter-spacing: 0.2px;
}
.ac-container input:checked + label, .ac-container input:checked + label:hover {
color: #454545;
}
.ac-container input + label:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: -6px;
}
.ac-container article {
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
position: relative;
z-index: 10;
-webkit-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-moz-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-o-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-ms-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
max-height: 0;
font-size: 14px;
}
.ac-container article a {
color: #636c76;
}
.ac-container article p {
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.ac-container article ul li {
padding: 10px 0;
}
.ac-container article ul li span {
display: none;
}
.ac-container input:checked ~ article {
-webkit-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-moz-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-o-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-ms-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
max-height: 500px;/*added*/
}
}
<!-- [Start] Header Section-->
<section class="global-nav" role="region" aria-label="globalnav">
<header class="header" role="banner">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<div class="menu">
<section class="ac-container">
<div class="menu-col-one">
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">DD 1</label>
<article class="ac-small">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-two">
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">DD 2</label>
<article class="ac-medium">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-three">
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">DD 3</label>
<article class="ac-large">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-four">
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">DD 4</label>
<article class="ac-large">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-five">
<div class="btn-group">
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
</div>
</div>
</section>
</div>
</header>
</section>
<!-- [End] Header Section-->
<!-- [Start] Main Content -->
<main role="main">
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<!-- [End] Main Content -->
</main>
I have a button nested inside of 3 div's. The innermost div where the button is nested has a higher z-index of all the other div's. Still cannot click the button. What am I doing wrong?
* {
font-family: 'Raleway', sans-serif;
}
#main {
background: url('../image/bg2.jpg');
background-size: cover;
background-position: center;
height: 720px;
width: 2000px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: -50px;
position: relative;
z-index: -50;
}
#content {
z-index: -25;
}
#content h3 {
font-size: 8rem;
color: #fff;
}
#button {
z-index: 99999!important;
}
.submain h3 {
display: inline;
padding: 25px;
}
<!--Main-->
<div id="main">
<div id="content">
<h3><i class="fa fa-cogs" aria-hidden="true"></i>DNS<sup>2</sup></a></h3>
<div id="button">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Learn More</button>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie dignissim lacus id tempus. Donec malesuada efficitur ultricies. Vestibulum nec lobortis est, quis efficitur nunc. Proin finibus, massa in pharetra tempus, velit ante dictum massa,
eget porttitor arcu tellus eu orci. Quisque vitae ante lacus. In tortor purus, tristique nec felis ac, accumsan malesuada risus. Nam consectetur eget lacus vel condimentum. Donec in nisl volutpat, cursus arcu ac, mattis neque. Pellentesque metus
nisi, maximus eget metus sed, tincidunt euismod nisl. Quisque sed ipsum imperdiet, semper quam ac, varius leo.
</div>
</div>
</div>
</div>
please change that
z-index: -50;
to any positive value.
Then It will work
Here is 2 ways :
A)
body {
position: relative;
z-index: 0;
}
*{
font-family: 'Raleway', sans-serif;
}
body { position: relative; z-index: 0; }
#main {
background: url('../image/bg2.jpg');
background-size: cover;
background-position: center;
height: 720px;
width: 2000px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: -50px;
position: relative;
z-index: -50;
}
#content{
z-index: -25;
}
#content h3{
font-size: 8rem;
color: #fff;
}
#button{
z-index: 999!important;
}
.submain h3{
display: inline;
padding: 25px;
}
<div id="main">
<div id="content">
<h3><i class="fa fa-cogs" aria-hidden="true"></i>DNS<sup>2</sup></a></h3>
<div id ="button">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Learn More</button>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie dignissim lacus id tempus. Donec malesuada efficitur ultricies. Vestibulum nec lobortis est, quis efficitur nunc. Proin finibus, massa in pharetra tempus, velit ante dictum massa, eget porttitor arcu tellus eu orci. Quisque vitae ante lacus. In tortor purus, tristique nec felis ac, accumsan malesuada risus. Nam consectetur eget lacus vel condimentum. Donec in nisl volutpat, cursus arcu ac, mattis neque. Pellentesque metus nisi, maximus eget metus sed, tincidunt euismod nisl. Quisque sed ipsum imperdiet, semper quam ac, varius leo.
</div>
</div>
</div>
OR
B)
#main {
z-index:0;
//more code....
}
*{
font-family: 'Raleway', sans-serif;
}
#main {
background: url('../image/bg2.jpg');
background-size: cover;
background-position: center;
height: 720px;
width: 2000px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: -50px;
position: relative;
z-index: 0;
}
#content{
z-index: -25;
}
#content h3{
font-size: 8rem;
color: #fff;
}
#button{
z-index: 999!important;
}
.submain h3{
display: inline;
padding: 25px;
}
<div id="main">
<div id="content">
<h3><i class="fa fa-cogs" aria-hidden="true"></i>DNS<sup>2</sup></a></h3>
<div id ="button">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Learn More</button>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie dignissim lacus id tempus. Donec malesuada efficitur ultricies. Vestibulum nec lobortis est, quis efficitur nunc. Proin finibus, massa in pharetra tempus, velit ante dictum massa, eget porttitor arcu tellus eu orci. Quisque vitae ante lacus. In tortor purus, tristique nec felis ac, accumsan malesuada risus. Nam consectetur eget lacus vel condimentum. Donec in nisl volutpat, cursus arcu ac, mattis neque. Pellentesque metus nisi, maximus eget metus sed, tincidunt euismod nisl. Quisque sed ipsum imperdiet, semper quam ac, varius leo.
</div>
</div>
</div>
button is descendant of elements which are overlapped by body due to negative z-index of #main and #content. You can remove those negative z-indexes.
Demo:
* {
font-family: 'Raleway', sans-serif;
}
#main {
background: url('../image/bg2.jpg');
background-size: cover;
background-position: center;
height: 720px;
width: 2000px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: -50px;
position: relative;
}
#content h3 {
font-size: 8rem;
color: #fff;
}
#button {
z-index: 99999!important;
}
.submain h3 {
display: inline;
padding: 25px;
}
<!--Main-->
<div id="main">
<div id="content">
<h3><i class="fa fa-cogs" aria-hidden="true"></i>DNS<sup>2</sup></a></h3>
<div id="button">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Learn More</button>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie dignissim lacus id tempus. Donec malesuada efficitur ultricies. Vestibulum nec lobortis est, quis efficitur nunc. Proin finibus, massa in pharetra tempus, velit ante dictum massa,
eget porttitor arcu tellus eu orci. Quisque vitae ante lacus. In tortor purus, tristique nec felis ac, accumsan malesuada risus. Nam consectetur eget lacus vel condimentum. Donec in nisl volutpat, cursus arcu ac, mattis neque. Pellentesque metus
nisi, maximus eget metus sed, tincidunt euismod nisl. Quisque sed ipsum imperdiet, semper quam ac, varius leo.
</div>
</div>
</div>
</div>