content logo

Bootstrap Sidebars:

Bootstrap Sidebar with Yellow Hover Effect

Sidebars provide users of your website with an extra way of navigating through different pages or various features of your website with more ease. There are many websites out there that have complex features and more than hundreds of subpages. Navigating through all of that is truly a difficult and time-consuming task. Therefore, all of these subpages are categorized neatly in a list for the users to find easier. Of course, if such list was in every page then there wouldn’t be much space for the actual content of that page. This is why a sidebar is useful. You can add everything to your sidebar and which hides conveniently at the side of the page when you don’t need it.

The Bootstrap sidebar that we are sharing with you today is a sidebar with a yellow hover effect. The colour yellow looks really good with the dark background of this sidebar which makes it pleasing to the eye. The sidebar has a unique icon for every item and can be used for different things. Whenever you hover your mouse over an item in this sidebar with hover effect, the background colour of that particular item will turn yellow. You can easily use this beautiful sidebar effect in your own website via the code below.

#Yellow Hover Effect

#Bootstrap Sidebar

#Sidebar with Hover Effect

#Beautiful Sidebar Effect


<!-- This script got from www.frontendfreecode.com -->
<div id="wrapper">
    <aside id="sidebar-wrapper">
        <div class="sidebar-brand">
            <h2>Logo</h2>
        </div>
        <ul class="sidebar-nav">
            <li class="active">
                <a href="#"><i class="fa fa-home"></i>Home</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-plug"></i>Plugins</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-user"></i>Users</a>
            </li>
        </ul>
    </aside>

    <div id="navbar-wrapper">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand" id="sidebar-toggle"><i class="fa fa-bars"></i></a>
                </div>
            </div>
        </nav>
    </div>

    <section id="content-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="content-title">Test</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                    laborum.
                </p>
            </div>
        </div>
    </section>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    padding-bottom: 30px;
    position: relative;
    min-height: 100%;
}
a {
    transition: background 0.2s, color 0.2s;
}
a:hover,
a:focus {
    text-decoration: none;
}
#wrapper {
    padding-left: 0;
    transition: all 0.5s ease;
    position: relative;
}
#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #222;
    transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}
.sidebar-brand {
    position: absolute;
    top: 0;
    width: 250px;
    text-align: center;
    padding: 20px 0;
}
.sidebar-brand h2 {
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    color: #fff;
}
.sidebar-nav {
    position: absolute;
    top: 75px;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav > li {
    text-indent: 10px;
    line-height: 42px;
}
.sidebar-nav > li a {
    display: block;
    text-decoration: none;
    color: #757575;
    font-weight: 600;
    font-size: 18px;
}
.sidebar-nav > li > a:hover,
.sidebar-nav > li.active > a {
    text-decoration: none;
    color: #fff;
    background: #f8be12;
}
.sidebar-nav > li > a i.fa {
    font-size: 24px;
    width: 60px;
}
#navbar-wrapper {
    width: 100%;
    position: absolute;
    z-index: 2;
}
#wrapper.toggled #navbar-wrapper {
    position: absolute;
    margin-right: -250px;
}
#navbar-wrapper .navbar {
    border-width: 0 0 0 0;
    background-color: #eee;
    font-size: 24px;
    margin-bottom: 0;
    border-radius: 0;
}
#navbar-wrapper .navbar a {
    color: #757575;
}
#navbar-wrapper .navbar a:hover {
    color: #f8be12;
}

#content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    top: 100px;
}
#wrapper.toggled #content-wrapper {
    position: absolute;
    margin-right: -250px;
}

@media (min-width: 992px) {
    #wrapper {
        padding-left: 250px;
    }
    #wrapper.toggled {
        padding-left: 60px;
    }
    #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 60px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -190px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -190px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 60px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 60px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #wrapper {
        padding-left: 60px;
    }
    #sidebar-wrapper {
        width: 60px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 250px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
    }
}
@media (max-width: 767px) {
    #wrapper {
        padding-left: 0;
    }
    #sidebar-wrapper {
        width: 0;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 250px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
    }
}
const $button = document.querySelector("#sidebar-toggle");
const $wrapper = document.querySelector("#wrapper");
$button.addEventListener("click", (e) => {
    e.preventDefault();
    $wrapper.classList.toggle("toggled");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
    padding-bottom: 30px;
    position: relative;
    min-height: 100%;
}
a {
    transition: background 0.2s, color 0.2s;
}
a:hover,
a:focus {
    text-decoration: none;
}
#wrapper {
    padding-left: 0;
    transition: all 0.5s ease;
    position: relative;
}
#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #222;
    transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}
.sidebar-brand {
    position: absolute;
    top: 0;
    width: 250px;
    text-align: center;
    padding: 20px 0;
}
.sidebar-brand h2 {
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    color: #fff;
}
.sidebar-nav {
    position: absolute;
    top: 75px;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav > li {
    text-indent: 10px;
    line-height: 42px;
}
.sidebar-nav > li a {
    display: block;
    text-decoration: none;
    color: #757575;
    font-weight: 600;
    font-size: 18px;
}
.sidebar-nav > li > a:hover,
.sidebar-nav > li.active > a {
    text-decoration: none;
    color: #fff;
    background: #f8be12;
}
.sidebar-nav > li > a i.fa {
    font-size: 24px;
    width: 60px;
}
#navbar-wrapper {
    width: 100%;
    position: absolute;
    z-index: 2;
}
#wrapper.toggled #navbar-wrapper {
    position: absolute;
    margin-right: -250px;
}
#navbar-wrapper .navbar {
    border-width: 0 0 0 0;
    background-color: #eee;
    font-size: 24px;
    margin-bottom: 0;
    border-radius: 0;
}
#navbar-wrapper .navbar a {
    color: #757575;
}
#navbar-wrapper .navbar a:hover {
    color: #f8be12;
}

#content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    top: 100px;
}
#wrapper.toggled #content-wrapper {
    position: absolute;
    margin-right: -250px;
}

@media (min-width: 992px) {
    #wrapper {
        padding-left: 250px;
    }
    #wrapper.toggled {
        padding-left: 60px;
    }
    #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 60px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -190px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -190px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 60px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 60px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #wrapper {
        padding-left: 60px;
    }
    #sidebar-wrapper {
        width: 60px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 250px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
    }
}
@media (max-width: 767px) {
    #wrapper {
        padding-left: 0;
    }
    #sidebar-wrapper {
        width: 0;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 250px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
    }
}
</style>

</head>
<body>
<div id="wrapper">
    <aside id="sidebar-wrapper">
        <div class="sidebar-brand">
            <h2>Logo</h2>
        </div>
        <ul class="sidebar-nav">
            <li class="active">
                <a href="#"><i class="fa fa-home"></i>Home</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-plug"></i>Plugins</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-user"></i>Users</a>
            </li>
        </ul>
    </aside>

    <div id="navbar-wrapper">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand" id="sidebar-toggle"><i class="fa fa-bars"></i></a>
                </div>
            </div>
        </nav>
    </div>

    <section id="content-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="content-title">Test</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                    laborum.
                </p>
            </div>
        </div>
    </section>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const $button = document.querySelector("#sidebar-toggle");
const $wrapper = document.querySelector("#wrapper");
$button.addEventListener("click", (e) => {
    e.preventDefault();
    $wrapper.classList.toggle("toggled");
});
</script>

</body>
</html>
Preview