• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Seegatesite Header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • My Tools
    • Bootstrap Navbar Online Generator
    • Bootstrap Demo
    • Amazon Asin Grabber
    • Azoncast v2 Theme
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
🏠 » CSS » Create Cool Simple Sidebar Menu with Bootstrap 3 and Font Awesome

Create Cool Simple Sidebar Menu with Bootstrap 3 and Font Awesome

By Sigit Prasetya Nugroho ∙ February 21, 2015 ∙ CSS ∙ 138 Comments

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

Table of Contents

  • 1 Let’s start creating left sidebar menu with boostrap 3. Initial preparation:
    • 1.1 For demo ” cool simple sidebar menu bootstrap 3 by seegatesite ” or you can download script below

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 /* 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$("#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!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="https://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="https://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.

Source cool simple sidebar menu by seegatesite.com

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for AgusAgus says

    May 27, 2015 at 7:19 am

    Thanks you 🙂

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      May 27, 2015 at 8:57 am

      you’re welcome 🙂

      Reply
      • Avatar for MauriMauri says

        September 22, 2016 at 1:09 pm

        Hi
        I can’t download script below thx

        Reply
        • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

          September 22, 2016 at 1:24 pm

          please open locked content from the button above 🙂

          Reply
  2. Avatar for lijinraju0@gmail.comlijinraju0@gmail.com says

    June 16, 2015 at 6:47 am

    thank you

    Reply
  3. Avatar for Jose Rafael CamejoJose Rafael Camejo says

    July 14, 2015 at 3:44 pm

    Muchas gracias! Thank you very much! 🙂

    Reply
  4. Avatar for AmadouAmadou says

    July 16, 2015 at 1:30 pm

    Thank’s exactly what I needed

    Reply
  5. Avatar for AmitAmit says

    July 21, 2015 at 3:16 pm

    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…

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      July 24, 2015 at 3:29 am

      you’re welcome.. maybe this can help you http://goo.gl/nho8g

      Reply
    • Avatar for TimTim says

      January 9, 2016 at 8:41 pm

      Did you ever find a solution for this? I Have a ton of links that need to be nested in the accordions and am running out of room. If i adjust the line-height of the sidebar it and causes the elements to be indented. Is there a way to keep this from happening?

      Reply
      • Avatar for TimTim says

        January 9, 2016 at 9:34 pm

        It appears that the issue is caused by the font awesome icons, which dont fit when line-height is reduced. this can be solved by changing the span class fa-lg to fa-sm and then reducing the line-height parameter.

        Reply
  6. Avatar for HarshaHarsha says

    July 28, 2015 at 7:00 am

    Thank You…..Works Great 🙂

    Reply
  7. Avatar for roqeemroqeem says

    August 18, 2015 at 3:24 am

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      August 21, 2015 at 2:07 am

      hello roqeem,

      sory i dont understand what you mean 🙂

      Reply
  8. Avatar for albertoalberto says

    August 20, 2015 at 6:28 pm

    Hello,

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 10, 2015 at 1:20 am

      yes, its possible

      Reply
  9. Avatar for XD MediaXD Media says

    September 5, 2015 at 6:36 pm

    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.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 9, 2015 at 8:51 am

      Please check my new demo again here and download my new script again. thx 🙂

      Reply
  10. Avatar for XDXD says

    September 8, 2015 at 2:54 am

    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?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 9, 2015 at 8:49 am

      Helo XD, I reupload my script, please check and download again, hope as you wish 🙂

      Reply
      • Avatar for XDXD says

        September 10, 2015 at 1:47 am

        That did the trick. Thanks!

        Reply
      • Avatar for ReshmiReshmi says

        January 8, 2017 at 4:49 am

        Hi

        Could you let me know what exactly was changed in the new script to make the page content expandable while the navigation bar is shrinked

        Reply
        • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

          January 8, 2017 at 6:00 am

          Sorry I had forgotten, because in 2015 I change 🙂

          Reply
  11. Avatar for knowme ifyouknowme ifyou says

    September 13, 2015 at 1:16 pm

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 13, 2015 at 1:32 pm

      #sidebar-wrapper {

      background-color: #your-color;
      }

      Reply
      • Avatar for knowme ifyouknowme ifyou says

        September 13, 2015 at 10:59 pm

        hello, can you create a tutorial how they created the SB Admin 2? thank you

        Reply
  12. Avatar for cremacrema says

    September 16, 2015 at 8:01 pm

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

    Reply
  13. Avatar for adriantoadrianto says

    September 17, 2015 at 3:34 am

    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…

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 17, 2015 at 4:47 pm

      thank you, i will check it 🙂

      Reply
  14. Avatar for Đôi Guốc MộcĐôi Guốc Mộc says

    September 17, 2015 at 5:39 pm

    Thank you! Good Post…

    Reply
  15. Avatar for NeethuNeethu says

    September 25, 2015 at 4:51 pm

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

    Reply
  16. Avatar for NeethuNeethu says

    September 26, 2015 at 5:57 am

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 26, 2015 at 3:32 pm

      I will check it ASAP 🙂

      Reply
    • Avatar for NeethuNeethu says

      September 28, 2015 at 5:56 am

      #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?

      Reply
      • Avatar for 2Sharp4U2Sharp4U says

        July 29, 2017 at 8:17 am

        Remove height : 100% from #sidebar-wrapper and add the following:

        #sidebar-wrapper {
        top: 53px; /*the height of the navbar*/
        bottom: 0;
        overflow-x: hidden;
        }

        Reply
      • Avatar for 2Sharp4U2Sharp4U says

        July 29, 2017 at 8:21 am

        Btw., the navbar height of this demo is 56px.

        Reply
  17. Avatar for rajivrajiv says

    September 27, 2015 at 12:03 pm

    Thank You sir

    Reply
  18. Avatar for DeveloperDeveloper says

    October 3, 2015 at 10:28 am

    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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      October 5, 2015 at 8:28 am

      the css animation doesnt work well in safari, i will fix ASAP .. thx 🙂

      Reply
      • Avatar for LeslieLeslie says

        December 8, 2015 at 3:15 pm

        Just wondering if you were able to look into this? I’m seeing the same issue.

        Reply
  19. Avatar for stevesteve says

    October 20, 2015 at 9:10 pm

    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 dont know why, but it doesnt show icons on my computer, just some strange empty rectangles.

    Thank you,
    Cheers

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      October 21, 2015 at 3:52 pm

      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

      Reply
      • Avatar for stevesteve says

        October 22, 2015 at 7:02 am

        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

        Reply
        • Avatar for VamshiVamshi says

          February 19, 2017 at 11:57 am

          I tried this code but when ever I run I get the error ” 0x800a138b – JavaScript runtime error: Cannot assign to a function result”

          Reply
          • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

            February 20, 2017 at 2:07 am

            Sory i don’t understand your error , can you send me the screenshot ?

  20. Avatar for venkatasuvenkatasu says

    November 13, 2015 at 6:18 am

    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?

    Reply
  21. Avatar for jaysbulk@gmail.comjaysbulk@gmail.com says

    November 15, 2015 at 1:53 pm

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 18, 2015 at 2:42 pm

      to hide navbar when page load, you need add new jquery script with load event, then use click event to execute it

      Reply
  22. Avatar for NyreenNyreen says

    November 17, 2015 at 3:20 am

    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.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 18, 2015 at 2:41 pm

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

      Reply
      • Avatar for NyreenNyreen says

        November 20, 2015 at 4:13 am

        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.

        Reply
  23. Avatar for AxAx says

    November 20, 2015 at 9:07 am

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 20, 2015 at 12:39 pm

      maybe you can combine it with session php

      Reply
  24. Avatar for BorisBoris says

    November 20, 2015 at 4:49 pm

    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.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      December 11, 2015 at 3:52 pm

      combine it with jquery to disable the hover

      Reply
  25. Avatar for John SJohn S says

    November 25, 2015 at 1:25 am

    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.

    Reply
    • Avatar for johnjohn says

      November 28, 2015 at 7:07 pm

      I redid everything and added the js file properly so got that working.

      Reply
  26. Avatar for johnjohn says

    November 28, 2015 at 7:06 pm

    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!

    Reply
  27. Avatar for JAtinderJAtinder says

    December 6, 2015 at 10:37 am

    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 !

    Reply
  28. Avatar for BrianBrian says

    December 8, 2015 at 2:02 pm

    Unable to download the script, kindly assist.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      December 11, 2015 at 3:45 pm

      please click tweet or facebook like or g+ button, then the download link will open

      Reply
  29. Avatar for NasNas says

    December 17, 2015 at 3:36 am

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      December 21, 2015 at 7:41 am

      sory i don’t understand…

      Reply
  30. Avatar for Ed RisingerEd Risinger says

    January 14, 2016 at 11:07 pm

    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!

    Reply
  31. Avatar for Ed RisingerEd Risinger says

    January 16, 2016 at 3:22 pm

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

    Reply
  32. Avatar for PatPat says

    February 4, 2016 at 6:02 am

    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

    Reply
  33. Avatar for JeremyJeremy says

    February 4, 2016 at 8:01 am

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

    Reply
  34. Avatar for Kosar TofiqKosar Tofiq says

    February 10, 2016 at 7:19 am

    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

    Reply
    • Avatar for Kosar TofiqKosar Tofiq says

      February 10, 2016 at 7:52 am

      sorry in “” miss that link
      cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css

      Reply
  35. Avatar for vinodvinod says

    February 19, 2016 at 11:08 am

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

    Reply
  36. Avatar for mromro says

    March 8, 2016 at 10:52 am

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      March 15, 2016 at 8:27 am

      Hello mro,

      Sory, i never use ASP.NET 🙂

      Reply
  37. Avatar for Fernando ReinaFernando Reina says

    March 15, 2016 at 9:31 pm

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

    Thankd a lot

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      March 19, 2016 at 2:39 pm

      I never tried for the third level, you must modify little

      Reply
  38. Avatar for pooriapooria says

    March 31, 2016 at 6:58 pm

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

    Reply
  39. Avatar for Miguel AldegundeMiguel Aldegunde says

    April 8, 2016 at 10:45 am

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

    Reply
  40. Avatar for DanDan says

    April 11, 2016 at 10:16 pm

    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!

    Reply
    • Avatar for DanDan says

      April 11, 2016 at 10:50 pm

      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!

      Reply
  41. Avatar for bintangbintang says

    April 23, 2016 at 2:45 am

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      June 18, 2016 at 2:09 am

      check css file and assets please

      Reply
  42. Avatar for ArianaAriana says

    April 25, 2016 at 5:02 am

    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.

    Reply
  43. Avatar for Daniel GrandisDaniel Grandis says

    May 3, 2016 at 3:00 pm

    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!

    Reply
  44. Avatar for SuSu says

    May 5, 2016 at 8:49 am

    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.

    Reply
  45. Avatar for bl4ck4ntbl4ck4nt says

    May 8, 2016 at 5:24 pm

    Terima kasih pak sigit, tutornya OK..

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      May 9, 2016 at 1:11 am

      terimakasih pak, sama sama 🙂

      Reply
  46. Avatar for Fona IonelFona Ionel says

    May 10, 2016 at 7:18 am

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

    Reply
    • Avatar for Fona IonelFona Ionel says

      May 10, 2016 at 7:20 am

      Sorry, how to prevent the menu from toggling on mouse over ?

      Reply
      • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

        May 10, 2016 at 2:43 pm

        delete from css
        #wrapper.toggled-2 #sidebar-wrapper:hover {
        width: 250px;
        }

        Reply
  47. Avatar for LBLB says

    May 10, 2016 at 7:57 pm

    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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      May 13, 2016 at 2:32 am

      Sory, it is just sidebar menu.

      Reply
  48. Avatar for Fernanda BFernanda B says

    May 11, 2016 at 7:29 pm

    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?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      May 13, 2016 at 2:35 am

      Yes, the sidebar disappear in small devices and you can show the sidebar by click button toggle in the the right top. Yes you can add two instances but i never do it

      Reply
  49. Avatar for LBLB says

    May 16, 2016 at 8:35 pm

    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

    Reply
    • Avatar for LBLB says

      May 16, 2016 at 8:42 pm

      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;
      }

      }
      );
      }

      Reply
  50. Avatar for IbejiIbeji says

    May 30, 2016 at 12:48 pm

    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’.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      May 31, 2016 at 3:16 am

      check again please

      Reply
      • Avatar for IbejiIbeji says

        May 31, 2016 at 10:38 am

        I just did my friend. But when I clicked on the Facebook icon, all I saw was just the figure 726. How many times do I need to ‘like’ your site on Facebook before I am able to download the script? Please expatiate exactly on how one might succeed in this download. Cheers, Sigit

        Reply
  51. Avatar for IbejiIbeji says

    May 31, 2016 at 1:34 pm

    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.

    Reply
  52. Avatar for KenzmitnickKenzmitnick says

    June 2, 2016 at 12:32 pm

    Great job! Thanks a lot!

    Reply
  53. Avatar for kuyaglennkuyaglenn says

    June 7, 2016 at 1:09 pm

    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)

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      June 14, 2016 at 5:54 am

      you need change the css style

      Reply
  54. Avatar for BenBen says

    June 23, 2016 at 5:21 am

    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

    Reply
  55. Avatar for WaterWalkerWaterWalker says

    August 12, 2016 at 4:17 pm

    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?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      August 13, 2016 at 9:31 am

      can i see your code ?

      Reply
  56. Avatar for WaterWalkerWaterWalker says

    August 13, 2016 at 9:57 am

    Sorry the form trunk my code,

    maybe i can send you by mail

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      August 13, 2016 at 11:37 am

      I’d be glad to help you ,but no guarantees i’ll do my best to assist. please send to my email here : sgt86sloamazon@gmail.com 🙂

      Reply
  57. Avatar for SashSash says

    September 1, 2016 at 2:49 am

    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.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 1, 2016 at 2:31 pm

      Hello Sash,
      sory i never use drupal 🙂

      Reply
  58. Avatar for JonJon says

    October 23, 2016 at 1:13 pm

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

    Reply
  59. Avatar for RaahulRaahul says

    October 23, 2016 at 7:00 pm

    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.

    Reply
  60. Avatar for JonJon says

    November 2, 2016 at 5:30 pm

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

    Reply
  61. Avatar for AshishAshish says

    November 4, 2016 at 5:57 am

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 8, 2016 at 3:53 am

      Simple example, give new attribute on a element

      [php]<a href=’#’ class=’go-to-menu’ menu-id=’3′ rel="nofollow">menu 3</a>[/php]
      [php]
      $(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);
      }
      });
      });
      [/php]

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

      Reply
  62. Avatar for patrickpatrick says

    November 4, 2016 at 12:59 pm

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 8, 2016 at 3:44 am

      sory i dont understand with your question 🙁

      Reply
  63. Avatar for Anuar raadAnuar raad says

    November 16, 2016 at 7:31 pm

    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/

    Reply
  64. Avatar for Anuar raadAnuar raad says

    November 16, 2016 at 8:25 pm

    And here you can see the issue of the height:

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 17, 2016 at 8:17 am

      thank you for correcting,

      fix the css like code below
      [php]
      #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;
      }
      [/php]

      Hope fix your problem

      Reply
  65. Avatar for Anuar raadAnuar raad says

    November 17, 2016 at 7:22 pm

    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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 18, 2016 at 1:17 am

      sory i don’t understand with your problem. Can you explain me more detail ?

      Reply
      • Avatar for Anuar raadAnuar raad says

        November 18, 2016 at 9:12 pm

        Hi, the issue is this when the menu (sidebar) initialize showing only the icons (effect that apply the button in the navbar) Here is when under of the sidebar appear a white space, the sidebar not complete to the end of the page.

        Reply
  66. Avatar for NiandouNiandou says

    November 18, 2016 at 7:20 am

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 21, 2016 at 8:59 am

      add toggle event jquery on that class 🙂

      Reply
  67. Avatar for alessioalessio says

    November 25, 2016 at 2:26 pm

    Hi Sir.
    Great job. Thanks.

    Reply
  68. Avatar for WaterWalkerWaterWalker says

    December 28, 2016 at 11:07 am

    Hello,

    How i can fix the toogle button. it always resize according the screen size. so on big screen it is far away on the right of the slidebar.

    Reply
  69. Avatar for varshavarsha says

    January 19, 2017 at 9:07 am

    Wow, Thank you for this feature really awesome

    Reply
  70. Avatar for VamshiVamshi says

    February 19, 2017 at 12:42 pm

    Is it possible to hide the sidebar on page load instead of on button click

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      February 20, 2017 at 2:03 am

      Using jquery
      [php]
      $(document).ready( function ()
      {
      $("#menu-toggle-2").toggle();
      }
      [/php]

      Reply
  71. Avatar for VamshiVamshi says

    February 20, 2017 at 5:40 am

    I am using this for the master page and the problem I am facing is the display is showing in the middle of the page

    Reply
  72. Avatar for ABDEL ADIMABDEL ADIM says

    February 25, 2017 at 3:11 am

    hay thank you for sharing , i am trying to include it in angular 2 project but am having some difficulties using jquery in angular 2 ,
    please can you give me the side bar menu in javascript or some other solution and thannk you so much

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      March 9, 2017 at 8:09 am

      sory, i never use angular 🙂

      Reply
  73. Avatar for RuneRune says

    March 25, 2017 at 5:16 pm

    This is a great sidebar, thanks for sharing:) Can you help me with a modification? I would like to have the toggle menu button at the very left on the navbar (where u have placed the brand name) on both desktop and mobile devices. And a logo image at the middle of the navbar. I would really appreciate of you can help me, couse i can t figure it out :/

    Reply
  74. Avatar for Austin briccoAustin bricco says

    July 3, 2017 at 2:40 pm

    Awesome navbar. One question, is it possible to add the toggle button that is currently on the top header to actually display inside the left navigation bar?

    Reply
  75. Avatar for NaniNani says

    July 20, 2017 at 4:23 am

    Hi Sigit, Unable to download.

    Thanks

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      July 20, 2017 at 4:27 am

      Dear nani,
      yes, you must share that locked content in the bottom article to download this file 🙂

      Reply
  76. Avatar for JohnnyJohnny says

    February 18, 2018 at 7:06 pm

    Hi, greata tutorial!
    But my problem is that it doesn’t show sidebar menu and SEEGATESITE left icons…

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      February 19, 2018 at 1:22 am

      can i show your screencapture ?

      Reply
  77. Avatar for DorababuDorababu says

    February 20, 2018 at 5:33 pm

    Good example, I need small help on hove I don’t want to expand the menu how can I do that. I need to show or hide the menu on button click. Sub menu’s I want to display to the right how can I do that.

    Reply

Leave a Reply to Ed Risinger Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Do you want to get Free WordPress Videos, Plugins, and Other Useful Resources ?

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

we respect your privacy and take protecting it seriously

Popular Articles

How To Replace String With Another String In PHP

September 16, 2019 By Sigit Prasetya Nugroho Leave a Comment

Increase Traffic with the Right Yoast Settings

October 16, 2014 By Sigit Prasetya Nugroho Leave a Comment

Boost Social Media Traffic with OnePress Social Locker

October 17, 2014 By Sigit Prasetya Nugroho Leave a Comment

Amazon Custom Thumbnail Plugin New Version Launch

September 18, 2014 By Sigit Prasetya Nugroho Leave a Comment

Web Applications as Desktop Flavor with Ajax Agent

October 11, 2014 By Sigit Prasetya Nugroho Leave a Comment

Tags

adminlte adsense adsense tips affiliate amazon ajax amazon Android angular angular 4 angular 5 asin grabber Bootstrap codeigniter create wordpress theme crud css free wordpress theme google adsense imacros increase traffic jquery laravel laravel 5 learn android modal dialog mysql nodeJs optimize seo pdo php plugin pos Publisher Tips SEO theme tutorial tutorial angular tutorial angular 4 tutorial javascript tutorial javascript beginners twitter widget wordpress wordpress plugin XMLRPC




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2019 Seegatesite.com