• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 241
  • Last Modified:

Bootstrap 3 Navbar Collapse Problem

I'm currently working my way through my first Bootstrap (and responsive) design. I'm not following the Bootstrap navigation setup exactly. I am using the Bootstrap code to generate the mobile (hamburger) menu, but I'm using a slide-in menu from the left.

I have set a media query to collapse the menu at 1020px (to avoid folding-up the navbar) and display the mobile menu on tablets and smaller. The problem is when the navigation collapses it creates about 100px of margin (whitespace) below the navbar's original position. I believe that .navbar-collapse.collapse {
display: none!important;}; is set correctly but something is still holding down that space. I haven't been able to discover what is doing this. Any help with this would be wonderful.  

Please visit: http://jsfiddle.net/dlearman/0w310dgs/ for more information
0
dlearman1
Asked:
dlearman1
  • 3
1 Solution
 
F PCommented:
It's this tag causing the issue:

#topPhotoBar img { position: relative; }

Open in new window


if you change it to inherit, it works when on mobile without the same issue. Try using a media query to put !important on that position only when mobile.

Line 49 of serena.css
0
 
F PCommented:
Oh, and add this:

.navbar-header { margin-bottom: 25px; }
0
 
dlearman1Author Commented:
Hi Frank... thank you for your comment. Unfortunately, I haven't been able to get it to work. But I may not be understanding your suggestion completely. Would you mind providing a little more detail?

Thanks
Doug
0
 
F PCommented:
You have 2 elements fighting for position in the room allocated to them by the DOM.

Line 49 of serena.css

That as I mentioned has that code I posted, and the relative tag for position. Relative positioning means it can be overlapping other elements. Have a read here on what each does in terms of styling:

http://www.w3schools.com/css/css_positioning.asp

Basically at the bottom of your page you can put this above your closing body tag for it to work properly:

<style type="text/css" scoped="scoped">
#topPhotoBar img { position: inherit; }
.navbar-header { margin-bottom: 25px; }
</style>

Open in new window


or at the bottom of your css file where those 2 elements are defined add this:

#topPhotoBar img { position: inherit; }
.navbar-header { margin-bottom: 25px; }

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now