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>
Related
How to style my progress bar so it looks like the design? I tried to moved the text but they keep staying in the circle. Also not sure how to create the circle within another circle dot with css. It should be non clcikable. Here is the css and html files. Also not sure how to let active/finished steps be in a tick icon.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>XXXXXX</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">1</li>
<li class="step">2</li>
<li class="step">3</li>
<li class="step">4</li>
<li class="step">5</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>
<script src="./bar script.js"></script>
</body>
</html>
--------------------- css file
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #fff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
Here is the reference picture
I hope that's what you meant
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #4584ff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
/* added css */
#progress-text .step {
display:flex;
justify-content:center;
}
#progress-text .step label{
margin-top:120%;
font-size:.7rem;
font-weight:bold;
font-color:inherit;
}
#progress-text .step.active::after {
content:"✓";
color:#fff;
z-index:2;
position:absolute;
top:2px;
left:8px;
font-size:12px;
font-weight:bold;
}
#progress-text .step.progress{
border-color:#4584ff;
}
#progress-text .step.progress::after{
content:"•";
transform:scale(3);
position:absolute;
left:10px;
top:1.5px;
color:#4584ff;
}
#progress-text .step.progress label{
color:#4584ff;
}
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">
<label>Review</label>
</li>
<li class="step active">
<label>Assignment</label>
</li>
<li class="step progress">
<label>Investigation</label>
</li>
<li class="step">
<label>Handling</label>
</li>
<li class="step">
<label>Resolution</label>
</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>
In my navbar I have a li item that opens a dropdown menu when someone hovers over it. In small screens I have a hamburger menu that hides it.
The problem is that in mobile view, even though the li item is "hidden" inside the menu when someone hovers over its position on screen it appears (even though it is hidden inside the menu).
I think that this probably happens because I set "visibility: hidden;" but I don't know how else to do it.
I mean I want to dropdown when someones hover it on desktop view but on mobile I want to dropdown only if someones open the menu and then hover over it (or maybe click on it).
To save space I included below only the code that I find more relevant.
$(function() {
$(".toggle").on("click", function() {
if ($(".item").hasClass("active")) {
$(".item").removeClass("active");
} else {
$(".item").addClass("active");
}
});
});
nav {
background: #3e3e40;
padding: 0 20px;
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
visibility: visible;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
#media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
#media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
Home
</li>
<li class="item">
Store
</li>
<li class="dropdwn item">
<span class="item">Categories</span>
<ul class="dropdwn-content">
<li>Product1</li>
<li>Product2</li>
</ul>
</li>
<li class="item">
Login
</li>
<li class="item">
Signup
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>
I solved it using media queries
Adjust for whatever pixle size you want
Code Pen Link:
Click Here
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
Home
</li>
<li class="item">
Store
</li>
<!-- dropdwn -->
<li class=" item dropdwn">
<span class="item">Categories</span>
<ul class="dropdwn-content disapear">
<li class="disapear">Product1</li>
<li class="disapear">Product2</li>
</ul>
</li>
<li class="item">
Login
</li>
<li class="item">
Signup
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>
nav {
background: #3e3e40;
padding: 0 20px;
}
#media all and (max-width:800px){
.disapear{
display: none;
}
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
#media all and (min-width: 800px){
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
#media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
#media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}
i'm working on a full screen menu for a website but I need to disable the user to scroll while the menu is open. I can't find a fitting solution on the internet so it would be great if anyone could help me. I am not sure how to trigger the body to no-scroll if the menu is open. I am not that familiar with js.
Here is my code at the moment:
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
menu.style.top = "-100vh";
}
function openmenu(){
menu.style.top = "0";
}
</script>
</body>
And that's the CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
Thanks for your help!
I used document.querySelector('body').classList.add('no-scroll') when menu opened & document.querySelector('body').classList.remove('no-scroll') when menu closed.
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
document.querySelector('body').classList.remove('no-scroll')
menu.style.top = "-100vh";
}
function openmenu(){
document.querySelector('body').classList.add('no-scroll')
menu.style.top = "0";
}
</script>
</body>
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;
}
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