We Keep Coding

Making menu disappear on click

So I have bootstrap menu that is one my one page site and its really good but it has one issue.
When on a mobile viewpoint and you click on the hamburger it launches the side panel, when a user clicks on a link (anchor link in my case to a section on the page) it will take you to the anchor but the side panel remains in position. I want it so that when the link is clicked the side panel disappears from view.
I have tried to look for solutions but to no success, I think it doesn't work because the solution depends on how the menu was made so if anyone can help me out here it would be greatly appreciated.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-xl-2">
<h1 class="mb-0 site-logo"><a href="index.html">Brand<span class="text-primary">.
</span> </a></h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<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>Home</li>
<li class="has-children">
About Us
<ul class="dropdown">
<li>Team</li>
<li>Pricing</li>
<li>FAQ</li>
<li>Gallery</li>
<li>Services</li>
<li>Testimonials</li>
<li class="has-children">
More Links
<ul class="dropdown">
<li>Menu One</li>
<li>Menu Two</li>
<li>Menu Three</li>
</ul>
</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
<li class="social"><a href="#contact-section" class="nav-link"><span
class="icon-
facebook"></span></a></li>
<li class="social"><a href="#contact-section" class="nav-link"><span
class="icon-
twitter"></span></a></li>
<li class="social"><a href="#contact-section" class="nav-link"><span
class="icon-linkedin"></span></a></li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-xl-none ml-md-0 py-3" style="position: relative; top:
`3px;"><a href="#" class="site-menu-toggle js-menu-toggle float-right"><span
class="icon-menu h3"></span></a></div>`
</div>
</div>
</header>
<div class="hero"></div>

How to fix SlickNav not initliazing

I have a website where I installed SlickNav. I have it calling properly, and the linking works properly, however it doesn't seem to want to initialize in the site itself. I'm calling it via the following:
<link rel="stylesheet" href="/wp-content/themes/mta360/dist/styles/slicknav.css" />
<script src="/wp-content/themes/mta360/dist/scripts/slicknav.js"></script>
The menu code is as follows:
<header>
<!-- Header Start -->
<div class="header-area">
<div class="main-header ">
<div class="header-top top-bg d-none d-lg-block">
<div class="container">
<div class="col-xl-12">
<div class="row d-flex justify-content-between align-items-center">
<div class="header-info-left">
<ul>
<li>1234567890</li>
<li>mta360seo#gmail.com</li>
</ul>
</div>
<div class="header-info-right">
<ul>
<li>Mon - Fri: 9:00 - 5:00</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header-bottom header-sticky">
<div class="container">
<div class="row align-items-center">
<!-- Logo -->
<div class="col-xl-2 col-lg-1 col-md-1">
<div class="logo">
<img src="/logo.png" alt="">
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-8">
<!-- Main-menu -->
<div class="main-menu f-right d-none d-lg-block">
<nav>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Heating</li>
<li>Cooling</li>
<li>Press
<ul class="submenu">
<li>Blog</li>
<li>Releases</li>
</ul>
</li>
<li>Company
<ul class="submenu">
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-3">
<!-- Header-btn -->
<div class="header-btn d-none d-lg-block">
Quote
</div>
</div>
<!-- Mobile Menu -->
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
Is there something I'm missing? It works for my local testing, but when I compile and try to use it on the actual site, it just doesn't want to initialize at all. Is there something I'm missing?
It's a wordpress site using Sage 9, in case that helps with the diagnosis.

You have to initialize it using Javascript code.
The 2 first libraries you are calling are the CSS slicknav library and the JS slicknav library. You also need to load jQuery for slicknav to work.
So add this to your code at the beginning:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
$(document).ready(function(){
$('#menu').slicknav({
// Label for menu button.
// Use an empty string for no label.
'label' : 'MENU',
// If true, the mobile menu is a copy of the original.
'duplicate': true,
// The duration of the sliding animation.
'duration': true,
// other parameters see here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html //
});
});
also you need to specify an ID "menu" to the <ul> element like this:
<ul id="menu">
<li>...</li>
</ul>
Finally, make sure your HTML markup follows the specified structure for slick nav which is:
<ul id="menu">
<li>Home
<ul>
<li>Blog</li>
<li>Plugins
<ul>
<li>Latest</li>
<li>Most Popular</li>
<li>Recommended</li>
</ul>
</li>
<li>Publishing</li>
</ul>
</li>
<li>Top <a href="#">Menu 2</a></li>
<li>Top Menu 3</li>
<li>Top Menu 4
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
more here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html

Menuzord Menu Link Issue

I am mainly a designer and write some HTML and CSS but am not that good at javascript which I am almost sure is causing the issue that I am having. I have a client that is working with a template that is using a Menuzord Menu. It is a one-page layout and they would like one of the links on the main nav to link to another website outside the current site. I coded the link to link out, but the link does not work. Any help would be appreciated.
This is the link to the site...http://raycomdigital.us/medplexmd/
Here is the code:
<header id="header" class="header">
<div class="header-nav navbar-fixed-top header-dark navbar-white navbar-transparent bg-transparent-1 navbar-sticky-animated animated-active">
<div class="header-nav-wrapper">
<div class="container">
<nav id="menuzord-right" class="menuzord orange no-bg"> <a class="menuzord-brand pull-left flip" href="javascript:void(0)"><img src="images/logo-wide.png" alt=""></a>
<ul class="menuzord-menu onepage-nav">
<li class="active">Home</li>
<li>Our Services</li>
<li>Questions</li>
<li>Forms</li>
<li>Contact</li>
<li>Portal</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
I need the "Portal" item to link out. Thanks in advance!

There is likely an event listener that is preventing the default click handler from triggering.
A quick fix for this is to add an onclick property which would take precedence over a listener that is attached to a parent element.
<header id="header" class="header">
<div class="header-nav navbar-fixed-top header-dark navbar-white navbar-transparent bg-transparent-1 navbar-sticky-animated animated-active">
<div class="header-nav-wrapper">
<div class="container">
<nav id="menuzord-right" class="menuzord orange no-bg"> <a class="menuzord-brand pull-left flip" href="javascript:void(0)"><img src="images/logo-wide.png" alt=""></a>
<ul class="menuzord-menu onepage-nav">
<li class="active">Home</li>
<li>Our Services</li>
<li>Questions</li>
<li>Forms</li>
<li>Contact</li>
<li><a id="portal" href="https://apps.medplexmdinjury.com/cases/" target="_blank">Portal</a></li>
<script type="text/javascript">
var portal = document.getElementById('portal');
portal.onclick = function() {
var win = window.open(portal.href, portal.target);
win = null;
}
</script>
</ul>
</nav>
</div>
</div>
</div>
</header>

Delete Node of HTML by JS

Trying to delete specific Node of HTML.
First HTML:
There many List in .widget-content want to delete all .list without First Li. Means keep first-child.
<div class="wrapper delete">
<div class="widget-content">
<ul>
<li class="lists">
Content
</li>
<li class="lists"> <!-- Delete this-->
Content
</li>
<li class="lists"> <!-- Delete this-->
Content
</li>
</ul>
</div>
</div>
Second HTML:
Want to delete ul of .widget-content ul if .wrapper has class delete. Condition need.
<div class="wrapper delete">
<div class="widget-content">
<ul> <!-- Delete This -->
<li class="lists">
Content
</li>
<li class="lists">
Content
</li>
<li class="lists">
Content
</li>
</ul>
</div>
</div>
How to do this by JS/jquery? Fiddle example would be helpful.

$(document).ready(function () {
$('.widget-content li').not(':first-child').remove();
if ($(".wrapper").hasClass('delete')) {
$('.widget-content ul').remove();
}
});

slice can be used to select elements with a start and end.
$('.widget-content li.lists').slice(1).remove();
$('.wrapper.delete ul').remove();

jQuery .show working but not .hide when using slideToggle

I am using jQuery for multiple toggling menus on my site. However, if I change it's initial loading from .show to .hide it will not work.
My js file is:
jQuery(document).ready(function($) {
$('div ul.menu').hide();
$('h2.trigger').click(function() {
$(this).toggleClass("active").next().slideToggle('slow');
return false;
});
});
And my html for my multiple menus is like so:
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>
Any ideas why this will not work?

Simply get rid of your extra div tag. Your next() is picking that instead of the ul.menu you are trying to target. Like so:
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>
You will also need to modify the following line
$('div ul.menu').hide();
to leave out the div
$('ul.menu').hide();
Note: the reason that this appears to work with .show() is that your div is shown by default so the fact that the .show() is being called on the wrong item goes unnoticed.