Making a Fixed Right Side Navbar

Question

Right now I'm exploiting most of the features of Bootstrap to make sure its compatible on all browsers and screens and I would like to continue to do so. Which is why I need a 'Bootstrap' fix as far as possible for this problem.

Currenty, I've a nav at my page top as shown below and as seen on http://imdbnator.com/table?id=9051d9111fa33e5daf9625fb7d0d8e2a

Current Top-Navbar

Wish to Add

As you can see in the above picture, I wish to add fixed to right and if possible like nav-inverse with all the options that I have on my top navbar except with just icons. That is, I would like to continue the usage of <li>. Basically, a bootstrap solution.

My Ultimate goal is to provide a set of options on the sidebar as soon as the topbar is not visible for which I'll probably have to use JavaScript that I can manage by myself I suppose.

Thanks for your help!

Update: I know of simple CSS solutions. But I wish to be Bootstrap compatible. ie. I can use the same structure as a typical navbar does in Bootstrap.

Marian Rick · Answer 1 · 2015-07-05T08:24:43.163

1

I do not know if I get your question the right way, but if you want to know how to fix this sidebar its quite simple:

Lets pretend your bootstrap navigation has a build somehow like this:

<ul class="navbar-right">
 <li>Some Navigation</li>
 <li>Some Navigation</li>
 <li>Some Navigation</li>
</ul>

<style>
  ul.navbar-right {
    position: fixed;
    right: 0;
    top: 50%;
  }
  ul.navbar-right li {
    float: none;
  }
</style>

<div id="fixed"></div>

This will work on every popular browser and system.

edited Jul 05 '15 at 08:24

answered Jul 05 '15 at 08:17

Marian Rick

3,350
4
31
67

Thanks for this. I know of this solution. But I wish to be Bootstrap compatible. ie. I can use the same structure as a typical navbar does in Bootstrap – Jul 05 '15 at 08:20
Sorry, maybe I am not able to think outside the box, but this works perfect with bootstrap and you can use the same structure as you do in your current navigation. – Marian Rick Jul 05 '15 at 08:25
Well, this is fine for somple layouts but when we use other frameworks all of its features wont be compatible. Thanks to @Theodore I was able to get this http://startbootstrap.com/template-overviews/simple-sidebar/ which can be modified! – Jul 05 '15 at 09:01

score 0 · Answer 2 · edited May 23 '17 at 11:58

Taken from this answer: How to create a sticky left sidebar menu using bootstrap 3?

Bootstrap supports affix for "sticky elements"

If you want to place your sidebar on the side you should wrap the whole page with a container and force it to follow the window height:

.wrap {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
}

Afterwards placing the sidebar is quite easy as:

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 250px;
  height: 100%;
}

To push the content to avoid overriding your nav play around with the padding-top style of your container

Simple demo

Thank you. Your links were useful. This one especially : http://startbootstrap.com/template-overviews/simple-sidebar/ — , Jul 05 '15 at 09:02

Making a Fixed Right Side Navbar

2 Answers2