如何保持侧边栏灵活?

我想要一个较窄的响应式侧边栏,我的侧边栏很宽,我尝试减小侧边栏的宽度以使其更窄,没有整页的问题,看起来不错,但是当我最小化页面时,它看起来像菜单宽度不是完整的菜单,无法填充上部。

你能在这里帮我吗?

这是html和css代码。

<?php
session_start();
?>
<aside id="left-panel" class="left-panel">

        <nav class="navbar navbar-expand-sm navbar-default">
            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fa fa-bars"></i>
                </button> 
                <a class="navbar-brand" href="dashboard.php" ><font size="3">VMS</font></a>               
            </div>

            <div id="main-menu" class="main-menu collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="dash.php?d=1"> <i class="menu-icon fa fa-user-plus"></i>Add Visitor </a>
                    </li>                   

                       <li class="active"><a href="dash.php?d=0"> <i class="menu-icon fa fa-user"></i>Edit Visitor</a></li>

<li class="active">
                        <a href="search.php"> <i class="menu-icon fa fa-search"></i>Search </a>
                    </li>
  <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-tasks"></i>Reports</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-file-o"></i><a href="bwdates-report-ds.php">Report1</a></li>
                            <li><i class="menu-icon fa fa-file-o"></i><a href="bwdates-report-ds.php">Report2</a></li>

                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
    </aside>

    <style>
.menutoggle {
    background: #6CC221;
}
@media (max-width: 1024px)
   aside.left-panel {
   padding: 0 20px;
   width: 150px;
}
.navbar .navbar-nav li > a {
     width: 110%;
}
@media (max-width: 1024px)
.navbar .navbar-nav li > a .menu-icon {
    width: 15px;
}
.navbar .navbar-nav li.active .menu-icon, .navbar .navbar-nav li:hover .toggle_nav_button:before, .navbar .navbar-nav li .toggle_nav_button.nav-open:before {
    color: #fff !important;
    width: 18px;
}
@media (max-width: 1024px)
.navbar .navbar-nav li > a .menu-icon {
    width: 15px;
}
@media (max-width: 1024px)
aside.left-panel {
    padding: 0 22px;
    width: 145px;
}
aside.left-panel {
    width: 155px;
}
.navbar .navbar-nav li > a .menu-icon {
    width: 18px;
}
.dropdown-menu {
    min-width: 5rem;
}
.navbar .navbar-nav li.menu-item-has-children .sub-menu {
    padding: 0 0 0 20px;
}
.navbar .navbar-nav li.menu-item-has-children .sub-menu a {
    padding: 2px 2px 2px 20px;
}
.dropdown-menu.show {
    display: inline-table;
}
    </style>

Full page Mini page

评论