content logo

Bootstrap Sidebars:

Bootstrap Sidebar with Icons

Sidebars are useful features on a website that act as an additional navigation component with the ability to provide more support and a better and clearer method of navigating through website with a lot of different content. These websites have hundreds of pages, subpages and links and will be quite complex and may confuse your new visitors. Let’s be honest; the last thing you want to do is confuse or bore your visitors since they are possible future users.

In this post, we have a Bootstrap sidebar that you can use to ensure your website header is not getting cluttered. The more crowded your pages get, the more confusing and complex it will become for the users which we have already stated what issue it would lead to. But a simple sidebar won’t simply cut it if you want to improve your site by a good bit. For this sole reason, we have provided this code with a unique and intriguing feature. So, unlike other normal looking sidebars, our dark icon sidebar uses a proper icon instead of writing the actual title of each item. (the title could also be included).

Using icons instead of long titles will compress the width and overall size of your sidebars which will take up much less physical space as a result. By pressing the toggle (three lines) button on the top of the screen you can open or close this icon sidebar.

If you want a sidebar with icons to further improve your website, then this is definitely the right code for you. With our left icon sidebar, will make your website more professional.

#

Bootstrap Sidebar

#

Sidebar with Icons

#

Icon Sidebar

#

Left Icon Sidebar

#

Dark Icon Sidebar


<!-- This script got from frontendfreecode.com -->
<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-red  navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#menu-toggle" id="menu-toggle">
                    <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>  <span class="logo">Bootstrap Sidebar Version 1.0</span>
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#"><span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> CMS <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Pages</a>
                            </li>
                            <li>
                                <a href="#"><span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span> Posts</a>
                            </li>
                            <li>
                                <a href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Media</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Administrator <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Profile</a>
                            </li>
                            <li>
                                <a href="#"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Settings </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="bootstrap-sidebar" class="light-theme big-icon-menu">
        <ul class="sidebar-nav">
            <li class="active">
                <a href="#"><span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> <span class="menu-text">Home</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span> <span class="menu-text">Charts</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> <span class="menu-text">Reports</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> <span class="menu-text">Catalogue</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> <span class="menu-text">Inbox</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <span class="menu-text">Favourites</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> <span class="menu-text">Assets</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> <span class="menu-text">Tasks</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> <span class="menu-text">Localization</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> <span class="menu-text">Payments</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-education" aria-hidden="true"></span> <span class="menu-text">Training</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-scissors" aria-hidden="true"></span> <span class="menu-text">Customization</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> <span class="menu-text">Users</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> <span class="menu-text">Settings</span></a>
            </li>
        </ul>
    </div>
    <div id="main-page-content">
        <div class="container-fluid">
            <h1>Bootstrap Sidebar Version 1.0</h1>
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Features</div>
                        <div class="panel-body" id="feature-content">
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-check icon-big" aria-hidden="true"></span>
                                        <h3>Responsive</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-fullscreen icon-big" aria-hidden="true"></span>
                                        <h3>Full Screen Display</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-phone icon-big" aria-hidden="true"></span>
                                        <h3>Devices Compatible</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-tint icon-big" aria-hidden="true"></span>
                                        <h3>Light Weight CSS</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-thumbs-up icon-big" aria-hidden="true"></span>
                                        <h3>Free Support</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-knight icon-big" aria-hidden="true"></span>
                                        <h3>Vector Icons</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-console icon-big" aria-hidden="true"></span>
                                        <h3>Single Piece Code</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-object-align-vertical icon-big" aria-hidden="true"></span>
                                        <h3>Submenu</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-text-background icon-big" aria-hidden="true"></span>
                                        <h3>8 Themes</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    overflow-x: hidden;
    padding-top: 50px;
}
#feature-content .panel {
    border-radius: 10px;
    background: #202938;
    color: white;
    border: none;
}
#feature-content .panel:hover {
    background-color: #45536b;
    color: white;
}
/* Bootstrap sidebar Toggle */
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 50px;
}
/* Bootstrap sidebar styles */
#bootstrap-sidebar {
    z-index: 1000;
    position: fixed;
    left: 50px;
    width: 0;
    height: 100%;
    margin-left: -50px;
    overflow-y: auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled #bootstrap-sidebar {
    width: 20%;
}
#main-page-content {
    width: 100%;
    position: absolute;
    padding: 15px;
}
#wrapper.toggled #main-page-content {
    position: absolute;
    margin-right: -50px;
}
/* Bootstrap Sidebar Navigation Styles */
.sidebar-nav {
    position: absolute;
    top: 10px;
    min-width: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav li {
    text-indent: 10px;
    line-height: 10px;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.sidebar-nav li a {
    text-decoration: none;
    color: #FCFFF5;
}
.sidebar-nav li a:hover {
    text-decoration: none;
    opacity: 0.5;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}
.sidebar-nav li.active {
    background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a.active {
    background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li ul li a:hover {
    text-decoration: underline;
    background: transparent;
}
ul.collapse {
    padding-top: 5px;
}
ul.collapse li,
ul.collapsing li,
ul.in li {
    list-style: none;
    border: none;
    padding-top: 5px;
}
@media(min-width:768px) {
    /* you can adjust here for right main content spacing */
#wrapper {
    padding-left: 4%;
    /* for small icon menu  */
    padding-left: 6%;
    /* for big icon menu */
    padding-left: 10%;
    /* for text icon menu */
    position: relative;
}
#wrapper.toggled {
    padding-left: 0;
}
#bootstrap-sidebar.big-icon-menu {
    width: 100px;
}

#bootstrap-sidebar.icon-menu {
    width: 60px;
}
#bootstrap-sidebar.text-menu {
    width: 150px;
    font-size: 110%;
    padding: 5px;
}
#wrapper.toggled #bootstrap-sidebar {
    width: 0;
}
#main-page-content {
    padding: 20px;
    position: relative;
}
#wrapper.toggled #main-page-content {
    position: relative;
    margin-right: 0;
}
}
/* Menu Icon Sizes */
.big-icon-menu {
    font-size: 45px;
}
.big-icon-menu ul.sidebar-nav li a span.menu-text,
.icon-menu ul.sidebar-nav li a span.menu-text {
    display: none;
}
.icon-menu {
    font-size: 20px;
}
/* Themes */
/* Dark Theme */
.dark-theme {
    background: #202938;
}
/* Blue Theme */
.blue-theme {
    background: #3c578b;
}
/* Green Theme */
.green-theme {
    background: #13801A;
}
/* Red Theme */
.red-theme {
    background: #BF1A17;
}
/* Orange Theme */
.orange-theme {
    background: #E66012;
}
/* Purple Theme */
.purple-theme {
    background: #5C257F;
}
/* Bluegreen Theme */
.bluegreen-theme {
    background: #1F806B;
}
/* Light Theme */
.light-theme {
    background: #E5E8D5;
}
.light-theme ul.sidebar-nav li a {
    color: #202938;
}
.light-theme ul.sidebar-nav li.active a {
    color: #E5E8D5;
}
.light-theme ul.sidebar-nav li.active {
    background: #202938;
}
/* blue navigation bar */
.navbar-blue {
    background-color: #3c578b;
    border-color: #2f3133;
}
.navbar-blue .navbar-brand {
    color: #ecf0f1;
}
.navbar-blue .navbar-brand:hover,
.navbar-blue .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-blue .navbar-text {
    color: #ecf0f1;
}
.navbar-blue .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-blue .navbar-nav > li > a:hover,
.navbar-blue .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #2f3133;
}
.navbar-blue .navbar-nav > .active > a,
.navbar-blue .navbar-nav > .active > a:hover,
.navbar-blue .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #2f3133;
}
.navbar-blue .navbar-nav > .open > a,
.navbar-blue .navbar-nav > .open > a:hover,
.navbar-blue .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #2f3133;
}
.navbar-blue .navbar-toggle {
    border-color: #2f3133;
}
.navbar-blue .navbar-toggle:hover,
.navbar-blue .navbar-toggle:focus {
    background-color: #2f3133;
}
.navbar-blue .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-blue .navbar-collapse,
.navbar-blue .navbar-form {
    border-color: #ecf0f1;
}
.navbar-blue .navbar-link {
    color: #ecf0f1;
}
.navbar-blue .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-blue .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-blue .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-blue .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-blue .navbar-nav .open .dropdown-menu > .active > a,
.navbar-blue .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-blue .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #2f3133;
}
}
/* Green navigation bar */
.navbar-green {
    background-color: #13801a;
    border-color: #0eab13;
}
.navbar-green .navbar-brand {
    color: #ecf0f1;
}
.navbar-green .navbar-brand:hover,
.navbar-green .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-green .navbar-text {
    color: #ecf0f1;
}

.navbar-green .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-green .navbar-nav > li > a:hover,
.navbar-green .navbar-nav > li > a:focus {
    background-color: #0eab13;
    color: #ecdbff;
}
.navbar-green .navbar-nav > .active > a,
.navbar-green .navbar-nav > .active > a:hover,
.navbar-green .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #0eab13;
}
.navbar-green .navbar-nav > .open > a,
.navbar-green .navbar-nav > .open > a:hover,
.navbar-green .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #0eab13;
}
.navbar-green .navbar-toggle {
    border-color: #0eab13;
}
.navbar-green .navbar-toggle:hover,
.navbar-green .navbar-toggle:focus {
    background-color: #0eab13;
}
.navbar-green .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-green .navbar-collapse,
.navbar-green .navbar-form {
    border-color: #ecf0f1;
}
.navbar-green .navbar-link {
    color: #ecf0f1;
}
.navbar-green .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-green .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-green .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-green .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-green .navbar-nav .open .dropdown-menu > .active > a,
.navbar-green .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-green .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #0eab13;
}
}
/* Orange navigation bar */
.navbar-orange {
    background-color: #e66012;
    border-color: #b4480a;
}

.navbar-orange .navbar-brand {
    color: #ecf0f1;
}
.navbar-orange .navbar-brand:hover,
.navbar-orange .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-orange .navbar-text {
    color: #ecf0f1;
}
.navbar-orange .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-orange .navbar-nav > li > a:hover,
.navbar-orange .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #b4480a;
}
.navbar-orange .navbar-nav > .active > a,
.navbar-orange .navbar-nav > .active > a:hover,
.navbar-orange .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #b4480a;
}
.navbar-orange .navbar-nav > .open > a,
.navbar-orange .navbar-nav > .open > a:hover,
.navbar-orange .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #b4480a;
}
.navbar-orange .navbar-toggle {
    border-color: #b4480a;
}
.navbar-orange .navbar-toggle:hover,
.navbar-orange .navbar-toggle:focus {
    background-color: #b4480a;
}
.navbar-orange .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-orange .navbar-collapse,
.navbar-orange .navbar-form {
    border-color: #ecf0f1;
}
.navbar-orange .navbar-link {
    color: #ecf0f1;
}
.navbar-orange .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-orange .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-orange .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-orange .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-orange .navbar-nav .open .dropdown-menu > .active > a,
.navbar-orange .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-orange .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #b4480a;
}
}
/* Red navigation bar */
.navbar-red {
    background-color: #bf1a17;
    border-color: #db4441;
}
.navbar-red .navbar-brand {
    color: #ecf0f1;
}
.navbar-red .navbar-brand:hover,
.navbar-red .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-red .navbar-text {
    color: #ecf0f1;
}
.navbar-red .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-red .navbar-nav > li > a:hover,
.navbar-red .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #db4441;
}
.navbar-red .navbar-nav > .active > a,
.navbar-red .navbar-nav > .active > a:hover,
.navbar-red .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #db4441;
}
.navbar-red .navbar-nav > .open > a,
.navbar-red .navbar-nav > .open > a:hover,
.navbar-red .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #db4441;
}
.navbar-red .navbar-toggle {
    border-color: #db4441;
}
.navbar-red .navbar-toggle:hover,
.navbar-red .navbar-toggle:focus {
    background-color: #db4441;
}
.navbar-red .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-red .navbar-collapse,
.navbar-red .navbar-form {
    border-color: #ecf0f1;
}
.navbar-red .navbar-link {
    color: #ecf0f1;
}
.navbar-red .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-red .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-red .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-red .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-red .navbar-nav .open .dropdown-menu > .active > a,
.navbar-red .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-red .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #db4441;
}
}
/* Purple navigation bar */

.navbar-purple {
    background-color: #5c257f;
    border-color: #9254ba;
}

.navbar-purple .navbar-brand {
    color: #ecf0f1;
}
.navbar-purple .navbar-brand:hover,
.navbar-purple .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-purple .navbar-text {
    color: #ecf0f1;
}
.navbar-purple .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-purple .navbar-nav > li > a:hover,
.navbar-purple .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #9254ba;
}
.navbar-purple .navbar-nav > .active > a,
.navbar-purple .navbar-nav > .active > a:hover,
.navbar-purple .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #9254ba;
}
.navbar-purple .navbar-nav > .open > a,
.navbar-purple .navbar-nav > .open > a:hover,
.navbar-purple .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #9254ba;
}
.navbar-purple .navbar-toggle {
    border-color: #9254ba;
}
.navbar-purple .navbar-toggle:hover,
.navbar-purple .navbar-toggle:focus {
    background-color: #9254ba;
}
.navbar-purple .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-purple .navbar-collapse,
.navbar-purple .navbar-form {
    border-color: #ecf0f1;
}
.navbar-purple .navbar-link {
    color: #ecf0f1;
}
.navbar-purple .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-purple .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-purple .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-purple .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-purple .navbar-nav .open .dropdown-menu > .active > a,
.navbar-purple .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-purple .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #9254ba;
}
}
/* GreenBlue navigation bar */
.navbar-greenblue {
    background-color: #1f806b;
    border-color: #076d57;
}
.navbar-greenblue .navbar-brand {
    color: #ecf0f1;
}
    .navbar-greenblue .navbar-brand:hover,
    .navbar-greenblue .navbar-brand:focus {
        color: #ecdbff;
    }
.navbar-greenblue .navbar-text {
    color: #ecf0f1;
}
.navbar-greenblue .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-greenblue .navbar-nav > li > a:hover,
.navbar-greenblue .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #076d57;
}
.navbar-greenblue .navbar-nav > .active > a,
.navbar-greenblue .navbar-nav > .active > a:hover,
.navbar-greenblue .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #076d57;
}
.navbar-greenblue .navbar-nav > .open > a,
.navbar-greenblue .navbar-nav > .open > a:hover,
.navbar-greenblue .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #076d57;
}
.navbar-greenblue .navbar-toggle {
    border-color: #076d57;
}
.navbar-greenblue .navbar-toggle:hover,
.navbar-greenblue .navbar-toggle:focus {
    background-color: #076d57;
}
.navbar-greenblue .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-greenblue .navbar-collapse,
.navbar-greenblue .navbar-form {
    border-color: #ecf0f1;
}
.navbar-greenblue .navbar-link {
    color: #ecf0f1;
}
.navbar-greenblue .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-greenblue .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-greenblue .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-greenblue .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-greenblue .navbar-nav .open .dropdown-menu > .active > a,
.navbar-greenblue .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-greenblue .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #076d57;
}
}
.navbar-dark {
    background-color: #202938;
    border-color: #45536b;
}

.navbar-dark .navbar-brand {
    color: #ecf0f1;
}
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-dark .navbar-text {
    color: #ecf0f1;
}
.navbar-dark .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-dark .navbar-nav > li > a:hover,
.navbar-dark .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #45536b;
}
.navbar-dark .navbar-nav > .active > a,
.navbar-dark .navbar-nav > .active > a:hover,
.navbar-dark .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #45536b;
}
.navbar-dark .navbar-nav > .open > a,
.navbar-dark .navbar-nav > .open > a:hover,
.navbar-dark .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #45536b;
}
.navbar-dark .navbar-toggle {
    border-color: #45536b;
}
    .navbar-dark .navbar-toggle:hover,
.navbar-dark .navbar-toggle:focus {
    background-color: #45536b;
}
.navbar-dark .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-dark .navbar-collapse,
.navbar-dark .navbar-form {
    border-color: #ecf0f1;
}
.navbar-dark .navbar-link {
    color: #ecf0f1;
}
.navbar-dark .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-dark .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-dark .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-dark .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-dark .navbar-nav .open .dropdown-menu > .active > a,
.navbar-dark .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-dark .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #45536b;
}
}
/* Light navigation bar */
.navbar-light {
    background-color: #ffffff;
    border-color: #3c3f43;
}

.navbar-light .navbar-brand {
    color: #363b3c;
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
    color: #fdfdfd;
}
.navbar-light .navbar-text {
    color: #363b3c;
}
.navbar-light .navbar-nav > li > a {
    color: #363b3c;
}
.navbar-light .navbar-nav > li > a:hover,
.navbar-light .navbar-nav > li > a:focus {
    color: #fdfdfd;
    background-color: #3c3f43;
}
.navbar-light .navbar-nav > .active > a,
.navbar-light .navbar-nav > .active > a:hover,
.navbar-light .navbar-nav > .active > a:focus {
    color: #fdfdfd;
    background-color: #3c3f43;
}
.navbar-light .navbar-nav > .open > a,
.navbar-light .navbar-nav > .open > a:hover,
.navbar-light .navbar-nav > .open > a:focus {
    color: #fdfdfd;
    background-color: #3c3f43;
}
.navbar-light .navbar-toggle {
    border-color: #3c3f43;
}
.navbar-light .navbar-toggle:hover,
.navbar-light .navbar-toggle:focus {
    background-color: #3c3f43;
}
.navbar-light .navbar-toggle .icon-bar {
    background-color: #363b3c;
}
.navbar-light .navbar-collapse,
.navbar-light .navbar-form {
    border-color: #363b3c;
}
.navbar-light .navbar-link {
    color: #363b3c;
}
.navbar-light .navbar-link:hover {
    color: #fdfdfd;
}
@media (max-width: 767px) {
.navbar-light .navbar-nav .open .dropdown-menu > li > a {
    color: #363b3c;
}
.navbar-light .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-light .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fdfdfd;
}
.navbar-light .navbar-nav .open .dropdown-menu > .active > a,
.navbar-light .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-light .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fdfdfd;
    background-color: #3c3f43;
}
}
.icon-big {
    font-size: 40px;
}
$(document).ready(function () {
	if($(window).width() >= 768){
 	if($('#bootstrap-sidebar').hasClass('icon-menu')) {
		localStorage.setItem("default-padding", "60px");
      $('#wrapper').css('padding-left','60px');
      console.log('icon');
    }
   	else if($('#bootstrap-sidebar').hasClass('text-menu')) {
   		localStorage.setItem("default-padding", "150px");
      $('#wrapper').css('padding-left','150px');
      console.log('text');
    }
    else if($('#bootstrap-sidebar').hasClass('big-icon-menu')) {
    	localStorage.setItem("default-padding", "100px");
      $('#wrapper').css('padding-left','100px');
      console.log('big');
    }
    else{
    	$('#wrapper').css('padding-left','80px');	
    	localStorage.setItem("default-padding", "80px");
    	console.log('ntg');
        }
	}
});
$("#menu-toggle").click(function(e) {
        e.preventDefault();
        let default_padding=localStorage.getItem('default-padding'); 
        var origin_padding = $("#wrapper").css("padding-left");
        if(origin_padding=='0px'){      
        $('#wrapper').css('padding-left', default_padding);		
    	}
    	else{
    	$('#wrapper').css('padding-left','0px');
    	}
        $("#wrapper").toggleClass("toggled");
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
    overflow-x: hidden;
    padding-top: 50px;
}
#feature-content .panel {
    border-radius: 10px;
    background: #202938;
    color: white;
    border: none;
}
#feature-content .panel:hover {
    background-color: #45536b;
    color: white;
}
/* Bootstrap sidebar Toggle */
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 50px;
}
/* Bootstrap sidebar styles */
#bootstrap-sidebar {
    z-index: 1000;
    position: fixed;
    left: 50px;
    width: 0;
    height: 100%;
    margin-left: -50px;
    overflow-y: auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled #bootstrap-sidebar {
    width: 20%;
}
#main-page-content {
    width: 100%;
    position: absolute;
    padding: 15px;
}
#wrapper.toggled #main-page-content {
    position: absolute;
    margin-right: -50px;
}
/* Bootstrap Sidebar Navigation Styles */
.sidebar-nav {
    position: absolute;
    top: 10px;
    min-width: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav li {
    text-indent: 10px;
    line-height: 10px;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.sidebar-nav li a {
    text-decoration: none;
    color: #FCFFF5;
}
.sidebar-nav li a:hover {
    text-decoration: none;
    opacity: 0.5;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}
.sidebar-nav li.active {
    background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a.active {
    background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li ul li a:hover {
    text-decoration: underline;
    background: transparent;
}
ul.collapse {
    padding-top: 5px;
}
ul.collapse li,
ul.collapsing li,
ul.in li {
    list-style: none;
    border: none;
    padding-top: 5px;
}
@media(min-width:768px) {
    /* you can adjust here for right main content spacing */
#wrapper {
    padding-left: 4%;
    /* for small icon menu  */
    padding-left: 6%;
    /* for big icon menu */
    padding-left: 10%;
    /* for text icon menu */
    position: relative;
}
#wrapper.toggled {
    padding-left: 0;
}
#bootstrap-sidebar.big-icon-menu {
    width: 100px;
}

#bootstrap-sidebar.icon-menu {
    width: 60px;
}
#bootstrap-sidebar.text-menu {
    width: 150px;
    font-size: 110%;
    padding: 5px;
}
#wrapper.toggled #bootstrap-sidebar {
    width: 0;
}
#main-page-content {
    padding: 20px;
    position: relative;
}
#wrapper.toggled #main-page-content {
    position: relative;
    margin-right: 0;
}
}
/* Menu Icon Sizes */
.big-icon-menu {
    font-size: 45px;
}
.big-icon-menu ul.sidebar-nav li a span.menu-text,
.icon-menu ul.sidebar-nav li a span.menu-text {
    display: none;
}
.icon-menu {
    font-size: 20px;
}
/* Themes */
/* Dark Theme */
.dark-theme {
    background: #202938;
}
/* Blue Theme */
.blue-theme {
    background: #3c578b;
}
/* Green Theme */
.green-theme {
    background: #13801A;
}
/* Red Theme */
.red-theme {
    background: #BF1A17;
}
/* Orange Theme */
.orange-theme {
    background: #E66012;
}
/* Purple Theme */
.purple-theme {
    background: #5C257F;
}
/* Bluegreen Theme */
.bluegreen-theme {
    background: #1F806B;
}
/* Light Theme */
.light-theme {
    background: #E5E8D5;
}
.light-theme ul.sidebar-nav li a {
    color: #202938;
}
.light-theme ul.sidebar-nav li.active a {
    color: #E5E8D5;
}
.light-theme ul.sidebar-nav li.active {
    background: #202938;
}
/* blue navigation bar */
.navbar-blue {
    background-color: #3c578b;
    border-color: #2f3133;
}
.navbar-blue .navbar-brand {
    color: #ecf0f1;
}
.navbar-blue .navbar-brand:hover,
.navbar-blue .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-blue .navbar-text {
    color: #ecf0f1;
}
.navbar-blue .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-blue .navbar-nav > li > a:hover,
.navbar-blue .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #2f3133;
}
.navbar-blue .navbar-nav > .active > a,
.navbar-blue .navbar-nav > .active > a:hover,
.navbar-blue .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #2f3133;
}
.navbar-blue .navbar-nav > .open > a,
.navbar-blue .navbar-nav > .open > a:hover,
.navbar-blue .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #2f3133;
}
.navbar-blue .navbar-toggle {
    border-color: #2f3133;
}
.navbar-blue .navbar-toggle:hover,
.navbar-blue .navbar-toggle:focus {
    background-color: #2f3133;
}
.navbar-blue .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-blue .navbar-collapse,
.navbar-blue .navbar-form {
    border-color: #ecf0f1;
}
.navbar-blue .navbar-link {
    color: #ecf0f1;
}
.navbar-blue .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-blue .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-blue .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-blue .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-blue .navbar-nav .open .dropdown-menu > .active > a,
.navbar-blue .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-blue .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #2f3133;
}
}
/* Green navigation bar */
.navbar-green {
    background-color: #13801a;
    border-color: #0eab13;
}
.navbar-green .navbar-brand {
    color: #ecf0f1;
}
.navbar-green .navbar-brand:hover,
.navbar-green .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-green .navbar-text {
    color: #ecf0f1;
}

.navbar-green .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-green .navbar-nav > li > a:hover,
.navbar-green .navbar-nav > li > a:focus {
    background-color: #0eab13;
    color: #ecdbff;
}
.navbar-green .navbar-nav > .active > a,
.navbar-green .navbar-nav > .active > a:hover,
.navbar-green .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #0eab13;
}
.navbar-green .navbar-nav > .open > a,
.navbar-green .navbar-nav > .open > a:hover,
.navbar-green .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #0eab13;
}
.navbar-green .navbar-toggle {
    border-color: #0eab13;
}
.navbar-green .navbar-toggle:hover,
.navbar-green .navbar-toggle:focus {
    background-color: #0eab13;
}
.navbar-green .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-green .navbar-collapse,
.navbar-green .navbar-form {
    border-color: #ecf0f1;
}
.navbar-green .navbar-link {
    color: #ecf0f1;
}
.navbar-green .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-green .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-green .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-green .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-green .navbar-nav .open .dropdown-menu > .active > a,
.navbar-green .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-green .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #0eab13;
}
}
/* Orange navigation bar */
.navbar-orange {
    background-color: #e66012;
    border-color: #b4480a;
}

.navbar-orange .navbar-brand {
    color: #ecf0f1;
}
.navbar-orange .navbar-brand:hover,
.navbar-orange .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-orange .navbar-text {
    color: #ecf0f1;
}
.navbar-orange .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-orange .navbar-nav > li > a:hover,
.navbar-orange .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #b4480a;
}
.navbar-orange .navbar-nav > .active > a,
.navbar-orange .navbar-nav > .active > a:hover,
.navbar-orange .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #b4480a;
}
.navbar-orange .navbar-nav > .open > a,
.navbar-orange .navbar-nav > .open > a:hover,
.navbar-orange .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #b4480a;
}
.navbar-orange .navbar-toggle {
    border-color: #b4480a;
}
.navbar-orange .navbar-toggle:hover,
.navbar-orange .navbar-toggle:focus {
    background-color: #b4480a;
}
.navbar-orange .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-orange .navbar-collapse,
.navbar-orange .navbar-form {
    border-color: #ecf0f1;
}
.navbar-orange .navbar-link {
    color: #ecf0f1;
}
.navbar-orange .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-orange .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-orange .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-orange .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-orange .navbar-nav .open .dropdown-menu > .active > a,
.navbar-orange .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-orange .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #b4480a;
}
}
/* Red navigation bar */
.navbar-red {
    background-color: #bf1a17;
    border-color: #db4441;
}
.navbar-red .navbar-brand {
    color: #ecf0f1;
}
.navbar-red .navbar-brand:hover,
.navbar-red .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-red .navbar-text {
    color: #ecf0f1;
}
.navbar-red .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-red .navbar-nav > li > a:hover,
.navbar-red .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #db4441;
}
.navbar-red .navbar-nav > .active > a,
.navbar-red .navbar-nav > .active > a:hover,
.navbar-red .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #db4441;
}
.navbar-red .navbar-nav > .open > a,
.navbar-red .navbar-nav > .open > a:hover,
.navbar-red .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #db4441;
}
.navbar-red .navbar-toggle {
    border-color: #db4441;
}
.navbar-red .navbar-toggle:hover,
.navbar-red .navbar-toggle:focus {
    background-color: #db4441;
}
.navbar-red .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-red .navbar-collapse,
.navbar-red .navbar-form {
    border-color: #ecf0f1;
}
.navbar-red .navbar-link {
    color: #ecf0f1;
}
.navbar-red .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-red .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-red .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-red .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-red .navbar-nav .open .dropdown-menu > .active > a,
.navbar-red .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-red .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #db4441;
}
}
/* Purple navigation bar */

.navbar-purple {
    background-color: #5c257f;
    border-color: #9254ba;
}

.navbar-purple .navbar-brand {
    color: #ecf0f1;
}
.navbar-purple .navbar-brand:hover,
.navbar-purple .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-purple .navbar-text {
    color: #ecf0f1;
}
.navbar-purple .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-purple .navbar-nav > li > a:hover,
.navbar-purple .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #9254ba;
}
.navbar-purple .navbar-nav > .active > a,
.navbar-purple .navbar-nav > .active > a:hover,
.navbar-purple .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #9254ba;
}
.navbar-purple .navbar-nav > .open > a,
.navbar-purple .navbar-nav > .open > a:hover,
.navbar-purple .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #9254ba;
}
.navbar-purple .navbar-toggle {
    border-color: #9254ba;
}
.navbar-purple .navbar-toggle:hover,
.navbar-purple .navbar-toggle:focus {
    background-color: #9254ba;
}
.navbar-purple .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-purple .navbar-collapse,
.navbar-purple .navbar-form {
    border-color: #ecf0f1;
}
.navbar-purple .navbar-link {
    color: #ecf0f1;
}
.navbar-purple .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-purple .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-purple .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-purple .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-purple .navbar-nav .open .dropdown-menu > .active > a,
.navbar-purple .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-purple .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #9254ba;
}
}
/* GreenBlue navigation bar */
.navbar-greenblue {
    background-color: #1f806b;
    border-color: #076d57;
}
.navbar-greenblue .navbar-brand {
    color: #ecf0f1;
}
    .navbar-greenblue .navbar-brand:hover,
    .navbar-greenblue .navbar-brand:focus {
        color: #ecdbff;
    }
.navbar-greenblue .navbar-text {
    color: #ecf0f1;
}
.navbar-greenblue .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-greenblue .navbar-nav > li > a:hover,
.navbar-greenblue .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #076d57;
}
.navbar-greenblue .navbar-nav > .active > a,
.navbar-greenblue .navbar-nav > .active > a:hover,
.navbar-greenblue .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #076d57;
}
.navbar-greenblue .navbar-nav > .open > a,
.navbar-greenblue .navbar-nav > .open > a:hover,
.navbar-greenblue .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #076d57;
}
.navbar-greenblue .navbar-toggle {
    border-color: #076d57;
}
.navbar-greenblue .navbar-toggle:hover,
.navbar-greenblue .navbar-toggle:focus {
    background-color: #076d57;
}
.navbar-greenblue .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-greenblue .navbar-collapse,
.navbar-greenblue .navbar-form {
    border-color: #ecf0f1;
}
.navbar-greenblue .navbar-link {
    color: #ecf0f1;
}
.navbar-greenblue .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-greenblue .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-greenblue .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-greenblue .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-greenblue .navbar-nav .open .dropdown-menu > .active > a,
.navbar-greenblue .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-greenblue .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #076d57;
}
}
.navbar-dark {
    background-color: #202938;
    border-color: #45536b;
}

.navbar-dark .navbar-brand {
    color: #ecf0f1;
}
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: #ecdbff;
}
.navbar-dark .navbar-text {
    color: #ecf0f1;
}
.navbar-dark .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-dark .navbar-nav > li > a:hover,
.navbar-dark .navbar-nav > li > a:focus {
    color: #ecdbff;
    background-color: #45536b;
}
.navbar-dark .navbar-nav > .active > a,
.navbar-dark .navbar-nav > .active > a:hover,
.navbar-dark .navbar-nav > .active > a:focus {
    color: #ecdbff;
    background-color: #45536b;
}
.navbar-dark .navbar-nav > .open > a,
.navbar-dark .navbar-nav > .open > a:hover,
.navbar-dark .navbar-nav > .open > a:focus {
    color: #ecdbff;
    background-color: #45536b;
}
.navbar-dark .navbar-toggle {
    border-color: #45536b;
}
    .navbar-dark .navbar-toggle:hover,
.navbar-dark .navbar-toggle:focus {
    background-color: #45536b;
}
.navbar-dark .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-dark .navbar-collapse,
.navbar-dark .navbar-form {
    border-color: #ecf0f1;
}
.navbar-dark .navbar-link {
    color: #ecf0f1;
}
.navbar-dark .navbar-link:hover {
    color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-dark .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
}
.navbar-dark .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-dark .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
}
.navbar-dark .navbar-nav .open .dropdown-menu > .active > a,
.navbar-dark .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-dark .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #45536b;
}
}
/* Light navigation bar */
.navbar-light {
    background-color: #ffffff;
    border-color: #3c3f43;
}

.navbar-light .navbar-brand {
    color: #363b3c;
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
    color: #fdfdfd;
}
.navbar-light .navbar-text {
    color: #363b3c;
}
.navbar-light .navbar-nav > li > a {
    color: #363b3c;
}
.navbar-light .navbar-nav > li > a:hover,
.navbar-light .navbar-nav > li > a:focus {
    color: #fdfdfd;
    background-color: #3c3f43;
}
.navbar-light .navbar-nav > .active > a,
.navbar-light .navbar-nav > .active > a:hover,
.navbar-light .navbar-nav > .active > a:focus {
    color: #fdfdfd;
    background-color: #3c3f43;
}
.navbar-light .navbar-nav > .open > a,
.navbar-light .navbar-nav > .open > a:hover,
.navbar-light .navbar-nav > .open > a:focus {
    color: #fdfdfd;
    background-color: #3c3f43;
}
.navbar-light .navbar-toggle {
    border-color: #3c3f43;
}
.navbar-light .navbar-toggle:hover,
.navbar-light .navbar-toggle:focus {
    background-color: #3c3f43;
}
.navbar-light .navbar-toggle .icon-bar {
    background-color: #363b3c;
}
.navbar-light .navbar-collapse,
.navbar-light .navbar-form {
    border-color: #363b3c;
}
.navbar-light .navbar-link {
    color: #363b3c;
}
.navbar-light .navbar-link:hover {
    color: #fdfdfd;
}
@media (max-width: 767px) {
.navbar-light .navbar-nav .open .dropdown-menu > li > a {
    color: #363b3c;
}
.navbar-light .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-light .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fdfdfd;
}
.navbar-light .navbar-nav .open .dropdown-menu > .active > a,
.navbar-light .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-light .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fdfdfd;
    background-color: #3c3f43;
}
}
.icon-big {
    font-size: 40px;
}
</style>

</head>
<body>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-red  navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#menu-toggle" id="menu-toggle">
                    <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>  <span class="logo">Bootstrap Sidebar Version 1.0</span>
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#"><span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> CMS <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Pages</a>
                            </li>
                            <li>
                                <a href="#"><span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span> Posts</a>
                            </li>
                            <li>
                                <a href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Media</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Administrator <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Profile</a>
                            </li>
                            <li>
                                <a href="#"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Settings </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="bootstrap-sidebar" class="light-theme big-icon-menu">
        <ul class="sidebar-nav">
            <li class="active">
                <a href="#"><span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> <span class="menu-text">Home</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span> <span class="menu-text">Charts</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> <span class="menu-text">Reports</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> <span class="menu-text">Catalogue</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> <span class="menu-text">Inbox</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <span class="menu-text">Favourites</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> <span class="menu-text">Assets</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> <span class="menu-text">Tasks</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> <span class="menu-text">Localization</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> <span class="menu-text">Payments</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-education" aria-hidden="true"></span> <span class="menu-text">Training</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-scissors" aria-hidden="true"></span> <span class="menu-text">Customization</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> <span class="menu-text">Users</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> <span class="menu-text">Settings</span></a>
            </li>
        </ul>
    </div>
    <div id="main-page-content">
        <div class="container-fluid">
            <h1>Bootstrap Sidebar Version 1.0</h1>
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Features</div>
                        <div class="panel-body" id="feature-content">
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-check icon-big" aria-hidden="true"></span>
                                        <h3>Responsive</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-fullscreen icon-big" aria-hidden="true"></span>
                                        <h3>Full Screen Display</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-phone icon-big" aria-hidden="true"></span>
                                        <h3>Devices Compatible</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-tint icon-big" aria-hidden="true"></span>
                                        <h3>Light Weight CSS</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-thumbs-up icon-big" aria-hidden="true"></span>
                                        <h3>Free Support</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-knight icon-big" aria-hidden="true"></span>
                                        <h3>Vector Icons</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-console icon-big" aria-hidden="true"></span>
                                        <h3>Single Piece Code</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-object-align-vertical icon-big" aria-hidden="true"></span>
                                        <h3>Submenu</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-primary">
                                    <div class="panel-body text-center">
                                        <span class="glyphicon glyphicon-text-background icon-big" aria-hidden="true"></span>
                                        <h3>8 Themes</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
	if($(window).width() >= 768){
 	if($('#bootstrap-sidebar').hasClass('icon-menu')) {
		localStorage.setItem("default-padding", "60px");
      $('#wrapper').css('padding-left','60px');
      console.log('icon');
    }
   	else if($('#bootstrap-sidebar').hasClass('text-menu')) {
   		localStorage.setItem("default-padding", "150px");
      $('#wrapper').css('padding-left','150px');
      console.log('text');
    }
    else if($('#bootstrap-sidebar').hasClass('big-icon-menu')) {
    	localStorage.setItem("default-padding", "100px");
      $('#wrapper').css('padding-left','100px');
      console.log('big');
    }
    else{
    	$('#wrapper').css('padding-left','80px');	
    	localStorage.setItem("default-padding", "80px");
    	console.log('ntg');
        }
	}
});
$("#menu-toggle").click(function(e) {
        e.preventDefault();
        let default_padding=localStorage.getItem('default-padding'); 
        var origin_padding = $("#wrapper").css("padding-left");
        if(origin_padding=='0px'){      
        $('#wrapper').css('padding-left', default_padding);		
    	}
    	else{
    	$('#wrapper').css('padding-left','0px');
    	}
        $("#wrapper").toggleClass("toggled");
});
</script>

</body>
</html>
Preview