CODEWITHSUNDEEP
csstwitter-bootstrap-3
Kevin Thompson
Kevin Thompson

Reputation: 2506

Affix navigation in bootstrap 3 small screen

I'm playing around in Bootstrap 3 trying to duplicate the vertical navigation bar used on the getbootstrap site. I'm running into a couple issues though and I'm not finding a lot of documentation to work from.

Here's a bootply link to show you where I'm coming from: http://bootply.com/77832

Issue number 1 is that if I change the screen size from large to small, my navigation is now under my text. But on the bootstrap site the navigation moves to the top of the screen and the text falls under that. How can I fix the responsiveness of this so that resizing or viewing this on a small screen doesn't wreck the layout?

Issue number 2 is cosmetic. I'd like for the pretty pink background on my navigation to fill the entire container rather than just the width of the text. So I thought, hey throw a width:100% on that bad boy and you're all set. I thought that it would fill 100% of the col-md-3 that contains it, but it actually fills 100% of the screen width. Why would it extend out of the col-md-3 that it is in and how can I achieve the desired look?

Upvotes: 2

Views: 544

Answers (1)

brian blocker
brian blocker

Reputation: 21

For #2, the issue is that the UL has a position:fixed, so it sort of "removes" itself from knowing about its parent's width. Basically, it treats the body as the parent, so width: 100% will make it as wide as the page.

For #1, You may want to look at, when the page becomes small, make the nav "not affixed" to the side of the page.

Upvotes: 1

Related Questions