I have been working on a website just for practice but when I try to open the index.html-file in Wamp(Directory:localhost:index.html) the browser does not seem to load anything but the HTML-file.
It looks exactly the same as when I'm in Atom loading it in the preview-window.
I have double checked the link to the CSS-file in the -tag in index.html. I cant seem to find anything wrong with it. What else could it depend on?
Since I dont own any domains i will post the code here, Ill try to minimize the space.
JS FIDDLE
HTML :
<div class="menu">
<!--Close icon for Menu-->
<div class"icon-close">
Close
</div>
<!--Menu-->
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>123</li>
</ul>
</div>
<!--Main Body-->
<div class="container">
<!--Icon Menu-->
<div class="icon-menu">
Menu
</div>
</div>
CSS :
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
}
/*Basic Styling*/
.container {
background-image: url('http://s3.amazonaws.com/
codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #987;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
/*Not added "icon-menu i" properties*/
JS :
var main = function() {
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.body').animate({
left: "285px"
}, 200);
});
$('.icon-close').click(function() {
$('.menu')animate({
left: "-285px"
}, 200);
$('.body').animate({
left: "0px"
}, 200);
});
};
Thanks!
/Simon
Related
My issue is that when I scroll on my website my navbar text and logos stick to the top of the screen then proceed to scroll with the page while leaving the nav bar behind. It's supposed to stay inside the nav bar like a normal nav bar would. This isn't supposed to be a sticky nav bar either.
header.php
<head>
<link rel="stylesheet" type="text/css" href="storage/css/navigationmain.css">
<script src="https://kit.fontawesome.com/1f88b3dfc2.js" crossorigin="anonymous"></script>
<script src="storage/scripts/mainnavigation.js"></script>
<header class="nt-navigation-main">
<nav class="navigationmainbar">
<div class="navigationlogo"><img src="storage/pictures/logo.jpg" class="navigationlogo"></img></div>
<div class="navigationlogo2"><h1>Chill W/ QC</h1></DIV>
<div class="menu-navigation"><i class="fa fa-bars" aria-hidden="true" class="menu-navigation"></i></div>
<ul class="menu-links">
<li><a class="<?PHP if($page=='main-page'){echo 'active';}?>" href="index.php">Main</a></li>
<li><a class="<?PHP if($page=='music-page'){echo 'active';}?>" href="music.php">Music</a></li>
<li><a class="<?PHP if($page=='content-page'){echo 'active';}?>" href="content.php">Content</a></li>
<li><a class="<?PHP if($page=='store-page'){echo 'active';}?>"href="store.php">Store</a></li>
<li><a class="<?PHP if($page=='beats-page'){echo 'active';}?>"href="beats.php">Beats</a></li>
<li><a class="<?PHP if($page=='shows-page'){echo 'active';}?>"href="shows.php">Shows</a></li>
<li><i class="fa-brands fa-spotify" style="color: green" style="padding: 10px;" class="Test"></i></li>
<li><i class="fa-brands fa-soundcloud" style="color: #ff7700" class="Test"></i></li>
</ul>
</div>
</nav>
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".menu-navigation i").click(function() {
$(".menu-link").toggleClass("mobile")
});
})
</script>
</div>
</head>
css:
#import url('https://fonts.googleapis.com/css2?family=Alata&family=Barlow+Semi+Condensed&family=Bebas+Neue&family=Boogaloo&family=Chicle&family=Koulen&family=Lobster&family=Ma+Shan+Zheng&family=Permanent+Marker&family=Rock+Salt&family=Rubik+Glitch&family=Rubik+Moonrocks&display=swap');
.ht-navigation-container {
margin: 0;
padding: 0;
margin-top: -8px;;
width: 105%;
margin-left: -8px;
}
.menu-navigation {
margin-top: 5px;
float: right;
margin-right: 40px;
display: none;
}
.nt-navigation-main {
width: 100%;
height: 70px;
background-color: #fff;
display: flex;
align-items: center;
}
.navigationlogo {
line-height: 60px;
position: fixed;
float: left;
height: 50px;
width: 50px;
left: 30PX;
top: 9px;
border-radius: 55%;
outline: 1px solid grey;
}
.navigationlogo2 {
line-height: 32px;
position: fixed;
float: left;
color: rgb(36, 35, 35);
margin-left: 95px;
font-family: 'Chicle', cursive;
font-size: 17px;
font-weight: 200px;
letter-spacing: 2px;
border-radius: 55%;
}
.navigationmainbar {
position: fixed;
width: 100%;
line-height: 65px;
}
.navigationmainbar .menu-links {
line-height: 57px;
list-style: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 160px;
}
.navigationmainbar.black .menu-links {
background: #000;
position: relative;
}
.navigationmainbar .menu-links li {
display: inline-block;
padding: 10px 10px;;
}
.navigationmainbar .menu-links li a {
text-decoration: none;
color: rgb(36, 35, 35);
font-size: 16px;
font-family: 'Boogaloo', cursive;
text-transform: uppercase;
}
a.active {
color: orange !important;
border-bottom: 3px solid grey;
}
a:hover {
color: grey !important;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 1050px) {
.navigationmainbar .menu-links {
padding-right: 40px;
}
}
#media(max-width: 880px) {
.navigationlogo {
position: fixed;
}
.navigationmainbar .menu-links {
position: fixed;
width: 100%;
height: 100vh;
background: #2f3640;
top: 50px;
left: 100%;
text-align: center;
transition: all .5s;
}
.mobile {
left: 200% !important;
}
.navigationmainbar.black .menu-links {
background: #000;
}
.showing {
max-height: 34em;
}
.navigationmainbar .menu-links li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-navigation {
display: block;
margin-top: 3px;
}
}
#media(max-width: 275px) {
.navigationlogo2 {
display: none;
}
}
content.php (another index page)
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Chill W QC | Home |</title>
<?php $page ='content-page';?>
<?php include "storage/imports/header.php"; ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="storage/css/navigationmain.css"><link rel="stylesheet" type="text/css" href="storage/css/contenttree.css">
<body>
<section class="background-content">
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
</section>
</body>
</html>
trying to build custom linktree on this page.
picture:
after scroll
before scroll
any ideas?
P.S if anyone finds out why my mobile button for my navbar wont slide over content while doing this or any other errors i need to fix dont be afraid to let me know.
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>
I have a simple react app which displays my navbar, but whenever i do its position fixed; it stays at top but the content does not hide behind.
My navbar:
class Nav extends Component {
render() {
return (
<div>
<header className="toolbar">
<nav className="toolbar__navigation">
<div className="toolbar__toggle-button">
<DrawerButton drawer={this.props.drawer} click={this.props.drawerClickHandler} />
</div>
<img className="Nav__Logo-A" src={Mylogo} alt=""/>
<div className="toolbar__logo">Akcosh</div>
<div className="spacer"></div>
<div className="toolbar_navigation-items">
<ul>
<li>Software</li>
<li>About</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
</div>
)
}
}
my css:
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
}
.toolbar__logo{
margin-left: 1rem;
}
.toolbar__navigation {
display: flex;
align-items: center;
height: 100%;
padding: 0 1rem;
}
.toolbar__logo a{
color: #282828;;
text-decoration: none;
font-size: 1.5rem;
}
.spacer{
flex: 1;
}
.toolbar_navigation-items ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li{
padding: 0 0.5rem;
}
.toolbar_navigation-items a{
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active{
color: aqua;
}
#media(max-width: 768px){
.toolbar_navigation-items{
display: none;
}
.toolbar{
height: 68px;
border-bottom: 1px solid #aca4a4;
background-color: #e5e3e30a;
}
.toolbar__logo a{
font-family: Roboto,Helvetica,sans-serif;
letter-spacing: 1.6px;
font-size: 20px;
margin-left: 5px;
font-weight: 400;
}
.Nav__Logo-A{
animation-name: out;
position: absolute;
height: 210%;
width:100%;
left: -36%;
margin-top: 9px;
transition: .4s all;
}
.Nav__Logo-A:hover{
cursor: default;
transform: rotate(360deg);
left: -36%;
margin-top: 10px;
}
}
}
I have tried everything but nothing is working; i want my navbar fixed on top and content behind it, if i have some other component below the Nav component, i want its content/text to go behind nav because it is fixed at top
try to modify the z-index so it can stay on top
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:2; // or some bigger value
}
One thing you can try is setting the z indexes!
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:99;
}
And then after that, if your content is still displaying in front of the navbar, go into that items CSS class and add
.exampleClass {
z-index:-1;
}
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've been working on a mockup for an app store, and now that I've built the basic framework I wanted to start using jQuery to make certain things interactive. However, none of the jQuery actions I try will work. What's odd is that if I delete all my code, and then try to run a jQuery action with just one div, then it works. Also, if it helps, I am using the Brackets editor.
My code is below. The blue box is the div I animated before all the other code and the green box is the div I animated after the rest of the code. On my end only the blue div hides on click while the green div does nothing.
What's going wrong?
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
z-index: -1;
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
You've given the .box element a z-index of -1. This places the element behind the <body> tag and makes it unable to be clicked.
The purpose of the z-index is not apparent, so I've removed it in my example, below, and both boxes are successfully hidden on click.
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
Below is a demonstration of an element being placed behind the <body>. I've given the <body> a white background with an opacity of 0.9. Notice that the second green box has a white overlay because it's been placed behind the <body> with z-index:-1. Also notice that the first box can be clicked, but the second cannot.
html,body {
background-color:rgba(255,255,255,.9)
}
.box {
position:relative;
width: 10em;
height: 20em;
background: green;
display:inline-block;
}
.behind {
z-index:-1;
}
CLICK
CAN'T CLICK