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
Related
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>
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>
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
On initial page load, the tabs show but the content for that selected tab does not.
If I click the "Link" tab and back to the "Post" tab then it shows up.
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
On page load it looks like this (the div with the tab-pane class hasn't been displayed):
There are no errors in my console and the bootstrap JS file is loaded. There are some similar questions around but the solutions have not worked for me.
What do I need to add to get the tab pane to display when the page loads?
Check this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link active" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
The root cause of your problem was the fade class. Well done ! Removing it is the solution.
So I've got a navigation menu that is working properly in all browsers except Chrome. I'm thinking it may be down to the jquery but I'm not an expert by any means so kinda stumped here.
The HTML code is as follows
<div class="nav-container">
**<nav class="centered-logo top-bar">**
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<a href="index.html">
<img class="logo logo-dark" alt="Logo" src="Images/logotype_dark.png"/>
</div>
</div>
<div class="row nav-menu">
<div class="col-sm-12 columns text-center">
<ul class="menu">
<a></a>
<li>Home</li>
<li>About us</li>
<li>Process</li>
<li>Topic </li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="mobile-toggle" id="mobile-toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
<div class="bottom-border"></div>
</nav>
</div>
When the menu icon is clicked the bolded code above should add "open-nav" to it. However it's not working in Chrome.
The jquery is below
$('.mobile-toggle').click(function(){
$('nav').toggleClass('open-nav');
});
Any input would be greatly appreciated.