Trying to build my first project, a restaurant website but having some trouble with toggling the nav bar. The nav bar links direct the user to the specified section, but the nav bar remains open after that section is reached/ How do I get it to close after clicking on a link?
This is the JavaScript I'm using:
//select element function
const selectElement=function(element){
return document.querySelector(element);
};
let menuToggler=selectElement('.menu-toggle');
let body=selectElement('body');
menuToggler.addEventListener('click',function(){
body.classList.toggle('open');
});
the HTML of the header/navbar section :
<script src="https://unpkg.com/scrollreveal" charset="utf-8"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav" id="navbar">
<div class="menu-toggle" id="menu-toggle">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<img src="" alt="">
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Menu
</li>
<li class="nav-item">
Order Online
</li>
<li class="nav-item">
Make a Reservation
<li class="nav-item">
Contact Us
</li>
</ul>
</nav>
</div>
</header>
<!-- Header ends-->
CSS of the header, using font awesome
.nav{
height: 7.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle{
color: #fff;
font-size: 2.2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 2.5rem;
cursor: pointer;
z-index: 1800;
}
/*to hide x of nav bar*/
.fa-times{
display: none;
}
.nav-list{
list-style: none;
position: fixed;
top: 0;
left: 0;
width: 70%;
height:100vh;
background-color: var(--main-font-color-dark);
padding: 4.4rem;
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 1850;
transform: translateX(-100%); /*hides nav bar*/
transition: transform .5s;
}
/*before nav clicked*/
.nav::before{
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.8);
z-index: 1000;
opacity: 0;
trasform:scale(0);
transition: opacity .5s;
}
.open .fa-times{
display: block;
}
/*hides hamburger icon on clicking it*/
.open .fa-bars{
display: none;
}
.open .nav-list{
transform: translateX(0);
}
.open .nav::before{
opacity: 1;
transform: scale(1);
}
let navbar= document.getElementById("navbar")
let link= document.getElementById("link-a")
let showMenu= document.getElementById("show-menu")
link.addEventListener('click',function(){
document.getElementById("navbar").style.display = "none"
});
showMenu.addEventListener('click',function(){
document.getElementById("navbar").style.display = "flex"
});
#navbar{
height: 40px;
width: 100%;
background: red;
}
<div id="navbar" >
<a id="link-a">Click me to hide menu</a>
</div>
<div id="show-menu"> Show menu</div>
small demo to toggle menu
Related
I'm working on my portfolio website and I'm not that good with CSS as of now this social bar is coming like this in between and I want it to go down like the bottom of the page
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
.social {
/* //position my socials to bottom left */
position: absolute;
scale: 0.09;
bottom: 0;
left: 0;
margin-top: 100%;
margin-left: 40px;
width: 0%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
.social li {
list-style: none;
}
.social li a {
display: inline-block;
margin-left: 40px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover {
transform: scale(0.65) translateY(-15px);
}
<body>
<section class="showcase">
<header>
<h2 class="logo">
EAzZY/Madhur</h2>
<div class="toggle"></div>
</header>
<video src="pexels-rostislav-uzunov-7513671.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>👋 I am Madhur</h2>
</div>
<ul class="social">
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
</ul>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<section id="home"></section>
<section id="about">
<h1>about</h1>
</section>
<section id="contact">
<h1>contact</h1>
</section>
</body>
So without seeing your html I don't know how exactly where your social media bar is. I see you are using absolute positioning which can get goofy if the parent container it is in is not 100% height of the window. Which may be happening here. See my example below. If you want it to sit at the bottom of the screen and the screen does not scroll you will have to make the parent container the height of the screen.
.full-height {
width: 100%;
height: 100vh;
background-color: black;
overflow-x: hidden;
position: relative;
}
.social {
width: 200px;
height: 50px;
background-color: blue;
position: absolute;
bottom: 20px;
left: 20px;
}
<div class="full-height">
<ul class="social"> </ul>
<div>
It would be better to have your html code as well. But assuming the situation, I guess it might be like this:
<div class="container">
<ul class="social">
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
</ul>
</div>
Your CSS code which works, adjust it like this
/* Your container should have position relative and a height of the viewport */
.container {
position: relative;
border: 1px solid red;
height: 15rem;
}
.social {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
z-index: 1;
}
.social li {
list-style: none;
}
.social li a {
display: inline-block;
color : #fff;
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover {
transform: scale(0.65) translateY(-15px);
}
to do that you can use absolute positioning.
we set our chosen element position to absolute and its container position to relative.
so you choose body as its container and set position for body to relative.
You can change the position of social class to fixed instead of absolute.
I want to create a vertical scrolling div with an active indicators. However I'm having trouble with it event firing on the div targeted. I set it to window.addEventListener it works fine at full height of the window but if I set it to div.addEventListener it's not firing inside of the element at all. I'm Hoping someone has some pointer for this. Here's what I got so far.
section.scroller {
max-width: 900px;
margin: auto;
background: antiquewhite;
scroll-behavior: smooth;
position: relative;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 17px;
// padding: 0 17px;
box-sizing: content-box;
}
.sec {
min-height: 100vh;
// width: 100vw;
display: flex;
align-items: center;
justify-content: center;
scroll-behavior: smooth;
// width: 100%;
&:nth-child(odd) {
background: #ddd;
}
}
.lnbNavbar {
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
border-radius: 15px;
transition: opacity .4s ease .2s;
opacity: 0;
position: relative;
float: right;
transition: .3s all;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
width: 0px;
position: relative;
text-align: right;
.dot {
border: 2px solid#333;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
transition: .2s ease;
span {
display: inline-block;
}
}
}
}
}
.lnbNavbar ul li a:active,
.lnbNavbar ul li a:hover {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.lnbNavbar ul li.active a,
.lnbNavbar ul li:hover a {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.outter {
width: 800px;
height: 500px;
margin: auto;
overflow: hidden;
}
<div class="outter" id="outter">
<section class="scroller" id="scroller">
<nav class="lnbNavbar">
<ul>
<li class="home active">
<a href="#home" class=" home dot">
<span></span>
</a>
</li>
<li class="about">
<a href="#about" class="about dot">
<span></span>
</a>
</li>
<li class="service">
<a href="#service" class="service dot">
<span></span>
</a>
</li>
<li class="project">
<a href="#project" class="project dot">
<span></span>
</a>
</li>
<li class="contact">
<a href="#contact" class="contact dot">
<span></span>
</a>
</li>
</ul>
</nav>
<section class="sec" id="about"><h4>about</h4></section>
<section class="sec" id="service"><h4>service</h4></section>
<section class="sec" id="project"><h4>project</h4></section>
<section class="sec" id="contact"><h4>contact</h4></section>
<section class="sec" id="home"><h4>home</h4></section>
</section>
<script>
const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('.lnbNavbar ul li');
const div = document.getElementById("outter")[0];
div.addEventListener('scroll', ()=> {
let current = '';
sections.forEach( section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if(pageYOffset >= (sectionTop - sectionHeight / 4)){
current = section.getAttribute('id');
}
})
console.log(current);
navLi.forEach( li => {
li.classList.remove('active');
if(li.classList.contains(current)){
li.classList.add('active')
}
})
})
</script>
</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
The top Google result is a CSS Tricks guide from 2011, which uses an obtrusive jQuery. Is this the best way to convert a menu to a drop down list in 2020? The site I'm working on is only HTML/CSS so far so I'd prefer to keep it that way (but I'm flexible).
Here's what I'm working with so far.
header {
width: 60%;
margin: 0 auto;
}
header #logo {
float: left;
}
header nav {
float: right;
}
header li {
float: left;
display: inline;
margin-left: 10px;
}
#media (max-width: 960px) {
{
/*TBC*/
}
}
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="./test-styles.css">
</head>
<body>
<header>
<div class="header-container">
<div id="logo">
<h2>MyCompany</h2>
</div>
<nav>
<ul>
<li>Services</li>
<li>Contact Us</li>
<li>Privacy</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I'd like for the nav bar to convert to a menu at less than 960px width (hence the media query).
Any help would be appreciated 😊
You can totally do it using pure HTML / CSS.
I personally like to use display: grid and the grid-area property to move elements from one column to the other, alongside display / hide.
<header>
<div id="nav-container" class="nav-transparent">
<nav>
<div class="navbar-column" id="left-menu">
<a class="nav-item" href="#">COMPANY</a>
</div>
<div class="navbar-column" id="right-menu">
<a class="nav-item" href="#">Services</a>
<a class="nav-item" href="#">Contact us</a>
<a class="nav-item" href="#">Privacy</a>
</div>
<div class="navbar-column" id="burger-menu-toggle-container">
<input type="checkbox" id="burger-menu-toggle">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
<div id="burger-menu">
<div id="burger-menu-content">
<div id="burger-menu-header">
</div>
<div id="burger-menu-body">
<div id="burger-menu-links">
<div class="burger-menu-link">
<a href="#">
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Services</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Contact us</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Privacy</a>
</div>
</div>
</div>
</div>
<div id="burger-menu-footer">
</div>
</div>
</div>
</nav>
</header>
If the current width of the viewport is > 960px, we only display the left-menu and right-menu elements in the form of a classic navbar. You notice that we have a third div which is the dropdown menu toggler, hidden when the width is > 960px.
When the width is < 960px, we hide right-menu and display burger-menu-toggle-container instead. We then move it to the left using the grid-area property. Of course you can chose to let it on the right side.
nav {
max-width: 1268px;
height: 100%;
display: grid;
grid-template-columns: auto 1fr ;
grid-template-areas: 'left right';
margin: 0 auto;
}
#burger-menu-toggle-container {
display: none;
transition: .4s;
padding: 6px;
}
#media screen and (max-width: 960px) {
#right-menu {
display: none;
}
#burger-menu-toggle-container {
display: block;
grid-area: left;
}
}
The dropdown menu toggler is actually a checkbox. Using the :checked selector and ~ we can display / hide the dropdown menu by setting its max-height from 0 to whatever value in px you need.
#burger-menu-toggle {
margin: 0;
display: block;
position: absolute;
width: 35px;
height: 27px;
opacity: 0;
outline: none;
-webkit-appearance: none;
border: none;
z-index: 100;
cursor: pointer;
}
#burger-menu {
transition: .4s;
position: absolute;
z-index: 1;
left: 0;
top: 80px;
width: 100%;
max-height: 0;
overflow: hidden;
}
#burger-menu-toggle:checked ~ #burger-menu {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
Attached is a working example.
html {
height: 100%;
background-color: black;
}
body {
overflow-x: hidden;
font-family: 'poiret one';
font-weight: 400;
font-size: 1.2em;
margin: 0;
min-height: 100%;
background-color: transparent;
display: grid;
grid-template-rows: auto 1fr ;
}
/* hide all scrollbars */
*::-webkit-scrollbar {
display: none;
}
a {
color: white;
text-decoration: none;
}
#nav-container {
font-weight: bold;
width: 100%;
max-height: 100px;
height: 100%;
position: fixed;
z-index: 2;
transition: .4s;
}
#nav-container a:hover {
color: rgba(253, 52, 131, .9);
}
nav {
max-width: 1268px;
height: 100%;
display: grid;
grid-template-columns: auto 1fr ;
grid-template-areas: 'left right';
margin: 0 auto;
}
.navbar-column {
margin: auto 0;
}
#left-menu {
padding: 12px 6px;
}
#right-menu {
text-align: right;
}
#burger-menu-toggle-container {
display: none;
transition: .4s;
padding: 6px;
}
#burger-menu-toggle-container:hover .bar {
background-color: rgba(253, 52, 131, .9);
}
#burger-menu-toggle {
margin: 0;
display: block;
position: absolute;
width: 35px;
height: 27px;
opacity: 0;
outline: none;
-webkit-appearance: none;
border: none;
z-index: 100;
cursor: pointer;
}
#bar1, #bar2, #bar3 {
width: 32px;
height: 4px;
background-color: rgba(225, 225, 225, 1);
border-radius: 6px;
margin: 6px 0;
transition: 0.5s;
}
#burger-menu-toggle:checked ~ #bar1 {
-webkit-transform: rotate(45deg) translate(-6px, 4px) ;
transform: rotate(45deg) translate(6px, 6px) ;
}
#burger-menu-toggle:checked ~ #bar2 {opacity: 0;}
#burger-menu-toggle:checked ~ #bar3 {
-webkit-transform: rotate(-45deg) translate(-8px, -8px) ;
transform: rotate(-45deg) translate(8px, -8px) ;
}
#burger-menu-toggle:checked ~ #burger-menu {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
#burger-menu {
transition: .4s;
position: absolute;
z-index: 1;
left: 0;
top: 80px;
width: 100%;
max-height: 0;
overflow: hidden;
}
#burger-menu-body {
border-radius: 2px;
display: grid;
position: relative;
margin: auto;
padding: 4px;
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
#burger-menu-links {
display: grid;
grid-template-rows: 1fr;
}
.burger-menu-link {
padding: 5px;
}
#media screen and (max-width: 960px) {
#right-menu {
display: none;
}
#burger-menu-toggle-container {
display: block;
grid-area: left;
}
}
.nav-item {
padding: 2px;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = .9,maximum-scale = .9" />
</head>
<body class="sm-section">
<header>
<header>
<div id="header">
<div id="nav-container" class="nav-transparent">
<nav>
<div class="navbar-column" id="left-menu">
<a class="nav-item" href="/">COMPANY</a>
</div>
<div class="navbar-column" id="right-menu">
<a class="nav-item" href="#">Services</a>
<a class="nav-item" href="#">Contact us</a>
<a class="nav-item" href="#">Privacy</a>
</div>
<div class="navbar-column" id="burger-menu-toggle-container">
<input type="checkbox" id="burger-menu-toggle">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
<div id="burger-menu">
<div id="burger-menu-content">
<div id="burger-menu-header">
</div>
<div id="burger-menu-body">
<div id="burger-menu-links">
<div class="burger-menu-link">
<a href="#">
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Services</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Contact us</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Privacy</a>
</div>
</div>
</div>
</div>
<div id="burger-menu-footer">
</div>
</div>
</div>
</nav>
</div>
</header>
<main>
</main>
</body>
<
One item will not respond out of three in my secondary navigation menu, held within the footer. The top and bottom links both work when I hover over them, but the middle does not seem to detect me mousing over the option for some reason.
HTML OF FOOTER & MENU ELEMENT:
<footer>
<ul class="social">
<li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
</li>
<li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
<li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
<i class="fab fa-behance"></i> </a> </li>
<li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
<img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
</a> </li>
</ul>
<div class="navi-title">
Navigation
</div>
<ul class="navi"> <li class="navi">
<a href="PLACEHOLDER">
Home
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Works
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Contact
</a>
</li>
</ul>
</footer>
CSS FOR FOOTER & MENU ELEMENT:
footer {
clear: both;
background-color: #2a7de1;
text-align: center;
padding: 2% 0% 1% 0%;
margin-top: 20%;
position: relative;
}
footer ul.social li.social {
list-style: none;
display: inline;
}
footer > ul.social li.social a {
text-align: center;
font-size: 2vw;
margin: 0% 3% 0% 3%;
overflow: hidden;
text-decoration: none;
}
footer > ul.social li.social a .fab {
color: white;
}
footer > ul.social li.social a:hover .fab {
transform: scale(1.3);
transition: 0.3s;
}
.upwork {
width: 2.2%;
}
.upwork:hover {
transform: scale(1.3);
transition: 0.3s;
}
footer > ul.navi li.navi {
list-style: none;
margin: 0% 0% 0% 75%;
text-align: left;
padding: 0.3%;
}
.navi-title {
color: white;
font-family: 'karla';
font-size: 1.4vw;
text-align:left;
margin: 0% 0% 0.5% 75%;
font-weight: 700;
}
footer > ul.navi li.navi a {
text-decoration: none;
color: white;
font-family: 'karla';
font-size: 1.2vw;
}
ul.social {
position: absolute;
margin-top: 3.8%;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}
Codepen
The element selector below is laying over top of the link. If you add a width:600px; to the element selector below, the hover for the link works. Of course it doesn't look great that way, but it's somewhere to start.
ul.social {
width: 600px;
position: absolute;
margin-top: 3.8%;
}
The issue is with your ul.social in the footer. I looked at it in the inspector.
You can see that it's overlapping the unreachable link, "Works".
As a test, I applied display: none to the ul and the "Works" link was once again clickable. My advice would be to restructure the footer using flexbox, taking care not to use any absolute positioning and overlapping.
Hello I have manually made a toggle navigation button that kicks in at 980px on my project. It works fine, it displays the navigation.
However, when I try to slideToggle the menu to make it show in a more elegant way, the direction of the height growht is from bottom to top.
I have attached a video with the behaviour. Here it is: https://www.screencast.com/t/wAkkHiRP5h
A jsFiddle with the functionality can be found here: https://jsfiddle.net/grimhilt/7x49x6sk/
The HTML is:
<nav id="main-navigation" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="#navbar-brand-centered" class="main-nav-trigger">
<span>
<em aria-hidden="true"></em>
</span>
</a>
<div id="logo" class="navbar-brand navbar-brand-centered">
<a href="/">
<img src="assets/img/logo.png" alt="logo" class="img-responsive">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar-brand-centered">
<ul class="nav navbar navbar-nav navbar-left">
<li>ALbums</li>
<li>Boxes</li>
<li>DVD Cases</li>
<li>Shop</li>
</ul>
<ul class="nav navbar navbar-nav navbar-right">
<li>About us</li>
<li>Journal</li>
<li>Contact</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
The CSS:
#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
#main-navigation #navbar-brand-centered {
position: absolute;
background-color: #9e865f;
z-index: 2;
top: 100px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
border: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
The jQuery is:
var mainHeader = $('#main-navigation');
mainHeader.on('click', '.main-nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
mainHeader.toggleClass('nav-open');
$( "#navbar-brand-centered" ).slideToggle( "slow" );
});
How can I make the #navbar-brand-centered height animate from top to bottom as it should? Thanks a bunch!
Just remove these lines:
mainHeader.toggleClass('nav-open');
$('#navbar-brand-centered').toggleClass('is-visible');
and add display:none to the main-navigation id
var mainHeader = $('#main-navigation');
mainHeader.on('click', '.main-nav-trigger', function(event) {
// open primary navigation on mobile
event.preventDefault();
// mainHeader.toggleClass('nav-open');
// $('#navbar-brand-centered').toggleClass('is-visible');
$("#navbar-brand-centered").slideToggle("slow")
});
#main-header {
position: absolute;
min-height: 100px;
z-index: 10;
top: 0;
left: 0;
width: 100%;
display: table;
}
#main-navigation {
display: none;
display: table-cell;
vertical-align: middle;
padding: 45px 0;
margin-bottom: 0;
background-color: #151725;
border: none !important;
}
#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered ul:target {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
#main-navigation #navbar-brand-centered {
position: absolute;
background-color: #9e865f;
z-index: 2;
top: 100px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
border: none;
/*-webkit-backface-visibility: hidden;*/
/*backface-visibility: hidden;*/
}
#main-navigation.nav-open #navbar-brand-centered {
display: block;
}
#main-navigation .main-nav-trigger {
float: right;
display: inline-block;
height: 100%;
text-transform: uppercase;
right: 0;
}
#main-navigation .main-nav-trigger em,
#main-navigation .main-nav-trigger em::after,
#main-navigation .main-nav-trigger em::before {
/* this is the menu icon */
display: block;
position: relative;
height: 2px;
width: 22px;
background-color: #9e865f;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main-header">
<nav id="main-navigation" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="#navbar-brand-centered" class="main-nav-trigger">
<span>
<em aria-hidden="true"></em>
</span>
</a>
<div id="logo" class="navbar-brand navbar-brand-centered">
<a href="/">
<img src="assets/img/logo.png" alt="logo" class="img-responsive">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar-brand-centered">
<ul class="nav navbar navbar-nav navbar-left">
<li>ALbums</li>
<li>Boxes</li>
<li>DVD Cases</li>
<li>Shop</li>
</ul>
<ul class="nav navbar navbar-nav navbar-right">
<li>About us</li>
<li>Journal</li>
<li>Contact</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
Ok so i think the key here is understanding what the .slideToggle() does.
It will toggle between display:block; when shown and display:none; when hidden. It does this with a sliding animate on the height of the element.
In your code you are also messing with the display properties:
$('#navbar-brand-centered').toggleClass('is-visible');
mainHeader.toggleClass('nav-open');
So your adding display:block; then the jQuery fucntion is turning toggling it.
So if you remove this, it works. see eaxmple:
var mainHeader = $('#main-navigation');
mainHeader.on('click', '.main-nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
//mainHeader.toggleClass('nav-open');
//$('#navbar-brand-centered').toggleClass('is-visible');
$( "#navbar-brand-centered" ).slideToggle( "slow" )
});
#main-header {
position: absolute;
min-height: 100px;
z-index: 10;
top: 0;
left: 0;
width: 100%;
display: table;
}
#main-navigation {
display: table-cell;
vertical-align: middle;
padding: 45px 0;
margin-bottom: 0;
background-color: #151725;
border: none !important;
}
#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered ul:target {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
#main-navigation #navbar-brand-centered {
position: absolute;
background-color: #9e865f;
z-index: 2;
top: 100px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
border: none;
/*-webkit-backface-visibility: hidden;*/
/*backface-visibility: hidden;*/
}
#main-navigation.nav-open #navbar-brand-centered {
//display: block;
}
#main-navigation .main-nav-trigger {
float: right;
display: inline-block;
height: 100%;
text-transform: uppercase;
right: 0;
}
#main-navigation .main-nav-trigger em,
#main-navigation .main-nav-trigger em::after,
#main-navigation .main-nav-trigger em::before {
/* this is the menu icon */
display: block;
position: relative;
height: 2px;
width: 22px;
background-color: #9e865f;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header id="main-header">
<nav id="main-navigation" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="#navbar-brand-centered" class="main-nav-trigger">
<span>
<em aria-hidden="true"></em>
</span>
</a>
<div id="logo" class="navbar-brand navbar-brand-centered">
<a href="/">
<img src="assets/img/logo.png" alt="logo" class="img-responsive">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar-brand-centered">
<ul class="nav navbar navbar-nav navbar-left">
<li>ALbums</li>
<li>Boxes</li>
<li>DVD Cases</li>
<li>Shop</li>
</ul>
<ul class="nav navbar navbar-nav navbar-right">
<li>About us</li>
<li>Journal</li>
<li>Contact</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>