Hello,
First of all, thanks for the code :-) !
Actually, the behavior of the sidebar is a bit strange...
I think it should be displayed on wide screens (having the button to make it disappear), and when the screen shrinks (or smaller devices), the sidebar should disappear and the button should make it take the whole screen.
I could simple activate the sidebar by default with just adding the class "toggle" on the main wrapper.
<div id="wrapper" class="toggled">

But could you give guidance how to make the sidebar disappear on smaller devices (the @media part of the css), please?

Hi.

This is a good plugin. However, I have tried your solution with fixed navbar and found that fixed navbar is not sliding when click on toggle button.

It would be better, if you give support for that, with an addition to fixed navbar and footer as well as swipe event in mobile browser.

Future version would be to add a custom dimmer that activates when open and then simply click the dimmer or close button to close the sidebar!

Hi there,

Is there any way to show the sidebar above an specific div?
I wanted to make the sidebar works like a filter menu, but not showing from the left of the page, but above the grid menu.

Can I make it work?

I am using this for one of my projects but seem to have an issue with the scrolling for the side bar. I cannot for some reason see all of my links that i have on my side bar. There is a scroll bar for me to scroll through sidebar navigation but i can only scroll down so far and i cant see all of my links. I know they are there because if i zoom out browser i can see it. Is there a css property i have to adjust to be able to scroll all the way down or see all my list on the sidebar?

Hi
How can I change menu width?
tnx

Hello, i have been 6 hours to create it like this images like this http://prntscr.com/8atxw3

and my code is here http://codepen.io/anon/pen/XmWbox, how can i give one div inside row and also with smaall div for sidebar ?

I have a menu with code like this:

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">Celine Is Awesome</a>
            <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden active">
                    <a href="#page-top"></a>
                </li>
                <li class="">
                    <a class="page-scroll" href="#services">HOME</a>
                </li>
                <li class="">
                    <a class="page-scroll" href="#portfolio">ABOUT US</a>
                </li>
                <li class="">
                    <a class="page-scroll" href="#about">OUR INVESTMENTS</a>
                </li>
                <li class="">
                    <a class="page-scroll" href="#team">WHY US</a>
                </li>
                <li class="">
                    <a class="page-scroll" href="#contact">PRODUCTS</a>
                </li>
                <li class="">
                    <a class="page-scroll" href="#contact">NEWS & EVENTS</a>
                </li>
                <li class="">
                    <a class="page-scroll" href="#contact">CONTACT US</a>
                </li>
                <li class="">
                    <a class="page-scroll" href="#contact">E-BROCHURE</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<!-- /.navigation -->

I tried to add into startbootstrap-simple-sidebar like this:

And when click this button it will show like that:

This only a demo, I can't do like this.

My problem is: when I tried to add menu bootstrap, the startbootstrap-simple-sidebar not appear.

The sidebar work fine on google chrome , mozilla firefox, but not working on internet explorer 8

sorry i was testing on bootstrap 2.3.1

I have a strange problem in IE. When the sidebar is toggled, scroll bar is showing in the left edge of the screen, with the same css settings as yours. But in Chrome scrollbar is not showing. What could be the reason for this and how could I avoid it showing?

How can I rtl this theme?

I wonder how difficult would that be...

I have a bootstrap grid (col-xs- etc etc) on the page content, and with this side navbar the grid overflows, bootstrap takes full window width instead of just the page content container width.

How can I solve this?

Thank you

When I place it inside a bootstrap modal all goes outside the modal.

please, how to change black sidebar background color?

Any assistance or suggestions greatly appreciate.

Update the template to make the content wrapper shift rather than resize on menu toggle.

Check out how the sidebar behaves on iOS 9.
Any idea how to fix this?

how can i open my page with sidebar already collapsed?

Is there a migration tutorial? 4x version is being around for at least 2y... perhaps there is a lot of folks still using it.

Currently, when on mobile this template will hide the navigation menu. I'd like to make it so that instead of hiding the navigation it will change and just show the brand and a hamburger menu (like normal horizontal menus do). How can I do this?

Error details: Failed to load resource: the server responded with a status of 404 (Not Found)
URL : http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/

Works fine in most major browsers I tested but… did you try it on the Android native Browser? Does unfortunately not work at all here.

please help ....how to use this plugin in yii2

Go to page http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/# on desktop with wide browser window.
Click the Toggle button and hide the side menu.
Resize the window to small window and the side menu suddenly show up.

Go to page http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/# on desktop with narrow browser window.
Click the Toggle button and show the side menu.
Resize the window to large window and the side menu suddenly went hidden.

I upgraded to ios9 today and now when I toggle the menu on my iPhone instead of the page-content shifting off-screen to the right when the menu comes out everything shrinks and the menu and all my content shows on the page.

When I first load the page if I pinch and zoom slightly then release and allow it to go back to fullscreen then hit then menu icon - it works fine.

I have the same issue with the demo as well as my version.

Ideas?

Hi,

I'm using expressjs with ejs and I would like to use this template. I have installed with npm i startbootstrap-simple-sidebar and I have the package on node_modules
How do I have to use it? What do I supose to put in my app.js file?

Thanks in advance.

Regards

I use your Simple Sidebar which was easily configured and is pretty nice. Thanks a lot by the way.
The only thing that I cannot get to work is placing the footer so that it gets covered by the sidebar.
The same way to sidebar is covering the navbar and content for example.
I placed the footer inside the #page-content-wrapper div.
Maybe it is just a configuration issue. Any help would be appreciated.

Hi,

Thanks for give wonderful layout for us. i just need one more favor that the sidebar height is not coming 100%(up to bottom) after change mobile mode view by using chrome developer Tool bar.

the sidebar height having 100% height in normal browser view. if we go for mobile mode(F12), the height is not coming up to bottom coming only 70 or 80% only.

please help me on this issue

Thank for for this! This works great for one of my projects. The one thing that I noticed is that when I have my website on Chrome, the sidebar will stay open page to page. But in Internet explorer, the sidebar will reanimate from closed to open. It's as if it's taking longer to load the javascript or something.

Is there a way I can make the sidebar not reanimate (slide) to open when I go page to page in Internet Explorer?

In Firefox the side nav bar isn't open by default for a desktop. It's open by default on Chrome. Do I need to do an overwrite somewhere to make this behavior work on firefox?

How would we change the CSS to collapse the sidebar to a small width, rather than hide it (i.e. it would contain icons rather than text). I am using a webview on the right and need to have a toggle button inside of the navbar so I can expand and collapse it.

How would we preserve the integrity of your code and add that ability?

Hi @davidtmiller
I have faced with an strange bug. I have a bad transition when I put an select element with a selected option in content.

to re-produce this bug, I have changed your sample from here:
https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

I have added this line on page-content-wrapper under <h1>Simple Sidebar</h1>:

<select multiple="multiple"><option selected>Test</option></select>

so you will see we will have bad transition when we have a select tag like above line in content.

I have checked that on chrome version 55.0.2883.87
I haven't this issue on firefox.

this is very bad bug.
I will be thank you if you could resolve this soon.
Thanks

Hi, are you thinking about update to bootstrap 4?

On the iPhone, when I try to toggle the sidebar it shows the bar as well as the page content side by side full width that causes the layout to shrink.

After "body" tag, if we add following NAV bar definition, then looks like SIDE Nav is broken. After adding following top nav text,

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Portfolio</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

1. If we reduce page height, then list elements in the side nav list are getting hidden.
2. Also horizontal scroll bar is not appearing in side nav if we reduce the page size.

If we remove TopNav text then it works fine. Can we please have this working with Page TopNav text also.

Thanks

Hello
I don't know if this is the correct place to post, but it would be of great help if i could understand a pretty basic thing. I need to know how to connect properly the sidebar buttons, i need put the link in href but i need the content to be shown in the same page in the blank space.
Thanks

It works flawlessly on the latest version of Chrome and Firefox on a desktop but when I try on my phone the sidebar wont stay fixed. It scrolls with the main-page-content. I'm hoping its just an error on my end.

Otherwise it's beautiful and I love you ;)

Beautiful template, but in Microsoft Edge and Internet Explorer the menu slide from the left everytime you click on a new page... (sorry for my english, I hope I'm clear)

https://libraries.io/bower/startbootstrap-simple-sidebar
clone address is different than repository address, can you fix it?

Hello,
thank you for your great example! I would like to change the fixed navigation to relative. So that the menu will be in place when scroll down the page. Do you have an approach idea for me how I can make that?

Hi. I tried to change the sidebar color in the bootstrap.css but I couldn't... what class should I modify to change the color?

Can anyone explain how to use this in angular 6 project?

I think this is Blackrock Digital's bug: How to use side nav bar in angular 6? It is a documentation bug.

The project's README says:

After downloading, simply edit the HTML and CSS files included with the template in your favorite text editor to make changes.

The README never says what changes to make in a prescriptive manner. That is, the README should provide the exact steps a user needs to perform instead of saying "[just] make changes".

For users unfamiliar with the library or project, they need exact steps to perform.

Hi !
On large screens, when you toggle the wrapper on a small resized window, the sidebar opens, but when you resize the window to a wider width, the sidebar closes.
May be it should have the same behavior on different window sizes.

Is there anyway you could publish individual css / js on bower?

From what I can see in my development with this theme, the jumbotron does not fully extend to the full width.

Is there a way to create submenu?

I'm trying to get the sidebar to appear on the right instead of the left. I have essentially changed all the css properties from left -> right and right -> left.

It works for the most part, but while in mobile view the content is not animated, and 'pops' to the left when the menu is opened. How could this be fixed so the animation works correctly?