The elegant-admin template's mobile navigation toggle is missing

I recently downloaded an admin theme and added the CSS to my Django static files. However, after doing so, the mobile toggle feature disappeared. I double-checked all the CSS and JS links in the index template, and they are correctly linked to the paths, but the toggle is still not showing.

Below is the HTML and CSS code, can someone please assist me?

<nav class="navbar top-navbar navbar-expand-md navbar-dark">
                <!-- ============================================================== -->
                <!-- Logo -->
                <!-- ============================================================== -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html">
                        <b>
                            <img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
                            <img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
                        </b>
                        <span>
                            <img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
                            <img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span>
                    </a>
                </div>
                <div class="navbar-collapse">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item hidden-sm-up"> <a class="nav-link nav-toggler waves-effect waves-light"
                                href="javascript:void(0)"><i class="ti-menu"></i></a></li>
                        <li class="nav-item search-box"> <a class="nav-link waves-effect waves-dark"
                                href="javascript:void(0)"><i class="fa fa-search"></i></a>
                            <form class="app-search">
                                <input type="text" class="form-control" placeholder="Search &amp; enter"> <a
                                    class="srh-btn"><i class="fa fa-times"></i></a>
                            </form>
                        </li>
                    </ul>
                    <ul class="navbar-nav my-lg-0">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href=""
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img
                                    src="../assets/images/users/1.jpg" alt="user" class="img-circle" width="30"></a>
                        </li>
                    </ul>
                </div>
            </nav>

<aside class="left-sidebar">
    <div class="d-flex no-block nav-text-box align-items-center">
        <span><img src="../assets/images/logo-icon.png" alt="elegant admin template"></span>
        <a class="waves-effect waves-dark ml-auto hidden-sm-down" href="javascript:void(0)"><i
                class="ti-menu"></i></a>
        <a class="nav-toggler waves-effect waves-dark ml-auto hidden-sm-up" href="javascript:void(0)"><i
                class="ti-menu ti-close"></i></a>
    </div>

CSS

@import url(../../../assets/icons/font-awesome/css/font-awesome.min.css);
@ import url(../../../assets/icons/themify-icons/themify-icons.css);
@ import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600,700");

/* Theme Styles */
.skin-default-dark {
  /*Theme Colors*/ }
  .skin-default-dark .topbar {
    background: #fff; }
    .skin-default-dark .topbar .navbar-dark .navbar-nav .nav-link {
      color: #adb5bd; }

  ...

@media (min-width: 768px) {
    ... }

This issue is occurring in a Django project where all static files are stored in one folder. I have attempted various solutions but haven't been successful. It's frustrating that the downloaded files work fine in their original folders.

https://i.sstatic.net/yEYZM.png https://i.sstatic.net/1mYHd.png https://i.sstatic.net/3QHZq.png https://i.sstatic.net/0YsbS.png

Answer №1

In the CSS file, I found two instances of @impors:

@import url(../../../assets/icons/font-awesome/css/font-awesome.min.css);
@import url(../../../assets/icons/themify-icons/themify-icons.css);

To resolve this issue, I removed them from the CSS file and integrated them into the HTML like so:

<link href="{% static 'users/crm2/assets/icons/font-awesome/css/font-awesome.min.css' %} " rel="stylesheet">


 <link href="{% static 'users/crm2/assets/icons/themify-icons/themify-icons.css' %}" rel="stylesheet">

Problem solved!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery div enclosure technique

I am trying to wrap HTML around an existing div, here is what I have attempted: HTML: <input type="text" data-placeholder="username" /> It should look like this when rendered: <div class="placeholding-input"> <input type="text" data-pl ...

What are effective ways to design a dialogue or conversation with CSS styling?

Looking to create a design similar to this one, but unsure of the terminology: https://i.sstatic.net/4QRcw.png I am open to different approaches for the layout, but possibly something along these lines: https://codepen.io/nachocab/pen/LaBwzw .containe ...

What is the method for determining the number of arrays contained within a file?

I am working with a JavaScript file that looks like this: // main.js let array1 = ['first array']; let array2 = ['second array']; Currently, I have two arrays declared in my main.js file. Is there a method to determine the total ...

Effective management and structuring of ExpressJS routes

I recently made the switch from PHP to NodeJS and Express, and I must say, it has been quite a learning experience. Following online tutorials to build web apps with Express has been eye-opening. I decided to tackle a project using just JavaScript, but I ...

Obtain a value from a jQuery POST request

Is it possible to dynamically set the width of a table using a Javascript variable obtained from a jQuery post? $.post("get.php", {this: 'that'}, function(data){ var width = data // for example, '300' ? How can I utilize this variabl ...

The relationship between two distinct servers: Express.js and Node.js

Working with the Express.js framework and Node.js, I am trying to make a request to an MS SQL database on the server side. My goal is to retrieve data (in JSON or array format) from the server and send it to the client side. I'm unsure about how to ...

Exploring nested object values in React Js through iteration

I have been searching extensively for a solution to no avail. I have an object created from fetched data with the following structure: { id: string, title: string, price: { currency: string, amount: number, }, ...

Setting a value in a hidden field using a dropdown menu

I am encountering an issue while working with a form and making an ajax request. Everything seems to be going smoothly except for assigning the value of a dropdown to a hidden variable. The scenario is this: You choose a previously completed assignment, w ...

"Enhancing User Interactions with Hover Effects and Click Events

I am working on a project that involves 4 links that alter the position of 4 divs within a webpage. In order to change the color of the links when hovering over them, I have implemented the following jQuery script: $('a.menua').hover(functio ...

Error: An unexpected 'if' token was not caught

Encountering an error related to the question title while working with this code snippet: $LAB.queue(function setup() { FB.init({ appId: '00000000', status: true, cookie: true, xfbml: true, logging: &ap ...

Testing multiple regex patterns using jQuery

I am attempting to run multiple regex tests on an input field. Here is the script: $("#search-registration").keyup(function () { var input_data = $('#search-registration').val(); var regexTest = function() { this.withPrefix = /^ ...

Heading and paragraph text within the same row

I'm currently facing a challenge while working on the personal portfolio webpage project for freecodecamp. Everything looks good except for one issue. Although I have managed to center align my heading and paragraph text as intended, the paragraph te ...

I am facing an issue with my useFetch hook causing excessive re-renders

I'm currently working on abstracting my fetch function into a custom hook for my Expo React Native application. The goal is to enable the fetch function to handle POST requests. Initially, I attempted to utilize and modify the useHook() effect availab ...

The Parallax effect functions properly on web browsers, but fails to work on mobile devices

I recently incorporated a parallax effect into the image gallery section of my website. While everything seems to be functioning perfectly in standard desktop and responsive modes on various browsers, I have encountered an issue when attempting to view the ...

What is the reason behind the effectiveness of this prime number verifier?

Take a look at this code snippet that effectively checks whether a number is prime: var num = parseInt(prompt("Enter a number:")); var result = "Prime"; for (var i = 2; i < num; i++) { if (num % i === 0) { result = "Not Prime"; break; } } ...

Unable to save array in global variable using Ajax, constantly receiving undefined

I'm attempting to store an array obtained from an ajax call in a global variable so that I can access it later, but I keep encountering an undefined error. <script> var items = []; function add(value){ items.push(value); ...

Executing a function when a webpage loads in Javascript

I have created a responsive website using Twitter Bootstrap. On my site, I have a video displayed in a modal that automatically plays when a button is clicked. Instead of triggering the function with a button click, I want the function to be called when ...

The trio of Angular, jQuery, and Chrome extensions is a powerful

I'm currently working on developing a Chrome extension that can alter the content of a specific website. However, since I don't have access to the source code of the website, I need to make these modifications using JavaScript. The goal is to ma ...

Receiving an error message stating "The JSON value could not be converted to System.Int32" when attempting to post JSON data via AJAX to a Web API

I need to transfer information from my website to a WEB API that my partners are developing via AJAX. This WEB API is built on a .net Core 3.0 application, and the purpose is to register new users. However, I am encountering an issue with parsing the inpu ...

The image in drag and drop ghost preview is not appearing on Firefox

I want to show a ghost element instead of the default browser preview while dragging and dropping. However, in Firefox, the image inside the ghost element is not displayed during dragging. Oddly enough, if I drop it and then drag again, the image does appe ...