Menu

Bootstrap affix on fluid design

Goal

Using an affixed bootstrap side menu on a fluid design that keeps its width during page scroll

Description

In one of the projects I worked on, lately, I had the need to create a left side menu that would move with the page during a page scroll. I was using Bootstrap 2 on that application and therefore I started using the affix plugin.

However, there was a bug on that menu because, when the left side menu was changed to the affix-top with position fixed on top (I also realized that if I had the left menu with a specific width right on the beginning, that would solve my problem but that width was not easy to specify on a fluid design, because I wanted that width to be adaptable – for different screen resolutions, the menu should occupy as much as possible of the left side of the page), the width of the menu was not maintained. After some google research, I found out an issue regarding “Bootstrap Affix plugin with fluid layout” reported on stackoverfow. After following that link, I found out the solution, which is explained next.

How to

Use Javascript to fetch the initial left side menu width and specify it later on the component so that the width is maintained during page scroll. The following snippet shows the page structure containing the left side menu:

Notice the specification of an id for the div containing the data-spy element. That id is what will be looked for with JQuery to get the div’s width and specify it explicitly later on (the function is specified in a namespace named ENGAGE which is the project’s name):

Explanations

With this solution, we wait for the left side menu to be displayed with the appropriate width, according to the browser’s resolution and, on document ready, we explicitly specify the menu with that width. Therefore, during page scroll, the menu keeps its width.