Create Cool Simple Sidebar Menu with Bootstrap 3 and Font Awesome

Inspired by the bootstrap sidebar menu from wrapbootstrap.com, I create a cool simple sidebar menu using bootstrap 3 and font awesome framework.

create simple sidebar menu bootstrap

Simple sidebar menu / vertical dropdown menu was adopted from example simple sidebar from startbootstrap.com , i just modify to be more cool. The advantages from this sidebar, when the screen size equal to 768px and toggle button is clicked, the sidebar will be hidden and will only display the menus icon.

To beautify the icon in my bootstrap sidebar menu, i use the font awesome icon framework in order to the sidebar menu look more attractive .

View my bootstrap left sidebar menu as shown below

Create vertical dropdown bootstrap menu how to create sidebar dropdown with bootstrap

Let’s start creating left sidebar menu with boostrap 3. Initial preparation:

1. Make sure you have downloaded the boostrap 3 framework here

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap is a framework for building responsive web design. Which means that the web interface created by bootstrapping will adjust the screen size of the browser we use both in desktop, tablet or mobile device. This feature can be enabled or disabled according to our own desires. By bootstrapping we also can build dynamic or static web.

2. Download the font awesome css to beautify the appearance of the icon here

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS “font awesome”.
Font awesome is a font web formed several icons for web interface, commonly used for Bootstrap, there are more than 100+ icons in Font awesome and will increase each its release.

3. Download Jquery-1.11.2.min.js here

4. Simple sidebar menu original file from startbootstrap.com. I just change some css file from simple sidebar menu from startbootstrap.com and add new javascript

Create css file as simple-sidebar.css and enter the following code


 /* Toggle Styles */

 #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;
    overflow: hidden;
}

#wrapper.toggled {
    padding-left: 250px;
    overflow: scroll;
}

#sidebar-wrapper {
    z-index: 1000;
    position: absolute; 
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -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 #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    position: absolute;
    padding: 15px;
    width: 100%;  
    overflow-x: hidden; 
}
.xyz{
    min-width: 360px;
}
#wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0px; 
}
.fixed-brand{
    width: auto;
}
/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 2px;
}

.sidebar-nav li {
    text-indent: 15px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
    border-left: red 2px solid;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}
.no-margin{
    margin:0;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }
    .fixed-brand{
        width: 250px;
    }
    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled-2 #sidebar-wrapper {
        width: 50px;
    }
    #wrapper.toggled-2 #sidebar-wrapper:hover {
        width: 250px;
    }


    #page-content-wrapper {
        padding: 20px;
        position: relative;
        -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 #page-content-wrapper {
        position: relative;
        margin-right: 0;
        padding-left: 250px;
    }
    #wrapper.toggled-2 #page-content-wrapper {
        position: relative;
        margin-right: 0;
        margin-left: -200px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: auto;

    }
}

Create a javascript file as sidebar_menu.js and enter the following code

$("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
     $("#menu-toggle-2").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled-2");
        $('#menu ul').hide();
    });

     function initMenu() {
      $('#menu ul').hide();
      $('#menu ul').children('.current').parent().show();
      //$('#menu ul:first').show();
      $('#menu li a').click(
        function() {
          var checkElement = $(this).next();
          if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return false;
            }
          if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
            }
          }
        );
      }
    $(document).ready(function() {initMenu();});

Create index html and copy the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Simple Sidebar - Start Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/simple-sidebar.css" rel="stylesheet">
    <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-default no-margin">
    <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header fixed-brand">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"  id="menu-toggle">
                      <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
                    </button>
                    <a class="navbar-brand" href="#"><i class="fa fa-rocket fa-4"></i> SEEGATESITE</a>
                </div><!-- navbar-header-->

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="active" ><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span></button></li>
                            </ul>
                </div><!-- bs-example-navbar-collapse-1 -->
    </nav>
    <div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav nav-pills nav-stacked" id="menu">

                <li class="active">
                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span> Dashboard</a>
                       <ul class="nav-pills nav-stacked" style="list-style-type:none;">
                        <li><a href="#">link1</a></li>
                        <li><a href="#">link2</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span> Shortcut</a>
                    <ul class="nav-pills nav-stacked" style="list-style-type:none;">
                        <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a></li>
                        <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a></li>

                    </ul>
                </li>
                <li>
                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a>
                </li>
                <li>
                    <a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a>
                </li>
                <li>
                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a>
                </li>
                <li>
                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a>
                </li>
                <li>
                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
                </li>
            </ul>
        </div><!-- /#sidebar-wrapper -->
        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid xyz">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Simple Sidebar With Bootstrap 3 by <a href="http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/" >Seegatesite.com</a></h1>
                        <p>This sidebar is adopted from start bootstrap simple sidebar startboostrap.com, which I modified slightly to be more cool. For tutorials and how to create it , you can read from my site here <a href="http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/">create cool simple sidebar menu with boostrap 3</a></p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
    <!-- /#wrapper -->
    <!-- jQuery -->
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/sidebar_menu.js"></script>
</body>
</html>

Finish!! Perhaps the sidebar is not yet perfect. But it could be a tutorial / ideas to create bootstrap sidebar nicer than mine. Simply modify sidebar menu accordance with your wishes. You can see my another bootstrap tutorial here

For demo ” cool simple sidebar menu bootstrap 3 by seegatesite ” or you can download script below

Last update script  :

  • 9/9/2015 – fixed bug.

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

118 Comments

 Add your comment
  1. Thanks you 🙂

  2. lijinraju0@gmail.com

    thank you

  3. Jose Rafael Camejo

    Muchas gracias! Thank you very much! 🙂

  4. Thank’s exactly what I needed

  5. Thanks you very much! I’m tweaking it for my RTL needs right now.
    Although I’m trying to get over a little bug – try changing font size to 16px and watch the li items getting indented increasingly…

  6. Thank You…..Works Great 🙂

  7. the main content is not responsive, responsive feature not working… text width area still on fixed width

  8. Hello,

    Is it possible to do the same thing but to have the sidebar on the left and right side ?

  9. When you toggle the sidebar to only show the icons, the page content does not expand. I have tried a few things, but I am not able to figure out how to get the page content wrapper to expand to the page when you toggle the sidebar. Can you think of a solution?

    E.g. If you toggle the sidebar in a desktop media, you will see the content does not expand, it just moves left.

  10. I am not sure where my previous comment went, but it stated a bug where the page content wrapper does not expand when the sidebar is toggled to the left. You will notice when you hit the toggle button, the content just moves to the left but its container is not expanded. Any fix for this?

  11. Hello. how to change the color of the side bar? thank you so much

  12. Hi there, everything is going well here and ofcourse every one is
    sharing information, that’s really good, keep up writing.

  13. And why I can’t use the latest jquery ?
    I have tried to change from script src=”js/jquery-1.11.2.min.js” to script src=”js/jquery-1.11.3.min.js”

    and then it stop working…

    But thanks… it’s really good stuff…

  14. Thank you! Good Post…

  15. #sidebar-wrapper
    {
    height : 100%
    }
    causing default scroll on page load
    Do anyone facing the same issue?

  16. #sidebar-wrapper
    { height : 100% }
    causing scroll on initiial browser loading . Do any one facing the same issue ?

    • #sidebar-wrapper
      { height : 100% }
      causing scroll on initiial browser loading

      1. Suppose if we are having a header & footer in page and placed the sidebar menu with the above style
      Header style
      ——————
      .main-header {
      top: 0;
      right: 0;
      left: 0;
      height: 5%;
      background-color: #009530;
      border-color: transparent;
      margin: 0;
      }
      footer
      ———-
      footer {
      bottom: 0;
      background-color: #009530;
      color: #fff;
      width: 100%;
      position: fixed;
      padding-left: 15px;
      padding-right: 15px;
      height: 60px;
      z-index: 1000;
      }

      Copyright 2015 © Schneider Electric. All rights reserved.

      This will also cause scrolling on browser. currently we have handled with height:calc(100% – 55px); for fixing the scroll issue. but i think this is not a proper solution.

      2. One more suggestion instead of width: 250 px specifying in pixels, is it easier to modify in percentage wise?

  17. Link : https://www.dropbox.com/s/5bed73ug9vb31oq/issue-slide.mov?dl=0
    Not works well in safari OS 10.10, when side bar button is pressed to hide the menu, content glitches

  18. Thank you very much this is great!
    Is there a way to tweak javascript or css so that the menu bar default state is hidden (shrinked)?
    Also, I don`t know why, but it doesn`t show icons on my computer, just some strange empty rectangles.

    Thank you,
    Cheers

    • 1. If you need to hidden the menu bar default state ,edit script below on sidebar_menu.js

      $(document).ready(function() {initMenu();$("#menu-toggle-2").click();});

      2. Check with f12 for strange empty rectangles icon

      • Thank you very much for replay!

        Yes, I wanted the menu bar to be collapsed all the time but to keep it popping out on mouse over. I tried with changing the sidebar_menu.js to something like this:

        $(document).ready(function() {initMenu();
        $(“#wrapper”).toggleClass(“toggled”)=true;
        });

        And It is working with this code, the menu bar is collapsed by default and it pops out on mouse over, but only on big and medium resolution. When the window is resized on small resolution (like mobile) then menu bar shows again in full width and I want to prevent that.

        My guess is that it has to do with “navigation bar” (on the top of the page) collapsing state. But I don`t know how to handle it.

        Thank you very much for your help 🙂

        Thank you, it is great

  19. Great but I find your right side space is not expanding when tested and i removed the overflow hidden in your css file and the right side is expanding where i would like to add some content running to pages.
    Similary i need to expand the left side menu. I tested adding some more menu elements but its fixed and does not scroll down to show the rest of the menu elements. What to do sir?

  20. how do i hide the nav bar when page loads, when i click on the toggle button i need it to load the menu

  21. Hi. I wanted to change the color of the tabs after clicking them. I’ve had progress (I managed to change the color of the other tabs) but I cant make the Dashboard tab lose it color when it is not the clicked tab. How can I do it? Thank youl.

    • sory, i dont understand what you mean :). please explain me more

      • Never mind. I already solved my problem. But I still have another problem, how can I make the tabs toggable? I mean when I click on the tab, it shows the content, but when I click it again when the contents are shown, it doesn’t hide its contents. How can I make it like that? Thank you so much.

  22. Hello, is it possible to remember the state of the sidebar (collapsed / expanded) when the page refreshes?
    Thank you.

  23. Good day i wonder if i can disable the hover button and do this automatically when the page load, and if you can help me with that.

  24. Hey love this but my only issue is that it doesn’t go 100% height. If I add anything to the wrapper on the right side more than around a 1000px the sidebar stops and the content keeps going in the same size as above. So I added 2000px to the height property and the sidebar gets to the right length but that means I have to figure out the exact height. Obviously I can do this but wondering why the 100% height wouldn’t work.

  25. I am wondering how to put a marker on the sidebar link that is active. Like when you click the shortcuts menu and it goes to that page. Instead of say a color change you put a triangle at the edge so it picks up the color of the main content area. I have seen this on other sites but can’t figure out how they do it. Thanks for the help!

  26. Awesome, thanks ! just a little change that I had to make in the .js file:

    $(document).on(“click”, “#target-id”, function(e){
    {{ rest of the stuff }}
    });

    without this collapse button was not working. Otherwise perfect !

  27. Unable to download the script, kindly assist.

  28. how to make this page like site1.master … any new form will be fire-up within this main page. tq

  29. Great Menu.
    When we click on the content brought up in the center area after clicking a left side menu option the color of the menu changes to
    background: rgba(255, 255, 0, 0.701961);

    When we click the menu we have our yellow color by:
    .sidebar-nav li a:active,
    .sidebar-nav li a:focus {
    text-decoration: none;
    background: #ffff00;
    color:black;
    }
    in simple-sidebar.css

    Is there a way that we can keep the selected left menu option as #ffff00, preventing:
    background: rgba(255, 255, 0, 0.701961);
    from being the background color?

    Thanks!

  30. I found the issue. It was in my code.
    Great Menu!

  31. Thanks for the great work you did with this.
    How can the I make only the page content scroll while both the nav bars remain fixed

  32. Awesome post. Trying hard to get this to work with a sticky footer. Is this possible?

  33. great work but how make right to left , i changed all (****-right) or (right) to (***-left) or (left) and vise versa in css file also i use “” over bootstrap 3.3.6 , to rlt language , but always icons on the left and text on the right , how solve it? Note: iam new in those things

  34. This works great but I want to this to be like master so it can apply to all pages…

  35. Hi, great tutorial, but how can i apply this to ASP.NET MVC app ?

  36. Hi, excellent work. This menu can have a third level? Or only can have two levels.

    Thankd a lot

  37. Thanks for your nice work. Could you also explain that how can I port this sidebar to the WordPress?

  38. Hi Sigit, thanks you so much for your code, it is working perfectly and very elegant, instructions how to use so clear. Thanks a lot , great job!!

  39. Hi! This is great! Wonderful work. I have a question.

    I see that if i uncomment $(‘#menu ul:first’).show(); I can get the first UL to expand by default. How can I make it so that the second or third or fourth is expanded by default? my first guess — ul:second doesn’t do it… internet hasn’t helped me find how to reference these subsequen UL items …. Thanks!

    • A little searching in jquery — I found eq(n) where n is the index — so, menu ul:eq(3) will show fourth menu item… Thanks anyways!

  40. thank you very much for the tutorial 😉 . but the icon didnt appear 🙁 . maybe there is something i missing?

  41. How can we make the stack collapsible using the same line item link after it’s expanded? The only way to close them is by clicking another pill that’s also expandable.

  42. Hey, great job! Just I’ve encoutered the problem of height 100% with page header of 60px causing 60px of vertical scroll in page. Have you find any solution? the height:calc(100% – 60px); statment seems to not working!

    Thanks in advance!

  43. Thanks for this excellent tutorial.

    By your example, once I click the sidebar menu on “Dashboard” or “Shortcut”, it shows its corresponding submenu “link1” and “link2.”
    Is it possible that if I clink the same menu again (dashboard or Shortcut) then it collapses its submenu.

    The expected scenario is:
    When I click Dashboard in 1st time, it shows its submenu.
    When I click Dashboard (not click Shortcut) in 2nd time, it collapses its submenu.

    Thank you very much.

  44. Terima kasih pak sigit, tutornya OK..

  45. Hello, awesome job you did here! Could you give me a hint of how to stop the menu toggleing? I’m noob with jQuery 🙂

  46. Great tut!
    Is it possible to have side bar on desktop and standard top bar on mobile?
    How can this be done?

    Also is it possible to click a link to show the submenu and click again to hide the submenu?

    Thanks

  47. Hi, thanks for the great work. I noticed that the sidebar disappear in small devices. Do you know why and how to fix it. Another thing, can I use two instances (left and right) in one page?

  48. Hello,

    Your tutorial includes expanding the UL when clicked to show sub items (Link 1 / Link 2).
    How can it be amended so that a second click hides the sub items again?

    Thanks

    • I figured it out:

      function initMenu() {
      $(‘#menu ul’).hide();
      $(‘#menu ul’).children(‘.current’).parent().show();
      //$(‘#menu ul:first’).show();
      $(‘#menu li a’).click(
      function () {
      var checkElement = $(this).next();
      if ((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
      $(‘#menu ul:visible’).slideDown(‘normal’);
      checkElement.slideUp(‘normal’);
      return false;
      }
      if ((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
      $(‘#menu ul:visible’).slideUp(‘normal’);
      checkElement.slideDown(‘normal’);
      return false;
      }

      }
      );
      }

  49. Your facebook ‘likes’ were 721 when I followed your instruction in order to download your cool sidebar script. But after I augmented the figure to 722, I still could not download the script. It still remained ‘Locked’.

  50. I checked again, but still could not download the script. How many times is someone supposed to go to Facebook and ‘like’ your site before being able to download the script please?
    Cheers.

  51. Great job! Thanks a lot!

  52. Hi great work! Thank you. How can I fully hide the sidebar menu when toggled to close? (No icons appearing and just full content showing)

  53. Thanks for the script. It is grant. I had a question. Would it be possible to have two branding for normal and mobile viewing? Also how would you add more links to the right of the header strip as it would be good for some informative labels maybe. I appreciate your help.
    Ben

  54. hello,

    When i Click on the submenu (Link 1/ Link 2) with a a ref. (Ajax.ActionLink) the side bar collapses.

    How can i stop it??

    I tried several things in function initMenu(). but nothing works..

    Who can help me?

  55. Sorry the form trunk my code,

    maybe i can send you by mail

  56. This is amazing. Is there a way to integrate this into Drupal 7. I’m using Bootstrap 3 theme there and trying to find a way to make my menu look like in this tutorial.

  57. Looks great! Thank you, looking forward to reviewing your tutorial. Any tutorials on JSF and bootstrap or Facelets Templates

  58. Really good one. But I have observed one issue.
    1. Open sub-menu of Dashboard
    2. Click menu toggling
    3. Sub-menu items / icons are not displaying.

    I have observed this is because sub-menu size is less and also whenever hover it highlights small portion instead of full line.

    Please help me to resolve the same.

  59. How can I please comment with return dialog with you? I simply love your adaptation and have a question.

  60. how will i implement Ajax for loading contents when a menu item is clicked.

    • Simple example, give new attribute on a element

      <a href='#' class='go-to-menu' menu-id='3' rel="nofollow">menu 3</a>
      $(document).on('click','.go-to-menu',function(){
         var menu = $(this).attr('menu-id');
         var value = {
      	menu-number= menu;
      	};
         $.ajax(
      	{
      		url : "menu.php",
      		type: "POST",
      		data : value,
      		success: function(data, textStatus, jqXHR)
      		{
      		// load content here
      		},
      		error: function(jqXHR, textStatus, errorThrown)
      		{
      			alert(textStatus);
      		}
      	});
      });
      

      I have not tried the above code, but that’s the basic code..hope useful

  61. can when the page load Close the Navigation on click open… now by start the site is open the Navigation many thx!!

  62. Hi, I’ve a question when in the page we’ve divs that generate scroll the sidebar menu not use the height 100%, appear a white space under of this.

    You can see this here: https://postimg.org/image/ga156e4gj/

  63. And here you can see the issue of the height:

    ———— hidden url ——————

    • thank you for correcting,

      fix the css like code below

       #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;
          overflow: hidden;
          background-color: #000;
      }
      #sidebar-wrapper {
          z-index: 1000;
          position: absolute; 
          left: 250px;
          width: 0;
          height: 100%;
          margin-left: -250px;
          overflow-y: auto;
          background: #000;
          -webkit-transition: all 0.5s ease;
          -moz-transition: all 0.5s ease;
          -o-transition: all 0.5s ease;
          transition: all 0.5s ease;
          overflow: hidden;
      }
      #page-content-wrapper {
          position: absolute;
          padding: 15px;
          width: 100%;  
          overflow-x: hidden; 
          background-color: white;
      }
      

      Hope fix your problem

  64. Hi, I tested the css and work, now the issue persist when the menu initialize with this code in the function initMenu() $(“#wrapper”).toggleClass(“toggled toggled-2”); for make the menu show only icons.

    Here you can see the issue:

    https://mega.nz/#!TVNATBQQ!HCbWotWRvwcpBhO2LqDc8HWABIHps_WzrgxaKiK0DmM

  65. Hi Sir.
    Great job. Thanks.
    How can make a second click to hide the sub item Dashboard again?
    Thanks in advance

  66. Hi Sir.
    Great job. Thanks.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: