Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to customize bootstrap sidebar/sidenav?

How to customize bootstrap sidebar/sidenav?

Problem

I need to make use of Twitter Bootstrap Sidebar for creating a Menu in my web application.(Highlighted in red).

To create a menu as shown below.

The top item has a dropdown as shown in mage. And Next items in menu should come below this.But this is what I get when I use the css.

Menu Item overlaping the other.

Here is the bootstrap code:

Here is my code:

 

The css class in bootstrap setting the position is bs-docs-sidenav and affix I belive. The css of docs.css of twitter bootstrap is this

Anyone please help to solve this issue as soon as possible.

Problem courtesy of: dany

Solution

You are using span3 on both of your menus. That means the second menu will be placed on the next grid on the right, not below the first menu.

I believe you should start like this-

Now apply some CSS on the second menu e.g.

Solution courtesy of: Salman

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to customize bootstrap sidebar/sidenav?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×