Handling responsive navigation with dynamic content
It’s very common with the popular frameworks such as Bootstrap
and Foundation to have fixed width breakpoints,
in most cases this isn’t a problem and we can easily change them through
the Sass or Less variables supplied.
The most profound problem lies within the navigation — you have to pick a fixed breakpoint, and anything
below this breakpoint will render the navigation in it’s collapsed state.
While this doesn’t necessarily pose a problem for a site with static content, the same cannot be said
for a dynamic site. If you add more items to the navigation you will have to go and manually
update the breakpoint. While this might not appear to be a major burden, imagine the scenario where
you have built a site for a client and they were to add in the additional item. What if you had
##A better solution
Clearly this is a very bad way to operate. Your website is supposed to be responsive and dynamic right?
First we can wrap the navbar inside a wrapper. Then calculate the width of the wrapper using
jQuery’s ´outerWidth()´ method and then use the same method to get the width of the navigation. The navigation
should have a width that collapses to fit it’s contents, so it should either be floated or given a display
property of table (Inline block adds weird margins so we won’t be using it).
If the two widths are equal then we can collapse the navigation.