优雅管理模板移动导航切换未显示

问题描述

我下载了一个管理主题,将CSS放入Django静态变量后,移动切换不再显示。我遍历了所有CSS和js链接(在索引模板中),它们都链接到正确的路径,但未显示切换。

这是HTML和CSS,请提供帮助。

<nav class="navbar top-navbar navbar-expand-md navbar-dark">
                <!-- ============================================================== -->
                <!-- logo -->
                <!-- ============================================================== -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html">
                        <!-- logo icon --><b>
                            <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                            <!-- Dark logo icon -->
                            <img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
                            <!-- Light logo icon -->
                            <img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
                        </b>
                        <!--End logo icon -->
                        <!-- logo text --><span>
                            <!-- dark logo text -->
                            <img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
                            <!-- Light logo text -->
                            <img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span>
                    </a>
                </div>
                <!-- ============================================================== -->
                <!-- End logo -->
                <!-- ============================================================== -->
                <div class="navbar-collapse">
                    <!-- ============================================================== -->
                    <!-- toggle and nav items -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav mr-auto">
                        <!-- This is  -->
                        <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>
                        <!-- ============================================================== -->
                        <!-- Search -->
                        <!-- ============================================================== -->
                        <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">
                        <!-- ============================================================== -->
                        <!-- User profile and search -->
                        <!-- ============================================================== -->
                        <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>
                        <!-- ============================================================== -->
                        <!-- User profile and search -->
                        <!-- ============================================================== -->
                    </ul>
                </div>
            </nav>

<!-- Left Sidebar - style you can find in sidebar.scss  -->
<!-- ============================================================== -->
<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");
.skin-default-dark {
  /*Theme Colors*/ }
  .skin-default-dark .topbar {
    background: #fff; }
    .skin-default-dark .topbar .navbar-dark .navbar-nav .nav-link {
      color: #adb5bd; }
  .skin-default-dark .sidebar-nav ul li a.active,.skin-default-dark .sidebar-nav ul li a:hover {
    color: #009efb; }
    .skin-default-dark .sidebar-nav ul li a.active i,.skin-default-dark .sidebar-nav ul li a:hover i {
      color: #009efb; }
  .skin-default-dark .sidebar-nav > ul > li.active > a {
    color: #009efb; }
    .skin-default-dark .sidebar-nav > ul > li.active > a i {
      color: #009efb; }
  .skin-default-dark .page-titles .breadcrumb .breadcrumb-item.active {
    color: #009efb; }
  .skin-default-dark .topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
    display: inline-block;
    color: rgba(255,255,0.8); }
  .skin-default-dark .topbar .top-navbar .navbar-header .navbar-brand .light-logo {
    display: none; }
  .skin-default-dark .left-sidebar {
    background: #2b2f3a; }
    .skin-default-dark .left-sidebar .user-pro-body a.link {
      color: #8991a9; }
    .skin-default-dark .left-sidebar .nav-text-Box {
      border-color: transparent;
      background: rgba(0,0.3); }
    .skin-default-dark .left-sidebar .sidebar-nav > ul > li > a,.skin-default-dark .left-sidebar .sidebar-nav ul li a {
      color: #8991a9;
      -webkit-transition: 0.1s ease-in;
      -o-transition: 0.1s ease-in;
      transition: 0.1s ease-in; }
      .skin-default-dark .left-sidebar .sidebar-nav > ul > li > a i,.skin-default-dark .left-sidebar .sidebar-nav ul li a i {
        color: #7f879b; }
      .skin-default-dark .left-sidebar .sidebar-nav > ul > li > a:hover i,.skin-default-dark .left-sidebar .sidebar-nav > ul > li > a:hover,.skin-default-dark .left-sidebar .sidebar-nav ul li a:hover i,.skin-default-dark .left-sidebar .sidebar-nav ul li a:hover {
        color: #fff; }
      .skin-default-dark .left-sidebar .sidebar-nav > ul > li > a.active,.skin-default-dark .left-sidebar .sidebar-nav > ul > li > a.active i,.skin-default-dark .left-sidebar .sidebar-nav ul li a.active,.skin-default-dark .left-sidebar .sidebar-nav ul li a.active i {
        color: #fff; }
    .skin-default-dark .left-sidebar .sidebar-nav > ul > li.selected > a {
      color: #fff; }
      .skin-default-dark .left-sidebar .sidebar-nav > ul > li.selected > a i {
        color: #fff; }
    .skin-default-dark .left-sidebar .sidebar-nav ul li ul {
      background: rgba(0,0.2); }
  .skin-default-dark .ps > .ps__scrollbar-y-rail > .ps__scrollbar-y {
    background-color: rgba(255,0.2); }
  @media (min-width: 768px) {
    .skin-default-dark.mini-sidebar .sidebar-nav #sidebarnav > li > ul,.skin-default-dark.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
      background: #1f2023; } }

这是一个django项目,但是我所有的静态文件都放在一个文件夹中,但是看来我已经不在了,我尝试了很多事情!让我感到沮丧的是,原始文件夹中下载的文件运行良好。

enter image description here

enter image description here

enter image description here

enter image description here

解决方法

CSS文件中有两个@impors,它们是:

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

我只是从那里剪下来,然后像这样将它们放在html中:

<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">

就是这样!