Responsive navigation menu toggle not working (JS) - javascript

I am trying to make my navigation menu responsive. I have made it so the navigation list items are hidden on mobile display and the menu tag appears ready to be clicked to show the menu but can't seem to get my list items to show on click when on mobile display. Any help please?
function toggleMenu() {
var menuBox = document.getElementById('nav-menu');
if(menuBox.style.display == "block") {
menuBox.style.display = "none";
}
else {
menuBox.style.display = "block";
}
}
header {
height: 128px;
border-bottom: 1px solid #f0f0f0;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4000;
background: white;
}
header .nav-container {
max-width: 100em;
margin: auto;
display: flex;
justify-content: space-between;
z-index: 45;
padding: 0 1.5rem;
}
header .nav-container .logo {
width: 14%;
padding-top: 2.8rem;
}
header .nav-container p {
display: none;
}
#media only screen and (max-width: 600px) {
header .nav-container p {
display: block;
}
}
header .nav-container nav {
padding-top: 2rem;
}
header .nav-container nav ul {
display: block;
}
#media only screen and (max-width: 600px) {
header .nav-container nav ul {
display: none;
}
}
header .nav-container nav ul li {
position: relative;
display: inline-block;
}
header .nav-container nav ul li a {
display: inline-block;
transition: all 0.5s linear;
text-decoration: none;
padding: 16px 10px;
color: #00458b;
}
header .nav-container nav ul li a:hover {
color: #00458b;
}
header .nav-container nav ul li ul {
display: none;
background: white;
position: absolute;
top: 100%;
width: 160px;
padding: 0;
z-index: 500;
}
header .nav-container nav ul li ul li,
header .nav-container nav ul li ul a {
width: 100%;
}
header .nav-container nav ul li:hover ul {
display: block;
}
header .nav-container nav ul .menu-item-40 a {
padding: 0;
}
<header>
<div class="nav-container">
<p id="menu" onclick="toggleMenu()"> Menu</p>
<nav class="nav" id="nav-menu" role="navigation">
<ul>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">Services
<ul class="sub-menu">
<li class="nav-item">Windows
</li>
<li class="nav-item">Glass
</li>
<li class="nav-item">Doors
</li>
<li class="nav-item">Roofline
</li>
</ul>
</li>
<li class="nav-item">Our Work
</li>
<li class="nav-item">Contact Us
</li>
</ul>
</nav>
</div>
</header>

Your mistake is in you css. Here
#media only screen and (max-width: 600px) {
header .nav-container nav ul {
display: none;
}
}
you have given display: none to the 'ul' but you toggling the nav with your javascript.
Tip: Try using toggle in javascript
element.classList.toggle('className');
here you can have class with display: block and can toggle without checking if the element is already having display block or not.

Related

Prevent sub-menu from moving down

I created a navbar using CSS and HTML. To that, I have added a sub-menu that opens when hovered over elements of "nav-list". I want the position of the sub-menu to be fixed since I want it to be one place irrespective of which element is hovered. The problem is I used sticky to fix the position of the navbar too. And when I scroll down while the submenu is open, it moves down too. How do I stop this?
<ul class="nav-list" >
<li>
Category
<ul class="sub-menu" id="sub-menu">
<li>shirts </li>
<li>Shorts</li>
</ul>
</li>
<li>
Ultra
<ul class="sub-menu">
<li>shirts </li>
<li>Shorts</li>
<li>Accessories</li>
<li>Shoes</li>
</ul>
</li>
</ul>
</nav>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
/*Code for Sticky*/
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .notice{
padding-top: 60px;
}
nav{
display: inline-flex;
width: 100%;
}
.nav-list{
display: flex;
width: 100%;
margin-top: .7rem; /*Use this to change the postition of dropdown*/
padding-left: 1.1rem; /*Use this to move the dropdown left and right*/
}
.nav-list li{
position: relative;
}
.nav-list > li > a{
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
transition:0.1s color 300ms;
}
.sub-menu {
display: flex;
position:fixed;
box-sizing: border-box;
background-color: black;
visibility:hidden;
top: 1.5rem; /*push up */
left: -2rem;
width: 82.5rem;
height: 35rem;
}
.sub-menu a{
position: relative;
top: 2rem;
color: white;
font-size: 1.1rem;
font-weight: 200;
padding: 3rem 40px 0 40px;
}
.sub-menu a:hover{
color: #7e7978;
}
.nav-list li:hover > .sub-menu {
visibility: visible;
opacity: 1;
}

Is there a way to make my navbar active and also keep hover effect?

Hi im wondering how i can make my navbar also active so when im on my secton page for about for example. I want the red line to be under About and so on. How do i accomplish that?
I have been struggeling to make it active but cant do it and its the last thing and then im 100% satisfied with my page... well atleast for now... please help me would love all the help i can get.
window.addEventListener('scroll', function(){
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
<!---Sticky navbar---->
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
display: inline-block;
margin: 0 15px;
color: white;
text-decoration: none;
}
header.sticky ul li a{
color: black;
}
header ul li a::after{
content:'';
width: 0;
height: 3px;
background: #ff004f;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
header ul li a:hover::after{
width: 100%;
}
<header>
MajorJammbaa
<div class="toggle" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a class="active" href="#home" onclick="toggleMenu();">Home</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<!--Front page image and text-------------------------------------------------------------------------------------------------------------------------------------------------->
<section class="landing-page" id="home">
You could create the function toggleMenu(element) which adds a class active to the given element and remembers it until the next call. When the function is called the next time it first checks if there is an active menu entry and deactivates it.
Consider the following code:
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
let elActiveAnchor = null;
function toggleMenu(elAnchor) {
elActiveAnchor?.classList.remove('active');
(elActiveAnchor = elAnchor).classList.add('active');
}
toggleMenu(document.getElementById("menu-home"));
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
display: inline-block;
margin: 0 15px;
color: gray;
text-decoration: none;
}
header.sticky ul li a {
color: black;
}
header ul li a::after {
content:'';
width: 0;
height: 3px;
background: #ff004f;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
header ul li a:hover::after,
/* This is the new selector for the "active" menu entry */
header ul li a.active::after {
width: 100%;
}
<header>
MajorJammbaa
<div class="toggle" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a id="menu-home" href="#home" onclick="toggleMenu(this)">Home</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<!-- Front page image and text -->
<section class="landing-page" id="home">

Navigation Menu Not Working on Big Cartel

I have a custom drop-down navigation menu that I want to use on my big cartel theme. It has HTML, CSS and Java Script.
Unfortunately, It is not working. The Java Script helps with the toggle event.
The drop-downs are on "Shop" and "About". When I click those dropdowns, they don't show.
In my Big Cartel Theme, I first tried linking to the JS file -- that didn't work.
I then put the script in the area and it still didn't work.
Here's the code working
https://codepen.io/findingcolors/pen/ZErZZgo
HTML
<div class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><i class="fa-solid fa-bars"></i> Menu</a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
Shop <i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
All Products
</li>
<li>
Stickers
</li>
<li>
Notepads + Sticky Notes
</li>
<li>
Bookmarks
</li>
<li>
Jewelry
</li>
<li>
Phone Straps
</li>
</ul>
</li>
<li>
About <i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
The Brand
</li>
<li>
Shipping + Returns
</li>
<li>
FAQ
</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Cart
</li>
<li>
Search
</li>
</ul>
</nav>
</div>
</div>
CSS
/* --- NAVIGATION bar --- */
.navigation {
height: 50px;
background: #fefcfc;
font-family: "Open Sans", sans-serif;
}
.nav-container {
text-align: center;
margin: 0 auto;
}
nav {
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 50px;
background: #fefcfc;
color: #716558;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
color: #90867a;
}
nav ul li ul li {
min-width: 250px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
text-align: left;
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #fefcfc;
height: 50px;
width: 50px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 50px 0 15px;
}
nav ul {
display: none;
text-align: left;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: inline-block;
}
}
#nav-toggle {
position: absolute;
left: -160px;
top: 10px;
cursor: pointer;
padding: 10px 35px 16px 0px;
color: #716558;
text-decoration: none;
font-size: 16px;
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
Java
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
The jQuery library was missing from the website.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
After including it, the navigation menu is working now.

Need to make sub menu full width of screen

Using css how I can make a sub-menu start from the left side of the screen instead of starting it from under the parent item.
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
<nav>
<ul>
<li>
Contacts
<ul>
<li>Add Contact</li>
<li>View Contacts</li>
</ul>
</li>
<li>
Tickets
<ul>
<li>New Ticket</li>
<li>View Tickets</li>
</ul>
</li>
<li>Invoices</li>
<li>Itemised Calls</li>
</ul>
</nav>
here is a jsfiddle: http://jsfiddle.net/jhmkqrye/1/ - hope it helps
When you hover on Tickets it's sub-menu starts from below the Ticket which I want to start below the Contacts from the start of screen width to end of screen width.
you can try to set the parent position for relative and child's to absolute and then set the position using left, right, bottom, top
for example left: 0; would put your child item on the very left
edit: is jsfiddle correct? 'cause i can't seem to find any sub-menu on hover, and on click it throws 404

Navigation/hamburger icon disappear when page link is clicked once

I'm designing a one-page scrolling website. When I click on a page link from the nav bar at screen widths less than 780px (when the hamburger icon appears), the hamburger icon disappears. I can't get it back unless I refresh the page. The nav bar also disappears at full screen width after clicking on a page link once. I would like to keep the hamburger icon and the top navigation in view at all times. The javascript I'm using to collapse the full-screen menu that shows up at 780px is causing this problem, but I need it, or the menu will not disappear when a link is clicked. Thank you to anyone who can help!
$(document).ready(function() {
$('a').click(function() {
$('#menu').slideToggle();
});
});
#media screen and (max-width: 780px) {
nav {
width: 100%;
margin: 0;
padding: 0;
position: relative;
left: 0;
display: block;
opacity: 1.0 !important;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
nav ul {
width: 100%;
margin: 0 auto;
padding: 0;
display: none;
float: none;
}
nav ul li {
font-size: 1.3em;
font-weight: normal;
line-height: 40px;
width: 100% !important;
margin: 0;
padding: 0;
}
nav ul li:nth-of-type(1) { margin-top: 20%; }
nav ul li:hover { background: #565758; }
nav ul li a {
color: white !important;
font-family: "Lato", sans-serif;
border-bottom: none !important;
display: inline-block;
}
nav ul li a.active-link {
color: white !important;
font-size: 1.3em;
}
nav ul li a:hover {
color: white;
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
margin: 0 !important;
padding: 1em !important;
text-align: right;
display: block;
float: right;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; }
}​
<header>
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div>
</header>​
You need to add the toggle to the checkbox as well. It is an jQuery function, that uses specific animations and styles.
$('#show-menu').click(function() {
$('#menu').slideToggle();
});
EDIT
I added a working example. I did not used the toggle here, for a better design. Now the menu also toggels with the click on the checkbox :-)
$(document).ready(function() {
$('a').click(function() {
$('#menu').slideToggle();
});
$('#show-menu').change(function() {
if(this.checked)
$('#menu').slideDown();
else
$('#menu').slideUp();
});
});
#media screen and (max-width: 780px) {
nav {
width: 100%;
margin: 0;
padding: 0;
position: relative;
left: 0;
display: block;
opacity: 1.0 !important;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
nav ul {
width: 100%;
margin: 0 auto;
padding: 0;
display: none;
float: none;
}
nav ul li {
font-size: 1.3em;
font-weight: normal;
line-height: 40px;
width: 100% !important;
margin: 0;
padding: 0;
}
nav ul li:nth-of-type(1) { margin-top: 20%; }
nav ul li:hover { background: #565758; }
nav ul li a {
color: white !important;
font-family: "Lato", sans-serif;
border-bottom: none !important;
display: inline-block;
}
nav ul li a.active-link {
color: white !important;
font-size: 1.3em;
}
nav ul li a:hover {
color: white;
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
margin: 0 !important;
padding: 1em !important;
text-align: right;
display: block;
float: right;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; }
}​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div>
</header>​

Categories