I am writing a Django website. I am trying to use a JavaScript file to move a mobile nav bar into the page when clicking on the burger icon.
I have successfully loaded a JavaScript file from the static folder. (I checked with the alert function.)
However, once I write more code in the JavaScript file, the JavaScript file doesn't work and I don't get the alert "Hello, javascript file loaded" upon refreshing the website page. Is my javascript incorrect? Is the format incorrect for use in Django?
Any help would be much appreciated, thanks for reading.
App.js
alert("Hello, javascript file loaded");
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', () = > {
nav.classList.toggle('nav-active');
});
}
navSlide();
Base.html
{% load static %}
<html>
<head>
<title>Pep Genie</title>
<link rel="stylesheet" type="text/css" href="{% static 'genie/style.css' %}">
</head>
<body>
{% block content %}{% endblock %}
<script src="{% static 'genie/app.js' type="text/javascript" %}"></script>
</body>
</html>
Index.html
{% extends 'genie/base.html' %}
{% block content %}
<nav>
<div class="logo">
<h4>The Logo</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Projects
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
Style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: navy;
color: lightgray;
font-family: Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
nav .logo {
margin: 0 100px 0 0;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
nav li {
list-style: none;
}
nav a {
text-decoration: none;
color: lightgray;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 2px;
margin: 4px;
background-color: lightgray;
}
#media screen and (max-width: 1000px) {
.nav-links {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
top: 8vh;
height: 92vh;
background-color: navy;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
function navSlide(){
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', function(){
nav.classList.toggle('nav-active');
console.log('event triggered');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: navy;
color: lightgray;
font-family: Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.burger {
display: none;
}
nav .logo {
margin: 0 100px 0 0;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
nav li {
list-style: none;
}
nav a {
text-decoration: none;
color: lightgray;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger div {
width: 25px;
height: 2px;
margin: 4px;
background-color: lightgray;
}
#media screen and (max-width: 1000px) {
.nav-links {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
top: 8vh;
height: 92vh;
background-color: navy;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
cursor: pointer;
background: red;
}
}
.nav-active {
transform: translateX(0%);
}
<html>
<head>
<title>Pep Genie</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Logo</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Projects
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</body>
</html>
I don't know about django and your js style is strange but the classic way tha works would look like this:
function navSlide(){
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', function(){
nav.classList.toggle('nav-active');
});
}
Please check this example, in the console you can see the triggered event on click burger-menu: https://jsfiddle.net/yf9wo67a/
It looks like there might be a problem with this line:
<script src="{% static 'genie/app.js' type="text/javascript" %}"></script>
The type="" section should be separate form the src, as follows:
<script src="{% static 'genie/app.js' %}" type="text/javascript"></script>
Pure CSS Burger Menu in Django
Found a work around by by using a pure CSS responsive nav bar with the :target pseudo class.
Here's my sources:
Mark Caron: Pure CSS Hamburger Menu. https://medium.com/#heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793
Mozilla MDN Web Docs: the CSS :target peudo-class. https://developer.mozilla.org/en-US/docs/Web/CSS/:target
Instead of using the JavaScript function with onclick, you can set your burger icon inside an anchor tag, and set the href to and url fraction like "#mobile-menu". Then, to make the url fraction cause a change (like changing your menu display from none to block for example) you can use the CSS :target pseudo class. Add this to your CSS.
.mobile-menu:target{
display: flex;
}
This references an id, so it is essential that your menu has an id set to "mobile-menu". This can now make the menu appear on clicking the burger.
Here is my full code for reference:
index.html
{% extends 'genie/base.html' %}
{% block content %}
<nav>
<div class="logo">
<h4>The Logo</h4>
</div>
<ul class="nav-links" id="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Projects
</li>
</ul>
<a class="burger" href="#nav-links">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</a>
</nav>
{% endblock %}
base.html
{% load static %}
<html>
<head>
<title>Pep Genie</title>
<link rel="stylesheet" type="text/css" href="{% static 'genie/style.css' %}">
<link rel="javascript" type="text/javascript" href="{% static 'genie/app.js' %}">
</head>
<body>
{% block content %}{% endblock %}
<script src="{% static 'genie/app.js' %}" type="text/javascript"></script>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: navy;
color: lightgray;
font-family: Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
nav .logo {
margin: 0 100px 0 0;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
nav li {
list-style: none;
}
nav a {
text-decoration: none;
color: lightgray;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 2px;
margin: 4px;
background-color: lightgray;
}
#media screen and (max-width: 1000px) {
.nav-links {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
top: 8vh;
height: 92vh;
background-color: navy;
display: none;
flex-direction: column;
align-items: center;
width: 50%;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-links:target{
display: flex;
}
Related
I have looked at the other questions that have been answered, tried them out myself and I still couldn't click on my burger and have the slide out menu. I was following a tutorial and it was turning out fine until I got to the JavaScript section of it. I'm not really too sure what I am doing wrong here. Looked around in the forum and tried all the solutions I could find for it to still not work.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
const app = () => {
navSlide();
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.townlogo{
display: flex;
justify-content: center;
margin-top: 20px;
mix-blend-mode: multiply;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: white;
margin-bottom: 20px;
}
ul.navigation{
display: flex;
justify-content: space-around;
width: 40%;
align-items: center;
margin-top: 20px;
background-color: (white);
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
}
ul.navigation li{
list-style: none;
}
ul.navigation a{
color: black;
text-decoration: none;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
li a:hover{
color: rgb(190 30 45);
}
.indexbody{
height: 100%;
margin: 0;
font-size: 17px;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
line-height: 1.8em;
color: rgb(65 57 61);
}
.img1, .img2{
position: relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Can be adjusted for mobile viewing*/
}
.img1{
background-image: url('../Images/lantern.jpg');
min-height: 600px;
}
.img2{
background-image: url('../Images/cookingcropped.jpg');
min-height: 400px;
}
.section{
text-align: center;
padding:50px 80px;
}
.section-mission{
background-color: rgb(65 57 61);
color:white;
}
.section-vision{
background-color: rgb(65 57 61);
color:white;
}
.menutext{
position: absolute;
font-size: 40px;
top: 50%;
width: 100%;
text-align: center;
color: white;
letter-spacing: 3px;
text-shadow: 3px 3px 3px black ;
}
.menutext .border{
border-style: solid;
border-width: 4px;
padding: 8px;
color: white;
box-shadow: 3px 3px 3px black;
text-decoration: none;
}
a.viewmenu:link{
text-decoration: none;
}
a.viewmenu:visited{
text-decoration: none;
}
a.viewmenu:hover{
background-color: transparent;
}
a.viewmenu:active{
text-decoration: none;
}
/*rectangle div contains copyright footer section*/
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 520px solid rgb(190 30 45) ;
border-right: 520px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
#media screen and (max-width: 1024px){
.navigation{
width: 50%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.navigation{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navigation li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 200px solid rgb(190 30 45) ;
border-right: 200px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head> <!--Header containing title,meta,and links-->
<title>ctowncuisine</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.typekit.net/qsw5hiv.css">
<link rel="stylesheet" href="CSS/style.css"> <!--link reference to CSS stylesheet-->
</head>
<body>
<nav>
<div class="townlogo"> <!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="chinese restaurant logo">
</div>
<ul class="navigation"> <!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li><span>Reserve Table</span></li>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</nav>
<div class="indexbody"></div>
<div class="img1"></div> <!--lantern.html image class-->
<a class="viewmenu" href="menu.html"> <!--Linking border text with href-->
<div class="menutext">
<span class="border ">
View Our Menu
</span>
</div>
</a>
<section class="section section-mission">
<h2 class="mission">Our Mission</h2> <!--This is the second heading containing: Our Mission section-->
<p>To bring quality, style and the wish for good fortune to all of our guests. We provide a high-end experience through Chinese cuisine.
</p> <!--Paragraph containing the mission statement of TOWN-->
</section>
<div class="img2"> <!--div classifying second image: cookingcropped.html-->
<span class="border">
</span>
</div>
<section class="section section-vision">
<h2 class="vision">Vision</h2> <!--header 2 containing a class for CSS: Vision-->
<p> <span style="color: rgb( 213 162 141);">TOWN</span> combines a variety of chinese cuisine to excite and delight our customers.
Our vision for the future is to create experiential dining that is more than just a night out.<br> We aim to bring quality and luxury across all aspects of our brand.
The approach of <span style="color: rgb( 213 162 141);">TOWN</span> is to develop our brand with the understanding of both our culture and consumer insights.<br> Within our vision always lives the promise of inspiring creativity, conversation and quality.
Our audience is a high-end clientele who values a dining experience.<br>The age range of our customers are from early 30s-60s. We would like them to come back for both personal dining and events.
</p>
</section>
<footer>
<div class="rectangle"> <!--This section is the footer-->
© 2022 ctowncuisine.com designed by <span>Mariah Mendoza</span>
</div>
</footer>
<script> src="./js/app.js"</script>
</body>
</html>
It‘s hard to help because your code does not work yet. The burger has no size so we cannot click it.
Otherwise, your positioning and transition seems fine. But you’re hiding all menu items with opacity: 0. Since the menu is white, you will not see anything.
The current code has some accessibility issues, meaning it does not work well with assistive technology, which people with disabilities rely on. I improved them and I’ll explain them further down.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
if (nav.classList.toggle('nav-active')) {
// now it’s active
burger.setAttribute('aria-expanded', true);
nav.setAttribute('aria-hidden', false);
} else {
burger.setAttribute('aria-expanded', false);
nav.setAttribute('aria-hidden', true);
}
});
}
const app = () => {
navSlide();
}
.navigation {
list-style-type: none;
}
.navigation a {
display: block;
padding: .5em;
}
#media screen and (max-width: 1024px) {
.navigation {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.navigation {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
width: 40px;
}
.burger .line {
display: block;
background-color: black;
height: .2em;
margin: .4em 0;
}
.nav-active {
transform: translateX(0%);
}
}
<nav>
<div class="townlogo">
<!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="Town">
</div>
<button class="burger" id="burger" aria-expanded="false" aria-controls="navigation" onclick="navSlide()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<ul class="navigation" id="navigation">
<!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li>Order Online</li>
</ul>
</nav>
guys! I have some problems with my script. It's with my navigation button which if you press the tab should be coming up. I don't get any error codes. Could I get some help? It does give me value back in the console "true" or "false". I think the problem is not with the javascript more like with CSS or HTML. Thank you in advance!
const primaryNav = document.querySelector(".nav-items");
const navToggle = document.querySelector(".mobile-nav-toggle");
navToggle.addEventListener("click", () => {
const visibility = primaryNav.getAttribute("data-visible");
if(visibility === "false"){
primaryNav.setAttribute("data-visible", true);
navToggle.setAttribute("aria-expanded", true);
} else if (visibility === "true"){
primaryNav.setAttribute("data-visible", false);
navToggle.setAttribute("aria-expanded" , false);
}
});
html,body{
margin: 0%;
box-sizing: border-box;
background-image: url(../assets/Coding2.jpg);
background-size: cover;
background-attachment: fixed;
overflow-x: hidden;
}
/*-------Global Classes ------*/
a{
text-decoration: none;
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
ul{
list-style-type: none;
}
/* -------navbar-------*/
.nav{
padding: 0 2rem;
height: 0rem;
min-height: 15vh;
overflow: hidden;
}
.nav .nav-brand a{
font-size:2rem;
padding:1rem 1.5rem;
position:relative;
top: 15%;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .nav-items{
list-style-type: none;
display: flex;
margin: 0;
align-items: center;
justify-content: space-between;
}
.nav .nav-menu{
justify-content: space-between;
}
.nav .nav-items .nav-link{
padding: 1rem 1.5rem;
position: relative;
font-size: 1.1rem;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .social{
padding:1.4rem 0;
}
.nav .nav-items a{
text-decoration: none;
color: white;
font-family: Arial, "Time New Roman";
}
.mobile-nav-toggle{
display: none;
}
.nav .nav-items a > [aria-hidden="true"]{
font-weight: 700;
margin-inline-end: 0.75rem;
}
#media (max-width: 35em){
.nav .nav-brand a{
right: 30%;
font-size: 1.5rem;
}
.nav .nav-items{
--gap: 2em;
position: fixed;
z-index: 1000;
inset: 0 0 0 30%;
flex-direction: column;
padding: min(20vh, 10rem) 2em;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
transform: translateX(100%);
}
.nav .nav-times[data-visible="true"]{
transform: translateX(0%);
}
.mobile-nav-toggle{
display: block;
position: absolute;
background: url(../assets/icon-hamburger.svg);
background-repeat: no-repeat;
border: 0;
z-index: 9999;
width: 2rem;
aspect-ratio: 1;
top: 2rem;
right: 2rem;
font-size: 0;
}
}
/* ---X---navbar---X---*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Science Website</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<script src="./js/main.js" defer></script>
<button class="mobile-nav-toggle" aria-controls ="nav-items" aria-expanded ="false"><span class="sr-only">Menu</span></button>
<nav class="nav">
<div class="nav-menu flex-row">
<div class="nav-brand">
CBlogging
</div>
<div>
<ul id = "nav-items" data-visible = "false" class="nav-items flex">
<li class ="nav-link">
<span aria-hidden="true">00</span>Home
</li>
<li class ="nav-link">
<span aria-hidden="true">01</span>Contact
</li>
<li class ="nav-link">
<span aria-hidden="true">02</span>Article
</li>
<li class ="nav-link">
<span aria-hidden="true">03</span>Home
</li>
</ul>
</div>
<!---
<div class="social text-gray">
F
I
T
Y
</div>
-->
</div>
</nav>
</body>
</html>
First step is change background-color like:
body {
background-color: #252525;
}
Now in button change font-size to example 17px:
.mobile-nav-toggle {
font-size: 17px;
}
Second and last step is change name of css atribute .nav-times to .nav-items:
.nav .nav-items[data-visible='true'] {
transform: translateX(100%);
}
That's it. Your welcome :)
the nav is set absolute to the headerContainer. And in motion it works fine.
It needs to drop from behind the headerContainer over the main content of the page. This way the content dissapears and the menu is on top.
I have done so by setting my main class to relative and a negative z-index: 2; because the nav is set to negativ -1;
Right now everything works and it looks good. The only problem is that the anchor tags inside my nav are not clickable anymore.
I have been searching for the answer but could not find anything related.
Is there anyone who can tell me why this occurs? I have yet to find a good solution for this.
What i want to happen seems so simple.. it needs to drop down from behind or at least create the idea its coming from behind the header..
I have tried setting the height of the nav to 0 and on click set it to 100%. That wil drop the menu as if it comes from behind. but gave me other problems like the anchors would come in later or sooner then the actual nav background.
Here is a snippet with the full example.
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: -1;
/* display: none; */
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: -100px;
left: -1px;
background: #ffffff;
transition: top 2s;
}
header nav.show {
top: 100%;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li>First link</li>
<li>Second link</li>
<li>Thirth link</li>
<li>Fourth link</li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
The easiest solution is to add position: relative;z-index: 0; to the body element. Your negative z-index elements are going behind the body element which make them unclickable. By adding a z-index to the body you force the creation of a stacking context and you won't have this issue.
Full explanation here: Why can't an element with a z-index value cover its child?
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
position: relative;
z-index: 0;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: -1;
/* display: none; */
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: -100px;
left: -1px;
background: #ffffff;
transition: top 2s;
}
header nav.show {
top: 100%;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li>First link</li>
<li>Second link</li>
<li>Thirth link</li>
<li>Fourth link</li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
You may argue that the elements aren't behind the body since we can clearly see them on the top of the background but this is due to background propagation that move the background from the body to html element.
Add a background to html in your initial code to disable background propagation and you will notice how the elements are rendred behind the body:
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
html {
background:red;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: -1;
/* display: none; */
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: -100px;
left: -1px;
background: #ffffff;
transition: top 2s;
}
header nav.show {
top: 100%;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li>First link</li>
<li>Second link</li>
<li>Thirth link</li>
<li>Fourth link</li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
The z-index of any children are directly inherited from their parent - so if you have a child with a z-index of 100 inside of a parent with a z-index of -1, the child is 100 relative to the -1.
You should be able to build the header and menu without relying on z-index. For instance, I've taken the indexes out of your code and put this together (just add the animation): https://jsfiddle.net/efk6s1oj/
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
/* display: none; */
padding: 15px;
background: #ffffff;
transition: top 2s;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
nav {
position:absolute;
opacity:0;
}
nav.show {
top:100px;
opacity:1;
}
Avoid doing this with z-index especially negatives. Your links don't work because they are behind transparent content by z-index.
Instead change the order the elements are in the page, which keeps it much simpler.
I've stripped out your fonts/styles just to keep this simple, and switched from animating top to animating transform:
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
position: absolute;
top: 0;
left: 0;
}
.headerContainer,
.container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
nav {
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: 66px;
left: 0;
background: #ffffff;
transform: translateY(-200px);
transition: transform 1s ease-in-out;
}
nav.show {
transform: translateY(0);
}
nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
}
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- First content, everything else appears on top -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- Then nav, on top of content, under header -->
<nav>
<ul class="mainMenu">
<li>First link</li>
<li>Second link</li>
<li>Thirth link</li>
<li>Fourth link</li>
</ul>
</nav>
<!-- Finally header, on top of everything -->
<header>
<div class="headerContainer">
<div class="headerBrand">Whatever</div>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
</div>
</header>
For this type of effects and due to the problem you are pointing out, I use a different technique to simulate the drop effect.
Just position the <nav> where you want and work with the max-height from 0 to a large enough value, and remove all negative z-index.
Find the solution in the snippet bellow
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: 9;
/* display: none; */
overflow: hidden;
padding: 0 15px;
width: calc(100% - 30px);
position: absolute;
/*top: -100px;
left: -1px;*/
top: 100%;
left: 0;
background: #ffffff;
/*transition: top 2s;*/
max-height: 0px;
transition: max-height 0.5s ease, padding 0.5s ease;
}
header nav.show {
/*top: 100%;*/
max-height: 500px;
padding: 15px;
transition: max-height 0.5s ease, padding 0.5s ease;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
/*z-index: -2;*/
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li>First link</li>
<li>Second link</li>
<li>Thirth link</li>
<li>Fourth link</li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
Main changes include changing the nav element to a div element with class as headerNav & making corresponding changes.
also z-index works just dont go in negative push header up to +ve numbers not pushing nav behind in -ve number.
This is the closest best solution for your problem.
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector(".headerNav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
align-content: center;
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
header{
width: 100%;
height: 7rem;
}
.headerContainer, .headerNav, .container{
display: flex;
width: 90%;
max-width: 1140px;
background: white;
margin: auto;
position: relative;
justify-content: space-between;
align-items: center;
padding:1rem;
}
.headerContainer{
height: 7rem;
z-index: 3;
}
.container{
padding:2rem;
}
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
.menuBtn {
width: 3rem;
height: 3rem;
text-align: center;
background: red;
font-size: 2rem;
line-height: 3rem;
border-radius: .5rem;
cursor: pointer;
color: #FFF;
}
.headerNav{
position: absolute;
top: -10rem;
transition: top .5s;
left:0;
right:0;
margin-left:auto;
margin-right: auto;
z-index: 2;
padding: 1rem;
}
.headerNav.show{
top: 7rem;
}
.mainMenu{
list-style: none;
}
.mainMenu li a:hover{
color: red;
}
<body>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text
</div>
<!-- END Logo -->
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
<!-- Nav -->
<div class="headerNav">
<ul class="mainMenu">
<li>First link</li>
<li>Second link</li>
<li>Thirth link</li>
<li>Fourth link</li>
</ul>
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
</body>
I appreciate all the help I can get :)
I'm trying to create a responsive navbar, which is editable for later usage.
But it seems like I have an issue with the hamburger icon. If I resize the web browser the content gets switched for the mobile friendly hamburger icon and the menu appears, and vice versa.
But when I click the hamburger icon in the mobile view and then click it again to make the menu disappear and after this resizing it to desktop view the menu goes missing.
How can I make it work?
HTML:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Framework</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar-hamburger").click(function(){
$(".navbar-item").toggle();
});
});
</script>
</head>
<body class="bg-grey-light">
<nav class="navbar bg-white">
<div class="navbar-brand">Company Name</div>
<div class="navbar-item">
Home
</div>
<div class="navbar-item">
About
</div>
<div class="navbar-item">
Shop
</div>
<div class="navbar-item">
Forum
</div>
<div class="navbar-hamburger">
<i class="fa fa-chevron-down"></i>
</div>
</nav>
</body>
CSS:
.navbar{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.navbar-brand{
flex-grow: 100;
padding: 0.75rem;
padding-left: 1.5rem;
}
.navbar-item{
flex-grow: 0;
padding: 0.75rem;
display: block;
}
.navbar-item:hover {
background-color: var(--color-grey-lighter);
}
.navbar-hamburger{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
.navbar-hamburger-active{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
#media only screen and (max-width: 720px) {
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-brand{
width: 100%;
}
.navbar-item{
width: 100%;
padding-left: 1.5rem;
display: none;
}
.navbar-hamburger{
display: block;
}
}
Brief DEMO:
https://codepen.io/zalandemeter12/pen/dQayMP
Regards
You can use toggleClass instead and hide navbar-item only on little screens
#import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
.navbar{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.navbar-brand{
flex-grow: 100;
padding: 0.75rem;
padding-left: 1.5rem;
}
.navbar-item{
flex-grow: 0;
padding: 0.75rem;
display: block;
}
.navbar-item:hover {
background-color: var(--color-grey-lighter);
}
.navbar-hamburger{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
.navbar-hamburger-active{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
#media only screen and (max-width: 720px) {
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-brand{
width: 100%;
}
.navbar-item{
width: 100%;
padding-left: 1.5rem;
display: none;
}
.navbar-hamburger{
display: block;
}
#media only screen and (max-width: 768px) {
.navbar-item{
display:none;
}
.navbar-item.opened{
display:block;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar-hamburger").click(function(){
$(".navbar-item").toggleClass('opened');
});
});
</script>
<nav class="navbar bg-wihite">
<div class="navbar-brand">Company Name</div>
<div class="navbar-item">
Home
</div>
<div class="navbar-item">
About
</div>
<div class="navbar-item">
Shop
</div>
<div class="navbar-item">
Forum
</div>
<div class="navbar-hamburger">
<i class="fa fa-chevron-down"></i>
</div>
</nav>
I want to cause an overlay on mouseover for my three images. I believe it will be best to use jQuery after creating a div. However, when I add a new div to my layout (below each of the <img> in my code) My layout is screwed up; goes from horizontal list to vertical list if i try to add in any <div> below my <img>.
I mainly want the overlay just sitting there. Im sure I can figure out mouseover action, but main issue is I cannot generate initial overlay
stackoverflowers: please help me add in an overlay div that will ultimately be transparent.
home.html I have commented out my attempt at placing overlay divs
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
PROGRAM
<ul id="programDrop">
<li><a href='#'>INSPECTIONS</a></li>
<li><a href='#'>SOFTWARE</a></li>
<li><a href='#'>SAVINGS</a></li>
</ul>
</li>
<li>LOGIN
<ul id="loginDrop">
<li><a href='#'>TECHNICIAN LOGIN</a></li>
<li><a href='#'>CUSTOMER LOGIN</a></li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
<div id="midMain">
<div class="circularImg">
<img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.contemporist.com/photos/e4delmar.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.rkmheatingandair.com/service-tech2.jpg"/>
<!-- <div class="overlay"></div> -->
</div>
</div>
</body>
</html>
stylesheet.css
body {
margin: 0;
}
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
font-size: 1rem;
}
#headerMenu > li {
display: inline-block;
}
#headerMenu > li:nth-child(1) {
color:red;
}
#headerMenu li a {
text-decoration: none;
color: black;
margin: 2rem;
padding: 0;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#programDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#programDrop li a{
color: black;
text-align: left;
list-style: none;
}
/* Sub Menu for Link Two */
#loginDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#loginDrop li a{
color: black;
text-align: left;
}
/* Photos on home page */
#midMain {
border: 1px solid red;
background-color: white;
text-align: center;
}
.circularImg {
overflow: hidden;
display: inline-block;
margin: auto;
padding: 0;
}
/* Removed code because nothing works as of yet */
.overLay {
}
/* Sets img imports as circular by default */
img {
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
opacity: .5;
}
included jQuery script.js
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(1)').mouseenter(function() {
$('#programDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(1)').mouseleave(function() {
$('#programDrop').css('visibility','hidden');
});
});
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(2)').mouseenter(function() {
$('#loginDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(2)').mouseleave(function() {
$('#loginDrop').css('visibility','hidden');
});
});
As per comments
CSS
.overlay {
background:black;
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
}
HTML
<div class="overlay"><img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/></div>
CODE
$(document).on("mouseover", "img", function() {
$(".overlay").css({"z-index": "999"});
$("img").css("opacity",".5");
});
Demo
http://jsfiddle.net/79zty3h7/