How do I get my site to scroll properly on mobile - javascript

I am building a site with a js menu that loads content into a container div. The site works fine on desktop, and on the respsonsive mobile emulator on my desktop browser, but on my phone it doesn't scroll.
https://clippingpointmedia.co.za/cpm2019dev/
This is my main stylesheet:
/* CSS Document */
body {
padding: 0;
margin: 0;
background-color: #222;
font-family: 'Comfortaa';
}
#container {
display: block;
padding: 0;
}
#content {
margin-top: 0;
margin-right: 70px;
margin-left: 70px;
margin-bottom: 0px;
max-height:100vh;
overflow:hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
#page-content {
width: 100%;
min-height: 100vh;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #2693C1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#mobile-nav, .mobile-footer {
display: none;
}
.side-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: -300px;
width: 360px;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
.side-menu {
width: 300px;
background-color: #fff;
}
.menu-toggle, .mobile-menu-toggle {
width: 60px;
height: 60px;
background-size: 90%;
background-image: url("../images/MenuButtonOpen.svg");
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
float: right;
position: relative;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
}
.menu-top {
height: 150px;
padding: 20px 0 0;
text-align: center;
}
#mobile-cp-logo {
background: url("../images/HomeIcon-light.svg") no-repeat center;
height: 45px;
padding-top: 10px;
margin-bottom: 10px;
margin-left: -30px
}
#cp-logo {
height: 120px;
max-width: 175px;
display: block;
margin: 0 auto 20px;
background: url("../images/HomeIcon-dark.svg") no-repeat center;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
}
#pt-container {
padding: 15px 0;
background-color: #ccc;
text-align: center;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
width: 100%;
}
#prod-title, #digi-title, #event-title {
background-color: #ccc;
text-transform: uppercase;
color: #fff;
border-top: 1px solid #2693C1;
border-bottom: 1px solid #2693C1;
padding: 10px 0;
width: 66.66667%;
margin: 0 auto;
font-size: 20px;
font-weight: 300;
display: none;
}
.side-menu ul {
list-style: none;
}
.side-ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-ul li a {
display: block;
color: #fff;
text-align: center;
width: 100%;
padding: 30px 0;
background: linear-gradient(#444 0%, #1c1c1c 100%);
font-weight: 700;
font-size: 18px;
text-transform: lowercase;
text-decoration: none;
}
.side-ul li a::after, .top-ul li a::after {
float: right;
content: url("../images/arrow-right.svg");
padding-right: 20px;
padding-left: -20px;
}
.side-ul li a:focus::before, .top-ul li a:focus::before {
float: left;
content: url("../images/arrow-left.svg");
padding-right: -20px;
padding-left: 20px;
}
.side-sub-ul ul, .side-footer ul, .mobile-sub-ul ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
.side-sub-ul li, .side-footer li, .mobile-sub-ul li {
float: left;
width: 33.333333%;
}
.side-sub-ul li a, .side-footer li a, .mobile-sub-ul li a {
display: block;
text-align: center;
text-transform: lowercase;
text-decoration: none;
width: 100%;
}
.side-sub-ul li a, .mobile-sub-ul li a {
color: #606060;
background-color: #ccc;
font-size: 13px;
padding: 18px 0;
margin: 7px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.side-sub-ul li, .mobile-sub-ul li {
background-color: #ccc;
list-style-type: none;
}
.side-footer li a {
color: #273658;
font-size: 8px;
padding: 5px 0;
background-color: #fff;
width: 100%;
}
.show {
display: initial
}
.hide {
display: none;
}
.menu-item-tablet {
display: none !important;
}
.wes-hi {
border-top: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
}
.social {
position: fixed;
width: 60px;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.social a {
display: block;
text-align: center;
padding: 9px 0;
}
.mobile-footer a {
color: #fff;
font-size: 8px;
text-decoration: none;
padding: 0 5px;
}
.mobile-footer li {
display: inline-block;
}
#totop-btn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: rgba(0,0,0,0.8);
color: white;
cursor: pointer;
padding: 1px 14px 7px 15px;
font-size: 30px;
border-radius: 0;
transform: rotate(-90deg);
}
#totop-btn:hover {
color: #2693C1;
}
#bg {
position: fixed;
top: 0;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
z-index: -9;
background: url("../images/full-bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Responsive Queries */
#media only screen and (max-width: 992px) {
/* Tablet View */
.menu-item {
display: none !important;
}
.menu-item-tablet {
display: block !important;
}
#content {
margin-right: 0;
/* padding-top: 10px;/* height: calc(100vh - 10px);*/
}
.social {
width: 100%;
bottom: 0;
transform: none;
text-align: center;
background: rgba(0,0,0,0.8);
top: auto;
position:absolute;
}
.social a {
display: inline-block;
padding: 5px;
}
.social a img {
transform: scale(0.75);
}
.mobile-footer {
display: inline-block;
vertical-align: 95%;
}
#totop-btn {
bottom: 50px;
}
.side-footer {
display: none
}
}
#media only screen and (max-width: 359px), (orientation: landscape) and (max-width:600px) {
/* Small Mobile View */
#container {
display: block;
width: 100%;
min-height: -webkit-fill-available;
}
#content {
margin-left: 0;
margin-top: 0;
padding-top: 0;
}
#page-content {
min-height: calc(100vh - 138px);
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.side-nav {
display: none;
position:absolute;
visibility: hidden;
z-index: -99999;
}
#mobile-nav {
/* position: fixed;*/
top: 0;
width: 100%;
display: block;
background-color: rgba(0,0,0,0.8);
padding: 10px 0;
height: 55px;
overflow: hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
.mobile-menu-toggle {
height: 55px;
}
.top-ul li a {
display: block;
color: #fff;
text-align: center;
width: 100%;
padding: 20px 0;
background: linear-gradient(#444 0%, #1c1c1c 100%);
font-weight: 700;
font-size: 14px;
text-transform: lowercase;
text-decoration: none;
}
.mobile-footer {
/* vertical-align: top;*/
padding-bottom: 3px;
}
.social {
height: 63px;
}
.social a {
padding: 4px 10px 0;
}
.side-sub-ul li a, .mobile-sub-ul li a {
padding: 15px 0;
margin: 7px 0;
}
}
And the relevant html:
<body>
<div id="loader"></div>
<div id="container" style="display: none">
<div id="mobile-nav">
<div class="mobile-menu-toggle" onclick="togglemobilenav()"></div>
<ul class="top-ul">
<div id="mobile-cp-logo"></div>
<li>Production
</li>
<li>Digital
</li>
<li>Events
</li>
</ul>
<ul class="mobile-sub-ul">
<li>About
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
<div class="side-nav">
<div class="menu-toggle" onclick="togglenav()"></div>
<div class="side-menu">
<div class="menu-top">
<div id="cp-logo"></div>
<div id="pt-container" style="display:none">
<div id="prod-title">Production</div>
<div id="digi-title">Digital</div>
<div id="event-title">Events</div>
</div>
</div>
<ul class="side-ul">
<li>Production
</li>
<li>Production
</li>
<li>Digital
</li>
<li>Digital
</li>
<li>Events
</li>
<li>Events
</li>
</ul>
<ul class="side-sub-ul">
<li>About
</li>
<li>About
</li>
<li>News
</li>
<li>News
</li>
<li>Contact
</li>
<li>Contact
</li>
</ul>
<ul class="side-footer">
<li>© clipping point 2019
</li>
<li>our terms & conditions
</li>
<li>our terms
</li>
<li>our privacy policy
</li>
<li>our privacy policy
</li>
</ul>
</div>
</div>
<!-- content will be loaded here -->
<div id="content"></div>
<div class="social">
<img src="images/li-icon.svg" alt="" />
<!-- <img src="images/fb-icon.svg" alt="" />-->
<img src="images/tw-icon.svg" alt="" />
<img src="images/yt-icon.svg" alt="" />
<img src="images/insta-icon.svg" alt="" />
<ul class="mobile-footer">
<li>© clipping point 2019
</li>
<li>our terms
</li>
<li>our privacy policy
</li>
</ul>
</div>
</div>
<div id="bg"></div>
</body>
I think it has something to do with the height of the #page-content div that I have set to min-height: calc(100vh - 138px) to compensate for the navbar at the top and the footer at the bottom.
Alternatively it may have something to do with visibility or positioning on the other elements. The layout of the site changes completely on smaller devices...
I've tried adding -webkit-overflow-scrolling: touch; to various elements, but even when I set it to all elements using * {} it still doesn't scroll.
I've read a dozen posts some of which point to position: fixed so i've tried switching to absolute positioning...
It seems like the whole page tries to scroll instead of the #content or #page-content div... i'm just at a loss! PLEASE HELP!!!

Add below CSS inside #media only screen and (max-width: 800px) in your style.css at line no 4030. It'll unable your parent scroll and disable your individual container scroll and also you add an individual footer in each container. So I also hide all container's footer and visible only last container footer. Try this I hope it'll help you out. Thanks
#ascensorBuilding {
overflow: auto !important;
}
#ascensorBuilding > div {
position: static !important;
overflow: hidden !important;
height: auto !important;
transform: none !important;
}
#ascensorBuilding > div .footer {
display: none;
}
#ascensorBuilding > div:last-child .footer {
display: block;
}

Related

Can a header slide under a sticky navbar?

I want the heading to "slide" along under the navbar. But now it looks like the picture.
I have just started and would be very happy about some support. I already have some experience with HTML and CSS but now I don't know what to do.
My goal is to have the heading slide under the navbar.
sorry for the long CSS:)
HTML (shorted)
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
text-align: center;
}
.nav div.logo {
float: left;
width: auto;
height: auto;
padding-left: 3rem;
}
.nav div.logo a {
text-decoration: none;
color: #fff;
font-size: 3.5rem;
}
.nav div.main_list {
height: 65px;
float: right;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav div.main_list ul li {
width: auto;
height: 65px;
padding: 0;
padding-right: 3rem;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
font-size: 2.4rem;
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-image: url(./../img/hero.jpg);
background-position: center-top;
background-size: cover;
}
div.home h1 {
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 15rem;
}
.navTrigger {
display: none;
}
.nav {
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
<nav class="nav">
<div class="container">
<div class="logo">
Leon Vu
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<span class="navTrigger">
</span>
</div>
</nav>

Click checked pure hamburger menu on window/document click

This question may seem similar to other questions but my hamburger menu uses checkbox to function and shows up at 768px width and below and I've been running into issues trying to close the open hamburger menu when the window/document is clicked.
I successfully got it to work using several ways but it still doesn't work as intended. The hamburger menu closes on document click alright, but the hamburger menu no longer closes on hamburger menu click as it originally should.
I have very little knowledge of Javascript/Jquery but I understand the bits I used to make other parts of the code work, but I just can't figure out how to make this particular one work.
Below is the code required to recreate the problem:
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
$('.menu-btn').click();
}
});
});
//With vanilla JS
/* window.onclick = function(event) {
if (document.getElementById('menu-btn').checked) {
document.getElementById('menu-btn').click();
}
} */
*,
*::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;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* 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;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>
Here is also a fiddle of the code.
Your issue is in this line:
$('.menu-btn').click();
It's enough you changed it to this:
e.preventDefault();
$('.menu-btn').click();
With the first line you prevent the default action while with the second you initiated the click event for the correct element.
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
e.preventDefault();
$('.menu-btn').click();
}
});
});
*,
*::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;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* 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;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>

target item(s) before hovered item (netflix-like hovering effect)

I am building a netflix-like slider in which a hovered slider-item pushes the other slider-items aside (depending on their location).
(see example code)
I can't find a solution to the following situation:
when I hover item 3, all other items are pushed aside to the left and right precisely as I want.
when item 2 is hovered, I want item 1 (or any item left of .item-left) to not move(stay in position). all others go as planned.
when item 4 is hovered, I want item 3/2/1 to keep the same distance from 4 as when not hovered. item 5 behaves correctly.
Hovered Items need to stay within the lightblue area (show-peek).
how can I make this work? Any help is welcome.
Thank you!
var slider = document.getElementById('sli');
var prev = document.getElementById('prev');
prev.addEventListener('click', prevC, false);
var next = document.getElementById('next');
next.addEventListener('click', nextC, false);
function prevC() {
alert('-1')
}
function nextC() {
alert('+1');
}
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background-color: white/* rgba(20, 23, 26, .1) */
;
}
.page-head {
display: block;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.page-head h1 {
font-size: 2em;
color: red;
text-align: center;
text-transform: uppercase;
padding: 20px;
}
/* general stuff */
.row {
display: block;
width: 400px;
margin: 0 auto;
/* overflow-x:hidden; */
}
.row-header {}
.row-header h2 {
font-size: 1.4em;
font-weight: 500;
padding: 8px 0;
margin-left: 45px;
}
.row-container {
position: relative;
}
.slider {
width: 100%;
padding: 0 41px 0 42px;
margin-top: 45px;
}
.slider .handle {
position: absolute;
top: 0;
bottom: 0;
z-index: 20;
width: 44px;
height: 69px;
text-align: center;
justify-content: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
color: #fff;
background: rgba(20, 20, 20, .3);
z-index: .9;
cursor: pointer;
line-height: 69px;
}
.handle-prev {
left: 0;
}
.handle-next {
right: 0;
}
.show-peek {
display: inline-block;
width: 316px;
height: 69px;
background: lightblue;
overflow-x: visible;
vertical-align: middle;
border: 1px dotted grey;
}
.slider-content {
display: block;
margin-top: 34px;
list-style: none;
white-space: nowrap;
transform: translateY(-50%) translateX(-100px);
text-align: center;
}
.slider-content:hover .slider-item {
opacity: 1;
transform: translateX(-49px);
transition-delay: .85s;
}
.slider-content:hover .slider-item:hover {
opacity: 1;
}
.slider-item {
position: relative;
vertical-align: middle;
display: inline-block;
list-style: none;
width: 100px;
height: 69px;
/* background-color: black; */
transition-duration: .3s;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(205, 20, 20, .3);
}
.slider-content li .bg-img {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center top;
}
.slider-content li:hover {
transition-delay: 0.1s;
width: 200px;
height: 130px;
}
.slider-content .left-item:hover {
transform: translateX(0);
z-index: 999;
}
.slider-content .left-item:hover~.slider-item {
transform: translate3d(0px, 0, 0);
}
.slider-content .right-item:hover {
margin-left: -50px;
z-index: 999;
}
.slider-content li:hover a .content {
transform: translateY(0) translateX(-50%);
transition-delay: 0.75s;
opacity: 1;
}
.slider-content li a {
color: white;
text-decoration: none;
cursor: pointer;
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: 2;
}
.slider-content li a .content {
background: linear-gradient(transparent, rgba(0, 0, 0, .75));
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateY(100%) translateX(-50%);
transition-duration: .75s;
transition-delay: .4s;
opacity: 0;
padding: 40px 10px 10px 10px;
width: 400px;
}
.slider-content li a .content h2 {
font-weight: 300;
color: white;
font-size: 24px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<div class="row">
<div class="row-header">
<h2></h2>
</div>
<div class="row-container">
<div class="slider">
<span id="prev" class="handle handle-prev"><</span>
<div class="show-peek">
<ul class="slider-content">
<li class="slider-item">1</li>
<li class="slider-item left-item">2</li>
<li class="slider-item">3
</li>
<li class="slider-item right-item">4</li>
<li class="slider-item">5</li>
</ul>
</div>
<!-- ends show-peek -->
<span id="next" class="handle handle-next">></span>
</div>
<!-- ends slider -->
</div>
<!-- ends row-container -->
</div>
<!-- ends row -->
I did say that there was not really a CSS only solution but it seems you can be a bit creative..
You can take advantage of the -webkit-transform: scale CSS attribute.
Take your ul's and li's like so :
<ul class="slider-content">
<li id="1" class="slider-item">1</li>
<li id="2" class="slider-item">2</li>
<li id="3" class="slider-item">3</li>
<li id="4" class="slider-item">4</li>
</ul>
We can add some CSS to itterate over their order and modify their hover
ul{
list-style:none;
}
ul:hover li {
-webkit-transform: translateX(-25%);
transform: translateX(-25%);
}
ul:hover li:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
transition-duration: 0.1818181818s;
}
ul:hover li:hover ~ li {
-webkit-transform: translateX(25%);
transform: translateX(25%);
}
.slider-item {
position: relative;
vertical-align: middle;
display: inline-block;
list-style: none;
width: 100px;
height: 69px;
/* background-color: black; */
transition-duration: .3s;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(205, 20, 20, .3);
}
.slider-content {
display: block;
margin-top: 34px;
list-style: none;
white-space: nowrap;
transform: translateY(-50%) translateX(-100px);
text-align: center;
}
<ul class="slider-content">
<li id="1" class="slider-item">1</li>
<li id="2" class="slider-item">2</li>
<li id="3" class="slider-item">3</li>
<li id="4" class="slider-item">4</li>
</ul>
This works by using the animations in CSS and some clever use of the translate css also.

Transition doesnt work

I have a question about transition, i am trying to create a custom collapsible sidebar, using transition. What is meant to happen, is that the #nav appears as soon as the image is hovered over. But somehow this doesn't work, please help.
#menu{
width: 1.75em;
height: 1.75em;
margin: 5px;
float: left;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
float: left;
}
#nav{
background-color: grey;
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#menu:hover #nav{
width: 50%;
function giveAlert(){
alert("Your costum button works!");
}
/* Stylesheet voor Eric's meetcabine */
html, body{
height: 100%;
margin: 0%;
}
/* Opmaak voor Tablets */
#media screen and (max-width: 960px) and (max-height: 600px){
#header{
background: linear-gradient(white, gray);
height: 7.5%;
}
#menu{
width: 1.75em;
height: 1.75em;
margin: 5px;
float: left;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
float: left;
}
#nav{
background-color: grey;
width: 1%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#menu:hover #nav{
width: 50%;
}
#navigation{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li{
display: inline;
}
li a{
background-color: grey;
color: rgba(0,0,0,0.50);
display: block;
padding: 8px;
text-decoration: none; /*To remove the blue onderlines*/
}
li a:hover{
background-color: #607d8b; /*Blue-grey from matterialize*/
}
#section{
width: 100%;
height: 88%;
}
#buttons{
background-color: #f0f0f0;
width: 100%;
height: 50%;
}
#buttonlist{ /*da*/
margin: 0;
padding: 0;
}
#buttoncontainer{
float: none;
margin: 0;
padding: 0;
}
#button{
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover{
background-color: red;
width: 20%;
margin: 10px;
}
#graph{
background-color: #fafafa;
width: 100%;
height: 50%;
}
#table{
background-color: #f6f6f6;
width: 100%;
height: 100%;
}
#footer{
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
/* Opmaak voor Desktops en Laptops en tablets*/
#media screen and (min-width: 960px) and (min-height: 600px){
#header{
background: linear-gradient(white, gray);
height: 7.5%;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0%;
font-size: 375%;
}
#nav{
background-color: grey;
}
#navigation{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li{
float: left;
display: inline;
}
li a{
background-color: grey;
color: rgba(0,0,0,0.50);
display: block;
padding: 8px;
text-decoration: none; /*To remove the blue onderlines*/
}
li a:hover{
background-color: #607d8b; /*Blue-grey from matterialize*/
}
#section{
width: 100%;
height: 88%;
}
#buttons{
background-color: #f0f0f0;
width: 50%;
height: 50%;
float: left;
}
#buttonlist{ /*da*/
margin: 0;
padding: 0;
}
#buttoncontainer{
float: none;
margin: 0;
padding: 0;
}
#button{
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover{
background-color: red;
width: 20%;
margin: 10px;
}
#graph{
background-color: #fafafa;
width: 50%;
height: 50%;
float: left;
}
#table{
background-color: #f6f6f6;
width: 50%;
height: 100%;
float: right;
}
#footer{
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eric's meetcabine</title>
<link href="./favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
</div>
<div id="nav">
<ul id="navigation">
<li>Home</li>
<li>Meting</li>
<li>Help</li>
</ul>
</div>
<div id="section">
<div id="buttons">
<ul id="buttonlist">
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a></li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a></li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a></li>
</ul>
</div>
<div id="table"></div>
<div id="graph"></div>
</div>
<div id="footer"><center>© Protonic</center></div>
</body>
</html>
P.S.
Sorry for my terrible language skills,
I am from the Netherlands.
This works, also I changed #nav{ top:0; } to #nav{ top:27px; } to avoide the problem where when the #nav section expands it will cover the #menu toggle and the "hover" effect won't work making quirky animation.
Also change this selector #menu:hover ~ #nav to this #menu:hover ~ #nav, #nav:hover so that the #nav section will stay expanded when you hover away from the #menu into the #nav section and won't transition back to it's original width.
JS Fiddle-updated
CSS:
#nav {
/* code */
top: 27px;
/* code */
}
#menu:hover ~ #nav, #nav:hover{
width: 50%;
}
HTML:
<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
<div id="nav">
<ul id="navigation">
<li>Home
</li>
<li>Meting
</li>
<li>Help
</li>
</ul>
</div>
</div>
Full Code:
function giveAlert() {
alert("Your costum button works!");
}
/* Stylesheet voor Eric's meetcabine */
html,
body {
height: 100%;
margin: 0%;
}
/* Opmaak voor Tablets */
#media screen and (max-width: 960px) and (max-height: 600px) {
#header {
background: linear-gradient(white, gray);
height: 7.5%;
}
#menu {
width: 25px;
height: 25px;
margin: 5px;
display: inline-block;
z-index: 10;
cursor: pointer;
}
#title {
color: rgba(0, 0, 0, 0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
display: inline-block;
}
#nav {
background-color: grey;
width: 1%;
height: 100%;
position: absolute;
top: 27px;
left: 0;
z-index: 1;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#menu:hover ~ #nav,
#nav:hover {
width: 50%;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li {
display: inline;
}
li a {
background-color: grey;
color: rgba(0, 0, 0, 0.50);
display: block;
padding: 8px;
text-decoration: none;
/*To remove the blue onderlines*/
}
li a:hover {
background-color: #607d8b;
/*Blue-grey from matterialize*/
}
#section {
width: 100%;
height: 88%;
}
#buttons {
background-color: #f0f0f0;
width: 100%;
height: 50%;
}
#buttonlist {
/*da*/
margin: 0;
padding: 0;
}
#buttoncontainer {
float: none;
margin: 0;
padding: 0;
}
#button {
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover {
background-color: red;
width: 20%;
margin: 10px;
}
#graph {
background-color: #fafafa;
width: 100%;
height: 50%;
}
#table {
background-color: #f6f6f6;
width: 100%;
height: 100%;
}
#footer {
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
/* Opmaak voor Desktops en Laptops en tablets*/
#media screen and (min-width: 960px) and (min-height: 600px) {
#header {
background: linear-gradient(white, gray);
height: 7.5%;
}
#title {
color: rgba(0, 0, 0, 0.50);
margin: 0%;
font-size: 375%;
}
#nav {
background-color: grey;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li {
float: left;
display: inline;
}
li a {
background-color: grey;
color: rgba(0, 0, 0, 0.50);
display: block;
padding: 8px;
text-decoration: none;
/*To remove the blue onderlines*/
}
li a:hover {
background-color: #607d8b;
/*Blue-grey from matterialize*/
}
#section {
width: 100%;
height: 88%;
}
#buttons {
background-color: #f0f0f0;
width: 50%;
height: 50%;
float: left;
}
#buttonlist {
/*da*/
margin: 0;
padding: 0;
}
#buttoncontainer {
float: none;
margin: 0;
padding: 0;
}
#button {
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover {
background-color: red;
width: 20%;
margin: 10px;
}
#graph {
background-color: #fafafa;
width: 50%;
height: 50%;
float: left;
}
#table {
background-color: #f6f6f6;
width: 50%;
height: 100%;
float: right;
}
#footer {
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
<div id="nav">
<ul id="navigation">
<li>Home
</li>
<li>Meting
</li>
<li>Help
</li>
</ul>
</div>
</div>
<div id="section">
<div id="buttons">
<ul id="buttonlist">
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a>
</li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a>
</li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a>
</li>
</ul>
</div>
<div id="table"></div>
<div id="graph"></div>
</div>
<div id="footer">
<center>© Protonic</center>
</div>
Check Below, this code is work transition
function giveAlert(){
alert("Your costum button works!");
}
/* Stylesheet voor Eric's meetcabine */
html, body{
height: 100%;
margin: 0%;
}
/* Opmaak voor Tablets */
#media screen and (max-width: 960px) and (max-height: 600px){
#header{
background: linear-gradient(white, gray);
height: 7.5%;
}
#menu{
width: 1.75em;
height: 1.75em;
margin: 5px;
float: left;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
float: left;
}
#nav{
background-color: grey;
width: 100px;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#nav:hover{
width: 500px;
}
#navigation{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li{
display: inline;
}
li a{
background-color: grey;
color: rgba(0,0,0,0.50);
display: block;
padding: 8px;
text-decoration: none; /*To remove the blue onderlines*/
}
li a:hover{
background-color: #607d8b; /*Blue-grey from matterialize*/
}
#section{
width: 100%;
height: 88%;
}
#buttons{
background-color: #f0f0f0;
width: 100%;
height: 50%;
}
#buttonlist{ /*da*/
margin: 0;
padding: 0;
}
#buttoncontainer{
float: none;
margin: 0;
padding: 0;
}
#button{
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover{
background-color: red;
width: 20%;
margin: 10px;
}
#graph{
background-color: #fafafa;
width: 100%;
height: 50%;
}
#table{
background-color: #f6f6f6;
width: 100%;
height: 100%;
}
#footer{
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
/* Opmaak voor Desktops en Laptops en tablets*/
#media screen and (min-width: 960px) and (min-height: 600px){
#header{
background: linear-gradient(white, gray);
height: 7.5%;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0%;
font-size: 375%;
}
#nav{
background-color: grey;
}
#navigation{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li{
float: left;
display: inline;
}
li a{
background-color: grey;
color: rgba(0,0,0,0.50);
display: block;
padding: 8px;
text-decoration: none; /*To remove the blue onderlines*/
}
li a:hover{
background-color: #607d8b; /*Blue-grey from matterialize*/
}
#section{
width: 100%;
height: 88%;
}
#buttons{
background-color: #f0f0f0;
width: 50%;
height: 50%;
float: left;
}
#buttonlist{ /*da*/
margin: 0;
padding: 0;
}
#buttoncontainer{
float: none;
margin: 0;
padding: 0;
}
#button{
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover{
background-color: red;
width: 20%;
margin: 10px;
}
#graph{
background-color: #fafafa;
width: 50%;
height: 50%;
float: left;
}
#table{
background-color: #f6f6f6;
width: 50%;
height: 100%;
float: right;
}
#footer{
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eric's meetcabine</title>
<link href="./favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
</div>
<div id="nav">
<ul id="navigation">
<li>Home</li>
<li>Meting</li>
<li>Help</li>
</ul>
</div>
<div id="section">
<div id="buttons">
<ul id="buttonlist">
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a></li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a></li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a></li>
</ul>
</div>
<div id="table"></div>
<div id="graph"></div>
</div>
<div id="footer"><center>© Protonic</center></div>
</body>
</html>

CSS :hover not applied on some elements

I experience a strange problem..
On some elements the :hover effect is not applied
html,
body {
height: 100%;
}
body {
margin: 0;
color: #3b3b3b;
font-family: tahoma;
font-size: 12px;
background: #f5f5f5;
}
body.toggle {
overflow: hidden;
}
#main_content {
height: 100%;
}
#preloader_content {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
background: #303030;
width: 100%;
height: 100%;
}
#preloader_content > div {
position: absolute;
width: 200px;
}
#preloader_percentage {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
font-size: 32px;
font-family: arial;
font-weight: bold;
text-align: center;
}
#container {
padding-top: 80px;
height: 100%;
box-sizing: border-box;
}
#header {
position: fixed;
top: 0;
z-index: 1;
height: 80px;
min-width: 600px;
width: 100%;
box-sizing: border-box;
}
#header_mobile {
height: 100%;
display: none;
box-sizing: border-box;
background: #303030;
color: #d9d9d9;
}
#header_desktop {
height: 100%;
margin-left: 200px;
box-sizing: border-box;
background: #fff;
}
#sidebar {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: #303030;
color: #d9d9d9;
box-sizing: border-box;
}
#sidebar.toggle {
z-index: 0;
display: block;
}
#logo {
position: absolute;
}
#menu {
position: absolute;
top: 80px;
width: 100%;
bottom: 0;
overflow-y: auto;
}
#main {
position: absolute;
z-index: -1;
min-width: 600px;
width: 100%;
max-width: 1400px;
padding-left: 200px;
box-sizing: border-box;
}
.mobile_header_actions {
float: right;
}
.mobile_header_actions > div {
display: inline-block;
margin-right: 20px;
}
.btn_mobile_header_toggle {
background: url(/gfx/btn.mobile_header_toggle.png) no-repeat center;
cursor: pointer;
height: 50px;
width: 50px;
}
.btn_mobile_header_toggle.toggle {
background-color: rgba(0, 0, 0, 0.5);
}
.sidebar_page_ul,
.sidebar_subpage_ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.sidebar_section {
padding: 10px 10px 10px 20px;
font-size: 11px;
color: #c2c2c2;
}
.sidebar_page {
padding: 10px 10px 10px 30px;
font-size: 13px;
font-weight: bold;
transition: background-color 0.2s ease 0s;
cursor: pointer;
}
.sidebar_arrow {
background: url(/gfx/sidebar_arrow.png) no-repeat center;
float: right;
height: 18px;
width: 18px;
}
.sidebar_arrow.active {
transform: rotate(90deg);
}
.sidebar_subpage_ul {
display: none;
}
.sidebar_subpage_ul.active {
display: block;
}
.sidebar_subpage {
padding: 10px 10px 10px 30px;
background-color: rgba(0, 0, 0, 0.35);
font-size: 13px;
transition: background-color 0.2s ease 0s;
cursor: pointer;
opacity: 0;
}
.sidebar_page.active,
.sidebar_page:hover,
.sidebar_subpage.active,
.sidebar_subpage:hover {
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
}
#media (max-width: 767px) {
#container {
padding-top: 50px;
}
#header {
height: 50px;
}
#header_mobile {
display: block;
}
#header_desktop {
display: none;
}
#sidebar {
display: none;
}
#menu {
top: 50px;
}
#main {
padding-left: 0;
}
}
#media (min-width: 768px) {
#sidebar {
width: 200px !important;
}
#main {
left: 0 !important;
}
}
#media (min-width: 992px) {}#media (min-width: 1200px) {} button {
background:linear-gradient(#f5f5f5,
#f1f1f1);
border:1px solid rgba(0,
0,
0,
0.1);
box-sizing:content-box;
border-radius:2px;
display:inline-block;
min-width:50px;
color:#444;
font-size:11px;
font-weight:bold;
padding:4px 8px 5px 8px;
text-align:center;
transition:all 300ms ease 0s;
margin:0 6px 0 0;
cursor:pointer;
}
button:hover {
background: linear-gradient(#f8f8f8, #f1f1f1);
border-color: #c6c6c6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
button.cta {
background: linear-gradient(#4d90fe, #4787ed);
border: 1px solid #3079ed;
color: #fff;
}
button.cta:hover {
background: linear-gradient(#4d90fe, #357ae8);
border-color: #2f5bb7;
}
<div id="main_content">
<div id="container">
<div id="header">
<div id="header_mobile">Header Mobile
<button class="cta" id="e1">Log off</button>
<div class="mobile_header_actions">
<div class="btn_mobile_header_toggle" id="e3"></div>
</div>
</div>
<div id="header_desktop">Header Desktop
<button class="cta" id="e2">Log off</button>
</div>
</div>
<div id="sidebar">
<div id="logo">Logo</div>
<div id="menu">
<div id="e0">
<ul class="sidebar_page_ul">
<li>
<div class="sidebar_section">Accounts</div>
</li>
<li>
<div class="sidebar_page" id="e4">Overview</div>
</li>
<li>
<div class="sidebar_page" id="e5">Bookkeeping
<div class="sidebar_arrow"></div>
</div>
<ul class="sidebar_subpage_ul" id="e6">
<li>
<div class="sidebar_subpage" id="e7">Bilag</div>
</li>
<li>
<div class="sidebar_subpage" id="e8">Daglig</div>
</li>
</ul>
</li>
<li>
<div class="sidebar_page active" id="e9">
Chart of accounts
</div>
</li>
<li>
<div class="sidebar_section">Administration</div>
</li>
<li>
<div class="sidebar_page" id="e10">Client</div>
</li>
<li>
<div class="sidebar_page" id="e11">Accounts</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div style="padding:20px">
account
<button>Test</button>
<button class="cta">Test</button>
</div>
</div>
</div>
</div>
The logoff button in the header has the :hover effect but the two Test buttons in the main content hasn't
What am I doing wrong?!
That's because the #main style has z-index: -1. That places it behind the container element.
You have
#main {
position: absolute;
z-index: -1;
}
#main's parent, #container, doesn't create any stacking context (because it has default opacity and isn't a positioned element with z-index different than auto). Therefore, #main and #container belong to the same stacking context.
Then, since #main is a stacking context with negative stack level, it will be shown under (in z-axis) the background of #container. Then, hovering #main contents is like hovering parent's background.
Therefore, :hover doesn't apply.
html,
body {
height: 100%;
}
body {
margin: 0;
color: #3b3b3b;
font-family: tahoma;
font-size: 12px;
background: #f5f5f5;
}
body.toggle {
overflow: hidden;
}
#main_content {
height: 100%;
}
#preloader_content {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
background: #303030;
width: 100%;
height: 100%;
}
#preloader_content > div {
position: absolute;
width: 200px;
}
#preloader_percentage {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
font-size: 32px;
font-family: arial;
font-weight: bold;
text-align: center;
}
#container {
padding-top: 80px;
height: 100%;
box-sizing: border-box;
}
#header {
position: fixed;
top: 0;
z-index: 1;
height: 80px;
min-width: 600px;
width: 100%;
box-sizing: border-box;
}
#header_mobile {
height: 100%;
display: none;
box-sizing: border-box;
background: #303030;
color: #d9d9d9;
}
#header_desktop {
height: 100%;
margin-left: 200px;
box-sizing: border-box;
background: #fff;
}
#sidebar {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: #303030;
color: #d9d9d9;
box-sizing: border-box;
}
#sidebar.toggle {
z-index: 0;
display: block;
}
#logo {
position: absolute;
}
#menu {
position: absolute;
top: 80px;
width: 100%;
bottom: 0;
overflow-y: auto;
}
#main {
position: absolute;
min-width: 600px;
width: 100%;
max-width: 1400px;
padding-left: 200px;
box-sizing: border-box;
}
.mobile_header_actions {
float: right;
}
.mobile_header_actions > div {
display: inline-block;
margin-right: 20px;
}
.btn_mobile_header_toggle {
background: url(/gfx/btn.mobile_header_toggle.png) no-repeat center;
cursor: pointer;
height: 50px;
width: 50px;
}
.btn_mobile_header_toggle.toggle {
background-color: rgba(0, 0, 0, 0.5);
}
.sidebar_page_ul,
.sidebar_subpage_ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.sidebar_section {
padding: 10px 10px 10px 20px;
font-size: 11px;
color: #c2c2c2;
}
.sidebar_page {
padding: 10px 10px 10px 30px;
font-size: 13px;
font-weight: bold;
transition: background-color 0.2s ease 0s;
cursor: pointer;
}
.sidebar_arrow {
background: url(/gfx/sidebar_arrow.png) no-repeat center;
float: right;
height: 18px;
width: 18px;
}
.sidebar_arrow.active {
transform: rotate(90deg);
}
.sidebar_subpage_ul {
display: none;
}
.sidebar_subpage_ul.active {
display: block;
}
.sidebar_subpage {
padding: 10px 10px 10px 30px;
background-color: rgba(0, 0, 0, 0.35);
font-size: 13px;
transition: background-color 0.2s ease 0s;
cursor: pointer;
opacity: 0;
}
.sidebar_page.active,
.sidebar_page:hover,
.sidebar_subpage.active,
.sidebar_subpage:hover {
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
}
#media (max-width: 767px) {
#container {
padding-top: 50px;
}
#header {
height: 50px;
}
#header_mobile {
display: block;
}
#header_desktop {
display: none;
}
#sidebar {
display: none;
}
#menu {
top: 50px;
}
#main {
padding-left: 0;
}
}
#media (min-width: 768px) {
#sidebar {
width: 200px !important;
}
#main {
left: 0 !important;
}
}
#media (min-width: 992px) {}#media (min-width: 1200px) {} button {
background:linear-gradient(#f5f5f5,
#f1f1f1);
border:1px solid rgba(0,
0,
0,
0.1);
box-sizing:content-box;
border-radius:2px;
display:inline-block;
min-width:50px;
color:#444;
font-size:11px;
font-weight:bold;
padding:4px 8px 5px 8px;
text-align:center;
transition:all 300ms ease 0s;
margin:0 6px 0 0;
cursor:pointer;
}
button:hover {
background: linear-gradient(#f8f8f8, #f1f1f1);
border-color: #c6c6c6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
button.cta {
background: linear-gradient(#4d90fe, #4787ed);
border: 1px solid #3079ed;
color: #fff;
}
button.cta:hover {
background: linear-gradient(#4d90fe, #357ae8);
border-color: #2f5bb7;
}
<div id="main_content">
<div id="container">
<div id="header">
<div id="header_mobile">Header Mobile
<button class="cta" id="e1">Log off</button>
<div class="mobile_header_actions">
<div class="btn_mobile_header_toggle" id="e3"></div>
</div>
</div>
<div id="header_desktop">Header Desktop
<button class="cta" id="e2">Log off</button>
</div>
</div>
<div id="sidebar">
<div id="logo">Logo</div>
<div id="menu">
<div id="e0">
<ul class="sidebar_page_ul">
<li>
<div class="sidebar_section">Accounts</div>
</li>
<li>
<div class="sidebar_page" id="e4">Overview</div>
</li>
<li>
<div class="sidebar_page" id="e5">Bookkeeping
<div class="sidebar_arrow"></div>
</div>
<ul class="sidebar_subpage_ul" id="e6">
<li>
<div class="sidebar_subpage" id="e7">Bilag</div>
</li>
<li>
<div class="sidebar_subpage" id="e8">Daglig</div>
</li>
</ul>
</li>
<li>
<div class="sidebar_page active" id="e9">
Chart of accounts
</div>
</li>
<li>
<div class="sidebar_section">Administration</div>
</li>
<li>
<div class="sidebar_page" id="e10">Client</div>
</li>
<li>
<div class="sidebar_page" id="e11">Accounts</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div style="padding:20px">
account
<button>Test</button>
<button class="cta">Test</button>
</div>
</div>
</div>
</div>
very simple.
just change the width of sidebar and you'll see it is working fine.
actually sidebar is overlapping on your main div.
check this below
http://oi61.tinypic.com/20j0182.jpg

Categories