Mobile navbar menu - javascript

im learning hmtl/css and need a menu for my navbar (mobile version ). I watched some java script videos and tried to do same but sadly it dosent work. The menu dosent get hide nothing work tbh. I will be glad if u can advive me or show me a simple way to make one ( my js knowledge is basic ).
Thanks in advance^^
const mobileBtn = document.getElementById("nav-menu");
nav = document.querySelector("nav");
mobileBtnExit = document.getElementById("nav-exit");
mobileBtn.addEventListener("click", () => {
nav.classList.add("menu-btn");
});
mobileBtnExit.addEventListener("click", () => {
nav.classList.remove("menu-btn");
});
/*
===============
NAVBAR
===============
*/
.navbar {
background: var(--white);
padding: 10px;
}
.logo {
font-weight: bold;
font-size: 1.4em;
color: var(--black);
}
.logo span {
color: var(--primary-500);
}
.title {
display: flex;
place-content: space-between;
}
#nav-menu {
margin-top: 5px;
font-size: 1.4em;
font-weight: bold;
cursor: pointer;
display: block;
}
nav {
position: fixed;
z-index: 99;
width: 66%;
right: 0;
top: 0;
background: var(--primary-600);
height: 100vh;
padding: 1em;
}
nav.menu-btn {
display: block;
}
.home {
margin-top: 3em;
margin-bottom: -100px;
}
nav a {
color: var(--white);
display: block;
padding: 0.5em;
font-size: 1.4em;
text-align: right;
}
nav a:hover {
font-weight: bold;
}
#nav-exit {
display: block;
float: right;
margin: 0.5em;
cursor: pointer;
font-size: 1.4em;
}
<!-- START Navbar -->
<section class="navbar">
<div class="title">
<a class="logo" href="#">Swilam<span>DE</span></a>
<span><i id="nav-menu" class="fas fa-bars"></i></span>
</div>
<nav>
<i id="nav-exit" class="fas fa-times"></i>
<div class="home">
<ul>
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
</ul>
</div>
<div class="contact">
<ul>
<li>Contact</li>
<li><a class="premium" href="#">Go Premium</a></li>
</ul>
</div>
</nav>
</section>
<!-- End Navbar -->

you can use media query
#media screen and (max-width:768px){
the style here how do you want to be a mobile menu?
}
here you can check details

Related

Why does javascrip implemented in my website not work?

Script i implemented into my website doesn't work, i've checked everything and im going along a tutorial. Any ideas?
Link to my github repository:
https://github.com/DBvagabond/dbogdanski
link to webist preview:
https://htmlpreview.github.io/?https://github.com/DBvagabond/dbogdanski/blob/main/index.html
HTML
<body>
<div class="navbar">
<div class="container">
<a class="logo" href="index.html"><span>d</span>bogdanski</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu1.svg" alt="menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit1.svg" alt="exit">
<ul class="primary-nav">
<li class="current">Work</li>
<li>About</li>
<li>Shop</li>
<li>Social</li>
</ul>
<ul class="secondary-nav">
<li class="contact-cta">Contact</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
hero
</section>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
})
</script>
</body>
SCSS
.navbar {
background: var(--primary-color);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--secondary-color);
font-size: 1.2em;
span {
color: white;
}
}
nav {
display: none;
}
.mobile-menu{
width: 1.5em;
cursor: pointer;
display: block;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu-exit{
width: 1.5em;
float: right;
margin: .5em;
cursor: pointer;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section {
padding: 5em 2em;
}
nav {
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: grey;
height: 100vh;
padding: 1em;
ul.primary-nav {
margin-top: 5em;
}
li {
a{
color: var(--secondary-color);
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
}
}
}
}
I checked for the errors, copied and pasted code from the repository of author.
mobile menu should pop up and close upon clicking hamburger menu icon.
Why is JavaScript not working on my website?
On the web browser menu click on the "Edit" and select "Preferences". In the "Preferences" window select the "Security" tab. In the "Security" tab section "Web content" mark the "Enable JavaScript" checkbox. Click on the "Reload the current page" button of the web browser to refresh the page.

How to ensure only 1 nav bar is dropped when clicking on specific element?

I have this situation where I am clicking on a button in my nav bar and would like the corresponding nav bar to drop, I've drafted the HTML and attempted to create the JavaScript for this but haven't been able to successfully implement it.
const dropdownButtons = document.querySelectorAll(".dropdownButton");
const dropdownNav = document.querySelectorAll(".dropdown");
const navBar = document.querySelector("#navBar");
function toggleDropdown() {
dropdownNav.forEach((x => x.classList.toggle("show")))
}
dropdownButtons.forEach((btn) => {
btn.addEventListener("click", (e) => {
const button = e.target;
toggleDropdown(button)
})
})
#import url('https://fonts.googleapis.com/css2?family=Overpass:wght#300;600&family=Ubuntu:wght#400;500;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Overpass', sans-serif;
font-family: 'Ubuntu', sans-serif;
}
:root {
--dark-red-cta: hsl(356, 100%, 66%);
--light-red-cta: hsl(355, 100%, 74%);
--dark-blue-heading: hsl(208, 49%, 24%);
--white: hsl(0, 0%, 100%);
--grayish-blue-footer: hsl(240, 2%, 79%);
--dark-grayish-blue: hsl(207, 13%, 34%);
--very-dark-blue: hsl(240, 10%, 16%);
}
/* NAVBAR */
nav {
padding: 2em 10em;
}
nav img {
padding-right: 2em;
}
nav,
.siteNav {
display: flex;
align-items: center;
justify-content: space-between;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
button img {
margin-left: .5em;
}
button {
cursor: pointer;
background: none;
border: none;
color: white;
font-size: .9em;
}
header {
text-align: center;
background-image: url(/images/bg-pattern-intro-desktop.svg), linear-gradient(100deg, hsl(13, 100%, 72%), hsl(353, 100%, 62%));
background-size: 218%, auto;
background-position: 25% 52%;
height: 75vh;
border-radius: 0 0 0 6em;
}
header h1 {
color: white;
font-size: 3em;
font-weight: 500;
padding: 2em 0 .5em 0;
}
header p {
color: white;
padding: 0 0 2em 0;
}
.startButton,
.loginButton {
background-color: white;
color: var(--dark-red-cta);
border-radius: 30px;
width: 140px;
padding: 1.1em;
font-weight: bold;
}
.learnMoreButton {
color: white;
border-radius: 30px;
width: 140px;
padding: 1.1em;
border: 1px solid var(--white);
font-weight: bold;
}
/* For the drop down */
.dropdownItem {
position: relative;
}
.dropdown {
position: absolute;
background: var(--white);
border-radius: 8px;
padding: 1em;
text-align: left;
margin-top: 1em;
height: 14em;
width: 10em;
display: flex;
flex-direction: column;
justify-content: space-evenly;
visibility: hidden;
}
.show {
visibility: visible;
}
.rotateImg {
transform: rotate(90deg);
}
.dropdown li a {
color: black;
text-decoration: none;
}
.dropdown li a:hover {
font-weight: bold;
}
<nav>
<div class="siteNav">
<img src="/images/logo.svg" alt="Blogr logo">
<ul id="navBar">
<li class="dropdownItem">
<button class="dropdownButton">Product
<img src="/images/icon-arrow-light.svg" alt="Drop down arrow">
</button>
<ul class="dropdown dropdown-content">
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</li>
<li class="dropdownItem">
<button class="dropdownButton">Company
<img src="/images/icon-arrow-light.svg" alt="Drop down arrow">
</button>
<ul class="dropdown dropdown-content">
<li>About</li>
<li>Team</li>
<li>Our Blog</li>
<li>Careers</li>
</ul>
</li>
<li class="dropdownItem">
<button class="dropdownButton">Connect
<img src="/images/icon-arrow-light.svg" alt="Drop down arrow">
</button>
<ul class="dropdown dropdown-content">
<li>Contact</li>
<li>Newsletter</li>
<li>LinkedIn</li>
</ul>
</li>
</ul>
</div>
<div class="login">
<button class="loginButton">Login</button>
<button class="signUpButton">Sign Up</button>
</div>
</nav>
I'm currently successfully able to correspond a click and assign the correct class using this method but the only issue is that it adds it to all 3 drop downs and I just cannot wrap my head around event bubbling so would appreciate a little bit of hand holding for this example.
I am looping through the buttons and then triggering a function which should then make the relative drop down visible by updating it's visibility. This works and it only shows the 3rd option because it updates all 3 classes instead of one.
I tried using a current target approach on this but wasn't able to get it to work since I couldn't add a classList to e.target. Could someone point out to me where I'm going wrong on this one?
EDIT:
Added CSS file as it would be relevant to see the positioning of the elements understandably.
Pass a prop index so that you would toggle the class .show only to that particular dropdown and not all
const dropdownButtons = document.querySelectorAll(".dropdownButton");
const dropdownNav = document.querySelectorAll(".dropdown");
const navBar = document.querySelector("#navBar");
function toggleDropdown(ind) {
dropdownNav[ind].classList.toggle("show")
}
dropdownButtons.forEach((btn, index) => {
btn.addEventListener("click", (e) => {
const button = e.target;
toggleDropdown(index)
})
})

How can i make anchor tags clickable when using the function z index

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>

Why does my toggle menu not show the effects of the :hover when working with media queries?

I have created a Toggle Nav where you click a button and the navbar pops out and everything works fine on desktop. When I make it responsive the Toggle Nav has no problems except it won't show the styles for the mobile-menu-itmes:hover class. Not quite sure what I'm doing wrong....It has to be something with the CSS but I can't figure it out. Any help is appreciated it, thanks.
HTML
<div class="menu-btn" id="toggle-btn">
<i class="fas fa-bars fa-2x"></i>
<div class="mobile-menu">
<li><a class="mobile-menu-items" href="#">Home</a></li>
<li><a class="mobile-menu-items" href="#">About</a></li>
<li><a class="mobile-menu-items" href="#">Services</a></li>
<li><a class="mobile-menu-items" href="#">Portfolio</a></li>
</div>
</div>
SCSS
.menu-btn {
color: #4f6df5;
font-size: 1.1rem;
font-weight: 900;
cursor: pointer;
padding: 1rem;
display: none;
.mobile-menu {
display: none;
flex-direction: column;
list-style: none;
height: 100vh;
width: 50%;
padding: 40px;
.mobile-menu-items {
font-size: .9rem;
text-decoration: none;
color: #242424;
line-height: 4;
display: block;
}
.mobile-menu-items:hover {
background: #4f6df5;
padding: .5rem;
color: white;
display: block;
}
}
}
Javascript
const menuBtn = document.querySelector('#toggle-btn');
const mobileMenu = document.querySelector('.mobile-menu');
menuBtn.addEventListener('click', clickedBtn);
function clickedBtn() {
//mobileMenu.classList.toggle("mobile-menu");
if (mobileMenu.style.display === 'none') {
mobileMenu.style.display = 'block';
} else {
mobileMenu.style.display = 'none';
}
}
Media Queries
#media screen and (max-width: 768px) {
.menu-btn {
display: flex;
}
You have a missing closing curly bracket } in your media query, so it is not rendering these styles. I've added background-color: red to the media query to show you that it works.
.menu-btn {
color: #4f6df5;
font-size: 1.1rem;
font-weight: 900;
cursor: pointer;
padding: 1rem;
display: flex;
}
.mobile-menu {
display: flex;
flex-direction: column;
list-style: none;
height: 100vh;
width: 50%;
padding: 40px;
}
.mobile-menu-items {
font-size: .9rem;
text-decoration: none;
color: #242424;
line-height: 4;
display: block;
}
.mobile-menu-items:hover {
background: #4f6df5;
padding: .5rem;
color: white;
display: block;
}
#media screen and (max-width: 768px) {
.menu-btn {
display: flex;
background-color: red;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous" />
<div class="menu-btn" id="toggle-btn">
<i class="fas fa-bars fa-2x"></i>
<div class="mobile-menu">
<li><a class="mobile-menu-items" href="#">Home</a></li>
<li><a class="mobile-menu-items" href="#">About</a></li>
<li><a class="mobile-menu-items" href="#">Services</a></li>
<li><a class="mobile-menu-items" href="#">Portfolio</a></li>
</div>
</div>
EDIT: SCSS is a superset of CSS, so you can move the curly brackets for .menu-btn and .mobile-menu back to the end where you had them initially and it will work the exact same. SO code snippets do not support SCSS unfortunately.
You are not closing curly braces for
#media screen and (max-width: 768px) {
.menu-btn {
display: flex;
}
}
so it is not showing hover effect ,
Check Updated Fiddle

Header navbar error

I'm coding a responsive navbar, which turns into a burger menu below a certain width, however when I try to open the dropdown menu, it all jumps back up to the top of the page rather than remaining wherever I am within the page.
Sorry it's quite hard to describe, but do find all the code below and please let me know if you're able to see what the issue is.
Thank you all in advance:
$('#burger_menu').click(function() {
$('header ul').css('display', 'block');
$('header ul').mouseleave(function() {
$('header ul').css('display', 'none');
});
});
header {
width: 100%;
background: #62c2d2;
position: fixed;
top: 0;
z-index: 20;
}
header #logo {
width: 300px;
height: 40px;
margin: 15px;
background: url('../img/new-logo.png')center no-repeat;
background-size: cover;
float: left;
}
header nav {
padding: 10px 15px;
float: right;
}
header nav #burger_menu {
padding-right: 20px;
font-size: 40px;
display: none;
color: #fff;
}
header nav #burger_menu:visited {
color: #fff;
}
header nav #burger_menu:hover {
color: #eee;
}
header nav #burger_menu:active {
color: #fff;
}
header nav ul {
display: block;
}
header nav li {
padding: 10px;
display: inline-block;
float: left;
}
header nav a {
width: fit-content;
font-size: 18px;
color: #fff;
text-decoration: none;
position: relative;
}
#media screen and (max-width: 1023px) {
/* NAV */
header nav #burger_menu {
display: inline-block;
}
header nav ul,
nav:active ul {
display: none;
position: absolute;
padding: 20px 40px;
background: #62c2d2;
right: 0;
top: 80px;
width: 30%;
}
header nav li {
width: 100%;
text-align: center;
padding: 15px;
margin: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
<!-- left -->
<!-- right -->
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>
<span class="active">home</span>
</li>
<li>
<span>about</span>
</li>
<li>
<span>careers</span>
</li>
<li>
<span>contact</span>
</li>
</ul>
</nav>
</header>

Categories