We Keep Coding

Responsive mobile navbar links wont work on mobile

I have an issue with the responsive sidebar nav links(anchor tags) won't click
Here is the part of the HTML code
<!-- Nav -->
<nav class="main-nav">
<img src="img/logo-dark-transparent.png" alt="AS Logo" class="logo">
<ul class="main-menu">
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
....
</nav>
The main CSS code for navbar is here
.main-nav{
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 20px 0;
z-index: 1;
/* font-size: 1.5em; */
font-size: clamp(.5rem, .8vw + 1rem, 1.5rem);
}
.main-nav .logo{
width: 110px;
}
.main-nav ul{
display: flex;
}
.main-nav .main-menu li{
padding: 0 2em;
}
.main-nav .main-menu li a{
padding-bottom: 2px;
}
.main-nav .main-menu li a:hover{
border-bottom: 2px solid var(--text-color);
}
The CSS code for side nav is
#media(max-width:700px){
.container{
overflow-x: hidden;
}
section{
height: auto;
}
/* Navbar */
.menu-btn{
display: block;
}
.menu-btn:hover{
opacity: 0.5;
}
.main-nav ul.main-menu{
display: block;
position: absolute;
top: 0;
left: 0;
background: var(--bg-color);
filter: brightness(0.85);
width: 60%;
height: 100%;
opacity: 0.9;
padding: 30px;
transform: translateX(-500px);
transition: transform 0.5s ease;
}
.main-nav ul.main-menu.show{
transform: translateX(-20px);
}
.main-nav ul.main-menu li{
padding: 20px;
}
.main-nav ul.main-menu li:first-child{
margin-top: 2rem;
}
.main-nav ul.right-menu{
margin-right: 60px;
}
But the show class is toggled dynamically by JS code below
//Toggle Menu
const mainMenu = document.querySelector('.main-menu');
document.querySelector('.menu-btn').addEventListener('click', () => {
mainMenu.classList.toggle('show');
})
Also, I wanted to achieve smooth scrolling which works on desktop version but doesn't in the mobile sidebar menu using this JS code snippet
//Vanilla JS Smooth Scroll
document.querySelectorAll('.main-menu a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
I have been debugging for hours with no success, any help or advice would be appreciated.

Maybe the id of div you want to scroll with do not match the link(href) addresses.You need to make sure this. Also, you can do a null check in the JavaScript code as follows.
document.querySelectorAll('.main-menu a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
var elmnt = document.querySelector(this.getAttribute('href'));
if(elmnt != null) {
elmnt.scrollIntoView({
behavior: 'smooth'
});
}
});
});

Add !important in your CSS code
.menu-btn { display: block !important; }

Making mobile nav bar

I was creating a responsive website so I decided to create the tablet and mobile version and wanted to be as usual many developers do when creating a small device nav bar(burger bar). So I can add class to html file using javascript but after that there is a problem that i'm stock an hour. Thanks
here you can see the code:
codepen
document.querySelector("button").addEventListener("click", show);
function show() {
let list = document.querySelector("ul");
if (list.className != "hidden") {
list.className = "bar";
} else if (list.className == "hidden") {
list.className -= "bar";
list.className = "hidden";
}
}
header button {
float: right;
margin: 25px 25px;
border: none;
cursor: pointer;
}
header button .fa-bars {
font-size: 25px;
background-color: white;
}
header img {
padding: 25px 75px;
}
header nav {
margin-top: 25px;
margin-left: 75px;
}
.bar li {
padding: 30px 0;
border-bottom: 1px #cecece solid;
width: 85%;
}
.hidden {
visibility: hidden;
}
<header>
<img src="images/logo-black.png" alt="NewsBit" />
<button type="button">hello</button>
<nav>
<ul>
<li>NEWS</li>
<li>GUIDS & ANALYTICS</li>
<li>EVENTS</li>
<li>EXPLAINED</li>
<li>ICON CALENDAR</li>
</ul>
</nav>
</header>

CSS
In mobile, ul should be hidden by default and when you click you need to show.
In large device, button should not be there.
JS
There is a out-of-box method toggle on classList to toggle the class. No need to check conditionally.
Hope it helps ☺☺
document.querySelector("button").addEventListener("click", show);
function show() {
let list = document.querySelector("ul");
list.classList.toggle("show");
}
header button {
float: right;
margin: 25px 25px;
border: none;
cursor: pointer;
}
header button .fa-bars {
font-size: 25px;
background-color: white;
}
header img {
padding: 25px 75px;
}
header nav {
margin-top: 25px;
margin-left: 75px;
}
.bar li {
padding: 30px 0;
border-bottom: 1px #cecece solid;
width: 85%;
}
ul {
display: none;
}
.show {
display: block;
}
#media only screen and (min-width: 992px) {
ul {
display: block;
}
button {
display: none;
}
}
<header>
<img src="images/logo-black.png" alt="NewsBit" />
<button type="button">
show/hide
</button>
<nav>
<ul>
<li>NEWS</li>
<li>GUIDS & ANALYTICS</li>
<li>EVENTS</li>
<li>EXPLAINED</li>
<li>ICON CALENDAR</li>
</ul>
</nav>
</header>

Why is my list not stacking on top of each other?

I have a fixed header menu bar at the top of the webpage. Each of the titles is a link but I want a dropdown for the first link. The link components for the dropdown menu is behaving strangely, see image:
I would like the link components to be stacked on top of each other, like a proper dropdown. Below is my code:
It looks correct when I run the code snippet but when I did these codings in Visual Studio, the codings below looks just like the image.
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks<i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>

<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
<div className="linkWrapper">
Quicklinks<i class="fa fa-angle-double-down"></i>
</div>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.linkWrapper a:first-child {
display:block;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}

remove the float for the submenu items adding
.navlist li div a {
float: none;
}
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist li div a {
float: none;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks<i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>

UPDATE
Your code snippet already set links to display: block and it works as expected, your issue seems to come from somewhere else, maybe css overrides elsewhere in your project ?
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
ORIGINAL ANSWER
You're using a tags which by default are displayed inline, you could add some styling to your a to display: block or use a list :
Quicklinks<i class="fa fa-angle-double-down"></i>
<ul>
<li>All Documents</li>
<li>Divisional Websites</li>
<li>About</li>
</ul>
You may want to make this list unstyled to avoid dots.
Also to behave like a proper dropdown, this list should be hidden on first render and you will trigger the visibility with another js function listening on click event on your "Quicklinks" link. Something like :
var button = document.getElementById("dropdownButton");
var menu = document.getElementById("dropdownMenu");
button.addEventListener("click", function(e) {
menu.classList.toggle("hidden");
});
.hidden {
display: none;
}
Quicklinks
<ul id="dropdownMenu" class="hidden">
<li>All Documents</li>
<li>Divisional Websites</li>
<li>About</li>
</ul>

this is because your css have :
.navlist li {
float: left;
}
just remove it and add to .navlist a
clear: both;
}
complete code :
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
/* just example */
.navlist div {
margin-left: 1em;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
/* adding : ( work with -- float: left -- allready present in -- .navbar a -- */
clear: both;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks <i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>

Center dropdown on Megamenu

i have a little problem in my hands, i've got one Megamenu, that works on mobile and desktop, i want to have the content of the menu center aligned, but i can only align left or right.
i can align center with
> ul {
display: flex; //it was none
justify-content: center;
align-self: center;
...
}
but then the hover is always enable and the mobile version have all the menus opened.. it i close each one of them , then the menu work as expected..
the menu i started with was this one fiddle:
Fiddle of actual code with
display: flex;
justify-content: space-between;
working as expected but the menus are all opened..
FIDDLE: https://codepen.io/anon/pen/JpBrRp
my code:
<div class="menu-container">
<div class="menu">
<nav class="navbar-toggleable-md">
<div id="toggle" class="navbar-toggler"><a></a>
</div>
</nav>
<ul id="my_styles" class="rowcenter" >
<li>
<ul>
<li>
menu
<ul>
<li><a href=...</a>x</li>
<li><a href=..</a>z</li>
</ul>
</li>
</ul>
</li>
The .css:
.menu-container {
width: 100%;
margin: 0 auto;
}
.menu {
> ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
//position: relative;
/* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
> li {
float: left;
padding: 0px;
margin: 0px;
a {
text-decoration: none;
padding: 1.5em 2.1em;
display: block;
}
&:hover {
}
> ul {
display: none;
justify-content: center;
align-self: center;
width: 100%;
background: #3a3f48;
padding: 20px;
position: absolute;
z-index: 1001;
left: 0;
margin: 0;
list-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
> li {
margin: 0;
padding-bottom: 0;
list-style: none;
width: 25%;
background: none;
float: left;
a {
color: #ffffff;
padding: .2em 0;
width: 95%;
display: block;
border-bottom: 1px solid #ccc;
}
> ul {
display: block;
padding: 0;
margin: 10px 0 0;
list-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
> li {
float: left;
width: 100%;
padding: 10px 0;
margin: 0;
font-size: .8em;
a {
border: 0;
}
}
}
}
&.normal-sub {
width: 300px;
left: auto;
padding: 10px 20px;
> li {
width: 100%;
a {
border: 0;
padding: 1em 0;
}
}
}
}
}
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media only screen and (max-width: 959px) {
.menu-container {
width: 100%;
}
.menu-mobile {
display: block;
}
.menu-dropdown-icon {
&:before {
//display: block;
}
}
.menu {
> ul {
display: none;
> li {
width: 100%;
float: none;
display: block;
a {
padding: 1.5em;
display: block;
}
> ul {
position: relative;
&.normal-sub {
width: 100%;
}
> li {
float: none;
width: 100%;
margin-top: 20px;
&:first-child {
margin: 0;
}
> ul {
position: relative;
> li {
float: none;
}
}
}
}
}
}
.show-on-mobile {
display: block;
}
}
}
the JS:
/* global $ - Mega menu ***********/
$(document).ready(function() {
"use strict";
$('.menu > ul > li:has(ul)').addClass('menu-dropdown-icon');
//Checks if li has sub (ul) and adds class for toggle icon - just an UI
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
//Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
$(".menu > nav > div > a").before("<img width='34px' height='34px' src=\"/assets/images/Menu_icons/hmb.png\">");
//Adds menu-mobile class (for mobile toggle menu) before the normal menu
//Mobile menu is hidden if width is more then 959px, but normal menu is displayed
//Normal menu is hidden if width is below 959px, and jquery adds mobile menu
//Done this way so it can be used with wordpress without any trouble
$(".menu > ul > li").hover(function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
//If width is more than 943px dropdowns are displayed on hover
$(".menu > ul > li").click(function() {
if ($(window).width() <= 943) {
$(this).children("ul").fadeToggle(150);
}
});
//If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
$(".menu-mobile").click(function(e) {
$(".menu > ul").toggleClass('show-on-mobile');
e.preventDefault();
});
//when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
});

Try display flex and justify for the main ul:
display: flex;
justify-content: space-between;

Fiddle of actual code with:
display: flex;
justify-content: space-between;
working as expected but the menus are all opened..
FIDDLE: https://codepen.io/anon/pen/JpBrRp

I got the answer, i think that's not the correct one, but it works..
on .css i've created a class called center:
.center{
display: flex !important;
}
then on .JS i created a function that open the submenu ('ul') and toogleclass to override with class center:
$(".menu > ul > li").click(function(e) {
if ($(window).width() > 943) {
$(this).children('ul').fadeToggle(15);
$(this).children('ul').toggleClass('center');
e.preventDefault();
}
});
However i have a little problem: when opened a submenu (clicking on one item of main menu) i want that submenu to vanish when i click anywhere on the document body, if i click on that submenu ('ul'), or one particular item on submenu it works like i want, but if i click on other menu item the previous submenu keeps opened, creating layers of submenus that i have to click on to make them vanish (or click on the main menus item that make them appear) im not sure i am clear..
here's a Fiddle https://codepen.io/anon/pen/JpBrRp

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>​