Question

I have a sidebar-nav as shown in the typical Twitter Bootstrap example.

Some of my sidebar menu items are long. Depending on the size of the window, the text wraps to the next line as shown in this jsfiddle as you change the width of the window. For presentation’s sake, I’d like to set a minimum width for the sidebar-nav. I know there are media tags in Bootstrap’s CSS, but I’m not sure that that’s what I need to be doing. Basically, I want the content section to still be responsive, but have the sidebar menu to have a minimum width (or actually a locked width might be even better).

Is there a way to fix the width of the sidebarnav but make sure it still plays nicely with the content section of the page?

Answer 1

Get the nav out of the fluid-container, set its position to absolute and add a margin-left to the container. It’s not Twitter Bootstrap’s native positioning method, but it should work.

Markup:

<div class="navbar navbar-fixed-top">...</div>
<div class="the-sidebar">...</div>
<div class="container-fluid the-container>...</div>

CSS:

.the-sidebar {
    position: absolute;
    width: 220px;
}
.the-container {
    margin-left: 240px;
}

This is the script on jsfiddle (i’ve used latest version of Twitter Bootstrap)

TIP:

If you want an always-visible sidebar, just change positioning to fixed