How to fix SlickNav not initliazing

Question

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>[email protected]</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">
                            <a href="index.html"><img src="/logo.png" alt=""></a>
                        </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><a href="#">Home</a></li>
                                    <li><a href="#">About</a></li>
                                    <li><a href="#">Heating</a></li>
                                    <li><a href="#">Cooling</a></li>
                                    <li><a href="#">Press</a>
                                        <ul class="submenu">
                                            <li><a href="#">Blog</a></li>
                                            <li><a href="#">Releases</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Company</a>
                                        <ul class="submenu">
                                            <li><a href="#">Contact</a></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">
                            <a href="#" class="get-btn">Quote</a>
                        </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.

Answer 1

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><a href="#">Blog</a></li>
<li>Plugins
<ul>
<li><a href="#">Latest</a></li>
<li><a href="#">Most Popular</a></li>
<li><a href="#">Recommended</a></li>
</ul>
</li>
<li><a href="#">Publishing</a></li>
</ul>
</li>
<li><a href="#">Top <a href="#">Menu</a> 2</a></li>
<li>Top Menu 3</li>
<li>Top Menu 4
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</li>
</ul>

more here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html