slicknav not displaying, but is recognized

Question

slicknav not displaying, but is recognized

1k Views Asked by The Man Band91 At 10 April 2025 at 18:50

I have been trying to incorporate a slicknav menu into my project for school, I'm not entirely new to coding and i believe my mistake is quite simple but after 3 hours of racking my brain i cant seem to find the solution to my problem, some help, insight or tips on how to fix it or perhaps improve my code would be greatly appreciated. (by the way i already have a functioning drop down menu for some things but I'd like to have a slicknav for mobile screens

html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shape up!</title>
<link rel="shortcut icon" href="images/favicon.ico">
<!--^^^TITLE LOGO^^^-->
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
<link href="styles/main_rwd.css" rel="stylesheet" type= "text/css">
<link href="styles/slicknav.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<script src="js/jquery.slicknav.min.js"></script>
<!--    <script href="js/jquery.slicknav.min.js"></script>-->
<script type="text/javascript">
<script>
   $(function(){
    $('#nav_menu').slicknav();
});
</script>
</head>
<header>
<img src="images/shape_up_logo.png" alt="Shape up logo">
<!--^^^SITE LOGO^^^--> 
<h1 id="logo"><a href="/index.html">Shape Up!</a></h1>
<h3>Find the best fit for you!</h3>
</header>

<body>
<main>
 <nav id="nav_menu">
     <ul>
         <li><a href="index.html" class="current">Home</a></li>
         <li><a href="strength/index.html">Strength Training</a>
             <ul>
                 <li></li>
             </ul>
         </li>
         <li><a href="cardio/index.html">Cardio Exercises</a></li>
         <li><a href="stress/index.html">Stress Relief</a>
            <ul>
                 <li><a href="stress/index.html">What is Stress?</a></li>
                 <li><a href="stress/tips.html">5 Helpful Tips</a></li>
                 <li><a href="stress/meditate.html">Meditation</a></li>
                 <li><a href="stress/vipassana.html">Vipassana</a></li>
             </ul>
         </li>
         <li><a href="diet/index.html">Healthy Diets</a>
             <ul>
                 <li><a href="diet/index.html">Why a Healthy Diet?</a></li>
                 <li><a href="diet/meals.html">Plan Your Meals</a></li>
                 <li><a href="diet/calories.html">Count Your Calories</a> 
                 </li>
                 <li><a href="diet/bmi.html">Calculate Your BMI</a></li>
             </ul>
         </li>
     </ul>
  </nav>

And the next portion is the css code regarding the slicknav

slicknav_menu {
display:none;
}

@media only screen and (max-width: 900px) {
body {
    box-shadow: none;
    font-size: 90%;
}
}
/*
TABLET SIZE^^^
.slicknav_menu {
display:none;
}
*/

@media only screen and (max-width: 767px) {

#nav_menu {
    display: none; 
}
.js .slicknav_menu {
    display: block;
}

}

I have commented some stuff out for trouble shooting reasons any help would be appreciated as i probably missed a simple thing anyway

Original Q&A

There are 2 best solutions below

The Man Band91 On 19 September 2018 at 02:39

I FINALLY DID IT! however I'm sorry to say i don't exactly know how i did it. I deleted some things here and there, i don't quite remember what i did exactly delete. though i will provide code for anybody that encounters a similar problem, i know have to work on getting it where i need it to be. Main script section:

   <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
   <script src="js/jquery.slicknav.min.js"></script>
        <script>
   $(function(){
   $(document).ready(function(){$(body).addClass('js')}) 
   $('#nav_menu').slicknav();
   });
   </script>

and the css file:

 .slicknav_menu {
 display:none;
 }

 @media only screen and (max-width: 900px) {
 body {
    box-shadow: none;
    font-size: 90%;
}
}



 @media only screen and (max-width: 767px) {

 #nav_menu {
    display: none; 
 }
 .slicknav_menu {
    display: block;
    position: inherit;
 }

 }

**Frish** · Accepted Answer

Your style rule:

.js .slicknav_menu {
    display: block;
}

Is looking for a class, .js that does not exist in your document. The typical use of the .js class is to dynamically add it to the <body> tag with javascript so you can manage your site differently for users with and without javascript enabled.

Try removing .js from your style rule, or dynamically add .js with something like $(document).ready(function(){$(body).addClass('js')})

slicknav not displaying, but is recognized

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in HTML

Related Questions in SLICKNAV

Trending Questions

Popular # Hahtags

Popular Questions