We Keep Coding

Close burger menu after clicking on some link

I have some burger menu made with html and CSS with some links in it. That works fine. However, when I click on some link the menu won't close. I tried some JavaScript examples, but it didn't work.
I'm really bad at JavaScript and need help with this. The point is I need the menu closes when user click on any link. Thanks!
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<img class="logo" src="assets/logo_white.svg" />
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
<div class="social">
<ul>
<li>
<i class="fab fa-facebook-f"></i>
</li>
<li>
<i class="fab fa-twitter"></i>
</li>
<li>
<i class="fab fa-instagram"></i>
</li>
<li>
<i class="fab fa-linkedin-in"></i>
</li>
</ul>
</div>
</div>
</div>
</div>

So I assume you are having a single page application without page reloads. You could close your sidebar every time a user clicks any link. If you are using jQuery:
$(document).ready(function(){
$("a").click(function(){
$(".menu").hide();
});
});
Or if you would like to use vanilla JS:
var els = document.querySelectorAll('a');
for( var i=els.length; i--; ) {
els[i].addEventListener( 'click', function(){
// close your menu here
document.getElementById('menu').style.display = 'none';
);
}
If you are already using jQuery, stick with it. If not, go for the vanilla version.

Link from the menubar is not being clicked but perfectly working on pc as navbar

I copied this code from somewhere else and don't know what to link on it are as all option are being shown in menu bar but the only problem is link aren't opening.
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="mr-auto">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li class="active">
Home
</li>
<li class="has-children">
About Us
<ul class="dropdown">
<li>Our Teachers</li>
<li>Our School</li>
</ul>
</li>
<li>
Admissions
</li>
<li>
Courses
</li>
<li>
Contact
</li>
</ul>
</ul>
</nav>
</div>
<div class="ml-auto">
<div class="social-wrap">
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-linkedin"></span>
<a href="#" class="d-inline-block d-lg-none site-menu-toggle js-menu-toggle text-black"><span
class="icon-menu h3"></span></a>
</div>
</div>
</div>
</div>
</div>
</header>

Do you have the files with the name about.html, admissions.html, courses.html, contact.html?
Just make sure you have created the files within the same directory

How can I select elements having specific siblings?

How can I prevent anchor (<a>) tag from doing nothing if li has ul according to the following code:
<aside class="sidebar">
<div id="leftside-navigation" class="nano">
<ul class="nano-content">
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:void(0);">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
</a>
<ul>
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li>
<a href="index.html">
<span>Lifestyles</span>
</a>
</li>
<li>
<a href="index.html">
<span>Technology</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
I've tried to put javascript:void(0) - it works but I wanted to make it with if else statement or any other way.
I wanted to do that is:
if li.submenu has ul li.has-submenu a prevent default

You can write a selector for a that's a child of an li that has a submenu.
$("li:has(ul) > a").click(function(e) {
e.preventDefault();
});

Another approach would be to not include the <a> tag in general. Just write the the text "Categories" within the <li class="sub-menu> and it will display in menu as normal.
Example:
<li class="sub-menu">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
<ul>
<li>......
Although you would need to add CSS if you want the cursor to change or if you want the text to be underlined for your <span> etc...

You can also try this.
$("li").find("ul > a").click(function(e) {
e.preventDefault();
});

Jquery not recognize menu include

I have my index calls from other HTML pages using the library CSI.js
my index:
<div class="col-6 col-md-2" id="nav">
<div data-include="./views/menu/sticky-menu.html"></div> <!-- menu -->
</div>
in menu page:
<div class="sticky-menu" id="sticky-menu">
<div class="sticky-menu-header">
<img class="logo" src="./img/logo-branco.svg" />
</div>
<ul>
<li class="active"><i class="fa fa-home"></i>Home </li>
<li><i class="fa fa-glass"></i>Eventos </li>
<li><i class="fa fa-file-image-o"></i>Alertas <span class="sticky-menu-label">4 </span></li>
<li><i class="fa fa-cog"></i>Indicadores
<ul class="submenu">
<li>Teste</li>
<li>Teste </li>
<li>
Teste
<ul class="submenu">
<li>Teste </li>
</ul>
</li>
<li>Consulting </li>
</ul>
</li>
<li>
<i class="fa fa-suitcase"></i>Grafana
<ul class="submenu">
<li>Item 0 </li>
<li>Item 1 <span class="sticky-menu-label">10 </span></li>
</ul>
</li>
</ul>
</div>
submenu have dropdown animation with jquery:
jQuery(document).ready(function() {
jQuery("#sticky-menu").jqueryAccordionMenu();
});
On the menu page (sticky-menu.html) it works fine, like this:
https://i.stack.imgur.com/oAPds.png
Notice that the + sign appears when clicked:
https://i.stack.imgur.com/9OJIu.png
However, not index.html, menu (jquery) does not work:
https://i.stack.imgur.com/tvBRR.png
When I enter the code in the console:
jQuery(document).ready(function() {
jQuery("#sticky-menu").jqueryAccordionMenu();
});
it works: https://i.stack.imgur.com/YZe8y.png
I've included the js code on both pages, I think it's silly, but I really can not. Thank you for your help.
EDIT:
I noticed that my sticky-menu.html is wearing after the script. How to solve?
https://i.stack.imgur.com/j1Pzu.png
EDIT 2 :
I solved with requireJS.

You could run some code as follows
function waitForElement(id, callback){
var checkForElement = setInterval(function(){
if(document.getElementById(id)){
clearInterval(checkForElement);
callback();
}
}, 100);
}
waitForElement("idOfElementToWaitFor", function(){
alert("element is loaded.. do stuff");
});
Where your id for your element would be #sticky-menu and your callback function would be jQuery("#sticky-menu").jqueryAccordionMenu();

anchor wrapped li for Slide-out menu in wordpress

i'm trying to do something like this: http://cssdeck.com/labs/3fo47n21 in wordpress, but i'm having trouble to get the navigation to wrap menu li with anchor tags like this:
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>Accueil</li>
</a>
<a href="#" class="menu-link">
<li>Portfolio</li>
</a>
<a href="#" class="menu-link">
<li>Themes</li>
</a>
<a href="#" class="menu-link">
<li>Templates</li>
</a>
<a href="#" class="menu-link">
<li>Contact</li>
</a>
</ul>
</nav>
All i got is this in the header:
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav id="nav-main" class="menu clearfix" role="navigation">
<?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'menu-inner', 'items_wrap' => '<ul id="%1$s" class="%2$s"><a class="menu-link">%3$s</a></ul>'));
endif;
?>
</nav>
You guys are my last resort, any advice?

Does this help?
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<li>Accueil</li>
<li>Portfolio</li>
<li>Themes</li>
<li>Templates</li>
<li>Contact</li>
</ul>
</nav>
If you are going to use <a> elements in a <ul> element, you need to wrap in in an <li> element. You should actually wrap anything in a <ul> element with an <li> element.