Making menu disappear on click - javascript

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>

Related

Navbar dropdown moving to extreme left after putting $('#header').load('header.html') script

My navbar dropdown is moving towards the extreme left and also not opening properly after adding this script, when i remove the script and run it like a normal static html page it is running completely fine, Please help if you can, it would save me a lot of time in this
$(function() {
$('#header').load('header.html');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>
</script>
HERE IS HTML OF MY NAVBAR
<header class="header-area">
<div class="main-header-area">
<div class="classy-nav-container breakpoint-off">
<div class="container">
<!-- Classy Menu -->
<nav class="classy-navbar justify-content-between" id="robertoNav">
<!-- Logo -->
<a class="nav-brand" href="#"><img src="./img/core-img/logo.png" alt=""></a>
<!-- Navbar Toggler -->
<div class="classy-navbar-toggler">
<span class="navbarToggler"><span></span><span></span><span></span></span>
</div>
<!-- Menu -->
<div class="classy-menu">
<!-- Menu Close Button -->
<div class="classycloseIcon">
<div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
</div>
<!-- Nav Start -->
<div class="classynav">
<ul id="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Products
<ul class="dropdown">
<li>Item
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>-Double Width Tower
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Item</li>
<li>Item
<ul class="dropdown">
<li>dropdow</li>
<li>dropdown</li>
<li>dropdown</li>
</ul>
</li>
<li>-other accessories
<ul class="dropdown">
<li>dropdown</li>
</ul>
</li>
</ul>
</li>
<li>Ladders
<ul class="dropdown">
<li>dropdown</li>
<li>dropdown</li>
<li>dropdown</li>
</ul>
</li>
<li>Accessories
<ul class="dropdown">
<li>- dropdown</li>
<li>- dropdown Item</li>
<li>- dropdown</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<!-- Nav End -->
</div>
</nav>
</div>
</div>
</div>
</header>

Change font color on scroll for nav items

I want to change my nav elements from white to gray but I get the error
cannot set property 'color' of undefined.
I have some javascript that pushes the nav up so it's hidden on a down scroll, but I need the color of the elements to change from white to gray.
window.addEventListener("scroll",function() {
var el = $('#landingImage');
var heroBottom = el.position().top + el.outerHeight(true);
if(window.scrollY > heroBottom - 3) {
$('.item').style.color='white';
}
else {
$('.item').style.color='#7d7d7d';
}
},false);
This is HTML
<div id="landingImage">
<nav id="nav">
<ul class="menu">
<li class="logo"><img src="logo.png" height="100px"></li>
<li class="item">
Services <i class="arrow down"></i>
<ul>
<li>App Development</li>
<li>Web Design</li>
<li>UX Design</li>
</ul>
</li>
<li class="item">
Portfolio
</li>
<li class="item">
About
</li>
<li class="item button">
Contact
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
<div class="header">
<h1>We design</h1>
<p>You succeed. </p>
<button type="button">Get a quote</button>
</div>
</div>
You are currently changing the text color of the .item element, which does not affect the color of the a tag inside it. Instead, you should target specifically the a tag inside the .item:
window.addEventListener("scroll", function() {
var el = $('#landingImage');
var heroBottom = el.position().top + el.outerHeight(true);
if(window.scrollY > heroBottom - 3) {
$('.item a').css("color", "white")
}
else {
$('.item a').css("color", "#7d7d7d")
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="landingImage">
<nav id="nav">
<ul class="menu">
<li class="logo"><img src="logo.png" height="100px"></li>
<li class="item">
Services <i class="arrow down"></i>
<ul>
<li>App Development</li>
<li>Web Design</li>
<li>UX Design</li>
</ul>
</li>
<li class="item">
Portfolio
</li>
<li class="item">
About
</li>
<li class="item button">
Contact
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
<div class="header">
<h1>We design</h1>
<p>You succeed. </p>
<button type="button">Get a quote</button>
</div>
</div>
<div style="margin-top: 500px;"></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

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 to automatically show/hide elements with bootstrap nav list

I have a nav list with bootstrap for a mobile site and i can collapse and expand sections if i click the icon twice but when i click on a button the correct section collapses but when i click on a second button both sections stay open. I want the first one to close when i click on the second button.
Here is an example http://jsfiddle.net/MgcDU/2219/ .
<div class="navbar navbar-fixed-top visible-phone" style="margin-bottom: 0px;">
<div class="navbar-inner">
<div >
<ul class="nav ">
<li class="">
<i class="icon-filter"></i>
</li>
<li class="">
<i class="icon-plus"></i>
</li>
</ul>
</div>
<div class="nav-collapse nav-collapse-filter collapse">
<ul class="nav">
<li class="divider"></li>
<li class="nav-header">Filter By</li>
<li class="">Filter1</li>
<li class="">Filter2</li>
<li class="">Filter3</li>
<li class="">Filter4</li>
<li class="">Filter5</li>
<li class="">Filter6</li>
</ul>
</div>
<div class="nav-collapse nav-collapse-post collapse">
<ul class="nav">
<li class="divider"></li>
<li class="nav-header">Post something</li>
<li class="">Post1</li>
<li class="">Post2</li>
<li class="">Post3</li>
<li class="">Post4</li>
<li class="">Post5</li>
</ul>
</div>
Thanks.
You have to do some manual work I think to achieve that behaviour.
$("a[data-target='.nav-collapse-post']").click(function () {
$(".nav-collapse-filter").collapse("hide");
$(".nav-collapse-post").collapse('toggle');
});
$("a[data-target='.nav-collapse-filter']").click(function () {
$(".nav-collapse-post").collapse('hide');
$(".nav-collapse-filter").collapse("toggle");
});
And also remove the class collapse from nav-collapse-post and nav-collapse-filter if you don't want a strange behaviour on the first click.
Result: http://jsfiddle.net/ngHnh/

Categories