I want to ask a question when I click on my navigation bar menu icon that I have from font awesome it does not open my menu first time but when I click again I on the navigation bar I will be more cleared by these images and situations.
First time click:
Image of first time clicked
Second time click - it opens means clicking two times :
The image after clicking second time
My html code
function navigation() {
let navLis = document.getElementById('navLis');
let hamburger = document.getElementById('hamburger');
if (navLis.style.marginTop === '-250px') {
navLis.style.marginTop = '50px';
setTimeout(function() {
hamburger.className = 'fa fa-close';
}, 200);
} else {
navLis.style.marginTop = '-250px';
setTimeout(function() {
hamburger.className = 'fa fa-bars';
}, 200);
}
}
.nav {
position: absolute;
z-index: 2222;
width: 100%;
}
.current {
color: black;
background: #fff;
padding: 4px;
}
li {
list-style-type: none;
}
a {
transition: .2s!important;
text-decoration: none;
}
nav ul {
margin-top: 20px;
color: white;
background: black;
transition: all 1s linear!important;
}
nav {
height: 60px;
border-bottom: 2px solid black;
background: black;
}
nav li {
display: inline-block;
transition: 1s!important;
padding: 6px;
}
nav li a {
color: white;
display: inline-block;
font-family: Sans-Serif;
font-weight: bold;
padding: 2px 0px;
}
nav li a:hover {
color: black;
background: #fff;
padding: 4px;
}
#navLis {
background: black!important;
position: absolute;
width: 100%;
z-index: 11!important;
padding: 10px 0;
}
nav i {
display: none!important;
font-size: 2em!important;
position: absolute;
top: 10px;
right: 10px;
transform: translate(-10px);
color: white;
transition: all 1s ease;
}
.logo {
padding: 10px;
display: block;
z-index: 111;
font-size: 25px;
}
.logo a {
font-family: 'Josefin Sans', sans-serif;
color: #ff6f00;
}
#media screen and (max-width:668px) {
nav {
height: 64px;
transition: 1s!important;
}
nav li {
text-align: center;
display: block;
transition: all 1s linear!important;
}
#navLis {
transition: margin-top .3s ease-in .2s!important;
display: block;
margin-top: -250px;
background: black;
z-index: 11;
}
nav i {
display: block!important;
}
.home_container {
height: 80vh;
}
}
<nav class="navbar" id="navbar">
<div class="nav">
<a onclick="navigation()">
<i class="fa fa-bars" aria-hidden="true" id="hamburger"></i>
</a>
<div class="logo">
The Big Blog
</div>
</div>
<div id="navLis">
<ul>
<li>Home</li>
<li>Start Blogging</li>
<li>Popular Bloggers</li>
<li>About Us</li>
<li><a class="current" href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
Edit : My media queries
#media screen and (max-width:668px)
{
nav
{ height: 64px; transition: 1s!important; }
nav li
{ text-align: center; display: block; transition: all 1s linear!important; }
#navLis { transition: margin-top .3s ease-in .2s!important; display: block; margin-top: -250px; background: black; z-index: 11; }
nav i {
display: block!important;
}
.home_container{
height: 80vh;
}
}
The problem is that you've not included the margin-top: -250px in the style attribute at first.
so navLis.style.marginTop === '-250px' will return false at first and the else block will be executed.
so you have to add the style attribute to your #navList like this:
<div id="navLis" style="margin-top: -250px">
function navigation() {
let navLis = document.getElementById('navLis');
let hamburger = document.getElementById('hamburger');
let top = window.getComputedStyle(navLis, null).getPropertyValue("margin-top");
if (top === '-250px') {
navLis.style.marginTop = '50px';
setTimeout(function() {
hamburger.className = 'fa fa-close';
}, 200);
} else {
navLis.style.marginTop = '-250px';
setTimeout(function() {
hamburger.className = 'fa fa-bars';
}, 200);
}
}
.nav {
position: absolute;
z-index: 2222;
width: 100%;
}
.current {
color: black;
background: #fff;
padding: 4px;
}
li {
list-style-type: none;
}
a {
transition: .2s!important;
text-decoration: none;
}
nav ul {
margin-top: 20px;
color: white;
background: black;
transition: all 1s linear!important;
}
nav {
height: 60px;
border-bottom: 2px solid black;
background: black;
}
nav li {
display: inline-block;
transition: 1s!important;
padding: 6px;
}
nav li a {
color: white;
display: inline-block;
font-family: Sans-Serif;
font-weight: bold;
padding: 2px 0px;
}
nav li a:hover {
color: black;
background: #fff;
padding: 4px;
}
#navLis {
background: black!important;
position: absolute;
width: 100%;
z-index: 11!important;
padding: 10px 0;
}
nav i {
display: none!important;
font-size: 2em!important;
position: absolute;
top: 10px;
right: 10px;
transform: translate(-10px);
color: white;
transition: all 1s ease;
}
.logo {
padding: 10px;
display: block;
z-index: 111;
font-size: 25px;
}
.logo a {
font-family: 'Josefin Sans', sans-serif;
color: #ff6f00;
}
#media screen and (max-width:668px) {
nav {
height: 64px;
transition: 1s!important;
}
nav li {
text-align: center;
display: block;
transition: all 1s linear!important;
}
#navLis {
transition: margin-top .3s ease-in .2s!important;
display: block;
margin-top: -250px;
background: black;
z-index: 11;
}
nav i {
display: block!important;
}
.home_container {
height: 80vh;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<nav class="navbar" id="navbar">
<div class="nav">
<a onclick="navigation()">
<i class="fa fa-bars" aria-hidden="true" id="hamburger"></i>
</a>
<div class="logo">
The Big Blog
</div>
</div>
<div id="navLis">
<ul>
<li>Home</li>
<li>Start Blogging</li>
<li>Popular Bloggers</li>
<li>About Us</li>
<li><a class="current" href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
Related
I want the navbar to stay where it is without disappearing.
Here's my code:
var sideBar = document.getElementById('sidebar')
var menuIcon = document.getElementById('menu-icon')
function show() {
menuIcon.style.display = "none"
sideBar.style.display = "Block"
}
function hide() {
menuIcon.style.display = "inline"
sideBar.style.display = "none"
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
/*
Normal navbar on top of page
*/
body {
height: 1000vh;
}
.normal {
background-color: black;
position: fixed;
top: 0;
width: 100%;
}
.normal .normal-menu .menu-icon i {
font-size: 30px;
cursor: pointer;
transition: all 0.4s ease;
margin: 20px;
color: white;
}
.normal .normal-menu .menu-icon i:hover {
color: gray;
}
.normal .normal-menu .title {
position: absolute;
margin-top: 20px;
left: 50%;
transform: translate(-50%);
color: white;
font-size: 30px;
text-decoration: none;
}
/*sidebar styles*/
.sidebar {
background: black;
height: 100vh;
padding: 30px;
color: white;
width: 300px;
display: none;
transition: all 0.4s ease-in;
}
.sidebar .navbar .logo a {
text-decoration: none;
color: white;
font-size: 20px;
}
.sidebar .navbar .close-icon {
float: right;
font-size: 20px;
transition: all 0.4s ease;
cursor: pointer;
}
.sidebar .navbar .close-icon:hover {
color: gray;
}
.sidebar .navbar .menu {
margin-top: 100px;
}
.sidebar .navbar .menu li {
list-style: none;
border-radius: 10px;
padding: 20px;
cursor: pointer;
transition: all 0.4s ease;
}
.sidebar .navbar .menu li:hover {
background: white;
color: black;
}
.sidebar .navbar .menu li a {
color: inherit;
text-decoration: none;
}
<!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>Aaqil Abdullah</title>
<link rel="stylesheet" href="style.css" />
<link href="https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css" rel="stylesheet" />
</head>
<body>
<nav class="normal" id="normal">
<ul class="normal-menu" id="normal-menu">
<span class="menu-icon" id="menu-icon" onclick="show()"><i class="bx bx-menu"></i
></span>
Aaqil Abdullah
</ul>
</nav>
<aside class="sidebar" id="sidebar">
<nav class="navbar">
<span class="logo">Aaqil Abdullah</span>
<span class="close-icon" onclick="hide()"><i class="bx bx-x"></i></span>
<ul class="menu">
<li>Home</li>
<li>Projects</li>
<li>Interests</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</aside>
<div class="container">
</div>
<script src="script.js"></script>
</body>
</html>
It's happening because yourself are doing it, you need to remove these lines from your js
var menuIcon = document.getElementById('menu-icon');
menuIcon.style.display = "none";
menuIcon.style.display = "inline";
const sideBar = document.getElementById("sidebar");
function show() {
sideBar.style.display = "block";
}
function hide() {
sideBar.style.display = "none";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
/*
Normal navbar on top of page
*/
body {
height: 100vh;
}
.normal {
position: fixed;
top: 0;
width: 100%;
background: black;
}
.normal .normal-menu .menu-icon i {
font-size: 30px;
cursor: pointer;
transition: all 0.4s ease;
margin: 20px;
color: white;
}
.normal .normal-menu .menu-icon i:hover {
color: gray;
}
.normal .normal-menu .title {
position: absolute;
margin-top: 20px;
left: 50%;
transform: translate(-50%);
color: white;
font-size: 30px;
text-decoration: none;
}
/*sidebar styles*/
.sidebar {
position: fixed;
display: none;
background: black;
height: 100vh;
width: 300px;
padding: 30px;
top: 0;
left: 0;
color: white;
transition: all 0.4s ease-in;
}
.sidebar .navbar .logo a {
text-decoration: none;
color: white;
font-size: 20px;
}
.sidebar .navbar .close-icon {
float: right;
font-size: 20px;
transition: all 0.4s ease;
cursor: pointer;
}
.sidebar .navbar .close-icon:hover {
color: gray;
}
.sidebar .navbar .menu {
margin-top: 100px;
}
.sidebar .navbar .menu li {
list-style: none;
padding: 20px;
border-radius: 10px;
cursor: pointer;
transition: all 0.4s ease;
}
.sidebar .navbar .menu li:hover {
color: black;
background: white;
}
.sidebar .navbar .menu li a {
color: inherit;
text-decoration: none;
}
<link href="https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css" rel="stylesheet" />
<nav class="normal" id="normal">
<ul class="normal-menu" id="normal-menu">
<span class="menu-icon" id="menu-icon" onclick="show()"><i class="bx bx-menu"></i></span>
Aaqil Abdullah
</ul>
</nav>
<aside class="sidebar" id="sidebar">
<nav class="navbar">
<span class="logo">Aaqil Abdullah</span>
<span class="close-icon" onclick="hide()"><i class="bx bx-x"></i></span>
<ul class="menu">
<li>Home</li>
<li>Projects</li>
<li>Interests</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</aside>
I cannot get my ease-in transition to work on the navigation bar.
On Mobile when you click the burger, I would like a simple transition sliding in from right to left.
I tried using translateX (0%, 100%) instead of display (none, flex).
I feel like i am missing/forgetting something really simple.
What am I doing wrong / forgetting?
Github Repo_branch
// Js waits to run until after DOM is loaded
document.addEventListener("DOMContentLoaded", ready);
function ready() {
console.log('DOM is ready');
toggleMenu();
}
function toggleMenu() {
console.log("script is imported and executed");
// Navigation opt4 - using eventlisteners and inline styling.... - works but very fucking ugly piece of code and unnecessary complicated
const navLinks = document.querySelector('.nav-links');
const burgerToggle = document.querySelector('#burger');
burgerToggle.addEventListener('click', show);
function show() {
burgerToggle.classList.toggle('toggle');
navLinks.classList.toggle('nav-links_active')
}
function close() {
navLinks.classList.toggle('nav-links_closed')
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background-color: black;
}
.container {
max-width: 1368px;
margin: 0 auto;
padding: 1rem 2rem;
}
button {
border: none;
outline: none;
cursor: pointer;
padding: 0.75rem 1rem;
margin: 0 1rem;
border-radius: 6px;
background: transparent;
border: 2px solid white;
color: white;
font-weight: 500;
}
* {
font-family: Helvetica, sans-serif;
}
/* Link styling */
a {
text-decoration: none;
font-size: 1rem;
}
/* NAVIGATION */
.navbar {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 2.25rem;
color: white;
font-weight: 700;
}
/* Nav Links styling */
.nav-links {
display: flex;
align-items: center;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
color: white;
margin: 0 1.25rem;
position: relative;
}
.nav-links a.active {
text-decoration: underline;
font-weight: bold;
}
#media (max-width: 850px) {
.burger {
cursor: pointer;
position: relative;
display: block!important;
z-index: 11;
font-size: 3rem;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
button {
border-color: black;
color: black;
padding: 0.75rem 1.5rem;
}
.nav-links a {
color: black;
}
.nav-links {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 100px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 10;
transition: 0.5s ease-in;
}
.nav-links_closed {
display: none;
}
.nav-links_active {
display: flex;
}
/* Toggle styling */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
background-color: black;
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
background-color: black;
}
}
<body>
<div class="container">
<nav class="navbar">
<p class="logo">LOGO</p>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<button>Sign In</button>
<button>Sign Up</button>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</body>
First, transition has no effect on changing display properties.
It's a good idea to use the transform parameter for example below:
Then a slide-down effect can be achieved.
Demo:
// Js waits to run until after DOM is loaded
document.addEventListener("DOMContentLoaded", ready);
function ready() {
console.log('DOM is ready');
toggleMenu();
}
function toggleMenu() {
console.log("script is imported and executed");
// Navigation opt4 - using eventlisteners and inline styling.... - works but very fucking ugly piece of code and unnecessary complicated
const navLinks = document.querySelector('.nav-links');
const burgerToggle = document.querySelector('#burger');
burgerToggle.addEventListener('click', show);
function show() {
burgerToggle.classList.toggle('toggle');
navLinks.classList.toggle('nav-links_active')
}
function close() {
navLinks.classList.toggle('nav-links_closed')
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background-color: black;
}
.container {
max-width: 1368px;
margin: 0 auto;
padding: 1rem 2rem;
}
button {
border: none;
outline: none;
cursor: pointer;
padding: 0.75rem 1rem;
margin: 0 1rem;
border-radius: 6px;
background: transparent;
border: 2px solid white;
color: white;
font-weight: 500;
}
* {
font-family: Helvetica, sans-serif;
}
/* Link styling */
a {
text-decoration: none;
font-size: 1rem;
}
/* NAVIGATION */
.navbar {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 2.25rem;
color: white;
font-weight: 700;
}
/* Nav Links styling */
.nav-links {
display: flex;
align-items: center;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
color: white;
margin: 0 1.25rem;
position: relative;
}
.nav-links a.active {
text-decoration: underline;
font-weight: bold;
}
#media (max-width: 3000px) {
.burger {
cursor: pointer;
position: relative;
display: block!important;
z-index: 11;
font-size: 3rem;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
button {
border-color: black;
color: black;
padding: 0.75rem 1.5rem;
}
.nav-links a {
color: black;
}
.nav-links {
display: flex;
transform: translate3d(0, -100%, 0);
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 100px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 10;
transition: 0.3s ease-in;
}
.nav-links_closed {
display: none;
}
.nav-links_active {
display: flex;
transform: translate3d(0, 0, 0);
}
/* Toggle styling */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
background-color: black;
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
background-color: black;
}
}
<body>
<div class="container">
<nav class="navbar">
<p class="logo">LOGO</p>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<button>Sign In</button>
<button>Sign Up</button>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</body>
I've been struggling to get my navbar on mobile to transition downwards when the hamburger menu is pressed. I have added CSS and looked into things but I'm struggling to understand why it isn't working.
I'd like the navbar to drop down and the opacity of the links to change.
I have used an answer below to adapt my code but I am still encountering difficulties.
Thanks in advance.
function myFunction() {
var x = document.getElementById("myLinks");
if(x.className.indexOf('easein') > -1) {
x.classList.remove('easein');
x.classList.add('easeout')
}
else {
x.classList.add('easein');
x.classList.remove('easeout')
}
}
.topnav {
display: block;
background-color: #fff;
box-shadow: 1px 1px 16px 2px red;
position: fixed;
z-index: 45;
right: 0;
width: 100vw;
}
.topnav a#home {
left: 0;
}
.topnav .myLinks {
height: 0;
opacity: 0;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.topnav a {
color: #0000a0;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: 700;
display: block;
}
.topnav a.icon {
background: #fff;
display: block;
position: absolute;
right: 0;
top: 4vw;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.fa {
color: red;
}
#myLinks a{
left: -10%;
border-radius: 0;
width: 100vw;
margin: 0;
}
.topnav .myLinks.easein {
height:500px;
opacity: 1;
}
.topnav .myLinks.easeout {
height:0px;
opacity: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
Logo
<div id="myLinks" class="myLinks">
Portal
Feedback
Logout
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
The issue is you have set the CSS attribute display to have the animation, I suggest that you change it to opacity and height, also note that I used classList to add/remove class, here is an implementation of what you are looking for:
function myFunction() {
var x = document.getElementById("myLinks");
if(x.className.indexOf('easein') > -1) {
x.classList.remove('easein');
x.classList.add('easeout')
}
else {
x.classList.add('easein');
x.classList.remove('easeout')
}
}
.topnav {
background-color: #fff;
box-shadow: 1px 1px 16px 2px red;
position: fixed;
z-index: 20;
right: 0;
width: 100vw;
}
.topnav a#home {
left: 0;
}
.topnav .myLinks {
height: 0;
opacity: 0;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.topnav a {
color: #0000a0;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: #fff;
display: block;
position: absolute;
right: 0;
top: 4vw;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.fa {
color: red;
}
.myLinks a{
width: 100vw;
}
.topnav .myLinks.easein {
height:500px;
opacity: 1;
}
.topnav .myLinks.easeout {
height:0px;
opacity: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
Logo
<div id="myLinks" class="myLinks">
Portal
Feedback
Logout
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
Can someone explain me why, when I open menu (which is fullwidth), so that menu is not overlapping h1. I tried <span> and <span> was OK, when I want h1, h2... it doesn't work.
After menu open I can see it. Also I tried z-index on menu and nothing and same I did with h1, but still nothing.
Here is the code as CSS+HTML (with JS):
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
background-color: #1d1d1d;
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
z-index: 99999;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
}
#about {
height: 100vh;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
h1.main {
color: white;
position: absolute;
top: 50%;
left: 5%;
font-size: 5em !important;
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<header>
<div class="container">
<h1 class="logo">Panco <span>design</span></h1>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">About</a></li>
<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js">
<h1 class="main">Hi</h1>
</div>
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
$('.menu-link').click(function() {
$('.site-nav').toggleClass('site-nav--open', 250);
$('.menu-toggle').toggleClass('open');
})
$(function($) {
$('a').on('click', function(e) {
var $anchor = $(this).attr("href");
var $hrefStart = $anchor.substr(0, 1);
if ($hrefStart == "#") {
$('html,body').animate({
scrollTop: $($anchor).offset().top
}, 1500, 'easeInOutExpo');
e.preventDefault();
} else {
window.location.href = $anchor;
}
});
})(jQuery);
</script>
</body>
</html>
Your shared code was a mess. Tried to clean it up a bit.
Anyway, the problem is that your menu is inside header. Even if you give the menu z-index, if the header has no z-index , the menu won't show on top of other elements.
So add z-index:9999 or something like that to the header.
See below
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
$('.menu-link').click(function() {
$('.site-nav').toggleClass('site-nav--open', 250);
$('.menu-toggle').toggleClass('open');
})
$('a').on('click', function(e){
var $anchor = $(this).attr("href");
var $hrefStart = $anchor.substr(0, 1);
if ( $hrefStart == "#" ) {
$('html,body').animate({
scrollTop: $($anchor).offset().top
}, 1500, 'easeInOutExpo');
e.preventDefault();
} else {
window.location.href = $anchor;
}
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
background-color: #1d1d1d;
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%;
z-index: 999;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
z-index: 99999;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
}
#about {
height: 100vh;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
h1.main {
color: white;
position: absolute;
top: 50%;
left: 5%;
font-size: 5em !important;
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="container">
<h1 class="logo">Panco <span>design</span></h1>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">About</a></li>
<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js">
<h1 class="main">Hi</h1>
</div>
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
If you just add z-index: -1; to h1.main then this issue will be resolved and you don't need to do anything else. z-index: -1; can be set to negative values which is used to lower the priority of selector. Read CSS - z-index for more detail.
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
$('.menu-link').click(function() {
$('.site-nav').toggleClass('site-nav--open', 250);
$('.menu-toggle').toggleClass('open');
})
$('a').on('click', function(e){
var $anchor = $(this).attr("href");
var $hrefStart = $anchor.substr(0, 1);
if ( $hrefStart == "#" ) {
$('html,body').animate({
scrollTop: $($anchor).offset().top
}, 1500, 'easeInOutExpo');
e.preventDefault();
} else {
window.location.href = $anchor;
}
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
background-color: #1d1d1d;
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
z-index: 99999;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
}
#about {
height: 100vh;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
h1.main {
color: white;
position: absolute;
top: 50%;
left: 5%;
font-size: 5em !important;
z-index: -1;
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="container">
<h1 class="logo">Panco <span>design</span></h1>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">About</a></li>
<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js">
<h1 class="main">Hi</h1>
</div>
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
I'm not sure if my function is wrong or there is something i miss-typed somewhere but every time I open my html page then the nav is open.
the function closes correctly and opens correctly once clicked anywhere on the overlay but the only issue im having is that when i load the page the nav is already opened.
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>
Add display: none to overlay - see demo below:
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ {
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
display: none;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>