Bootstrap Navbar Using Images on Collapse

Hey you awesome coder folk,

So I am trying to use images (eventually with text) for the collapsed menu. I’m using bootstrap 3.3.7. I have figured out how to get the images to take up the portion of the screen that I like, but the whole collapse-nav-menu when open is still the full width of the screen.

Here is a link to the codepen for reference.

The background that is yellow was the only thing I could figure out for the width of the element that holds the images. I would like the entire dropdown portion of the menu to be the width of the yellow background. Also I can’t figure out why the images still have a margin around them, so if you stumble across that answer and would like to point it out to me that would be great also!

Also I don’t like how it pushes the content down at the larger window sizes, if you can tell me how to fix that as well I would greatly appreciate it!

I know the colors are stupid, I’m using them so I can easily tell what is being effected when I change something in the code.

Also I am pretty new to this, so anything else you notice that doesn’t make sense, or is just really stupid to do let me know so I can learn how to be better! I promise you wont hurt my feelings :slight_smile: