CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Seren
Seren

Reputation: 378

Bootstrap v2.3.3 Navbar gets overlapped by Collapse content

I am having an issue on my site where I have a bootstrap (version 2.3.2) navbar fixed to the top of the page and then later in the body I have a bootstrap collapse object with a large amount of content in <pre><code> tags. The collapse opens and closes as expected; however, when I scroll down the page, the content in the <pre><code> tags overlaps the navbar at the top of the page. I have attempted to add z-index's to both the navbar and the collapse content; however, it doesn't seem to be working.

Below are the jsfiddle links. The offending overlapping content is at the end of the page. Thanks!
My code: http://jsfiddle.net/K3JAe/3/
Full Screen Result: http://jsfiddle.net/K3JAe/3/embedded/result/

Upvotes: 1

Views: 536

Answers (2)

Ross Allen
Ross Allen

Reputation: 44880

The .collapse class has position: relative, making it a positioned element, and your navbar has position: fixed from the Affix plugin, making it also positioned. The accordion comes later in the DOM, which makes it stack on the navbar.

@Adrift's fix is the way to go: the affixed element at the top of the page needs a z-index to stack on any later positioned elements. I would go higher than 2 though for your future z-indexing uses:

/* Stack .affix on top of positioned elements later in the DOM */
.affix {
  position: fixed;
  z-index: 100;
}

Upvotes: 3

Adrift
Adrift

Reputation: 59779

Adding a z-index value to the .affix class above 1 seems to do the trick:

.affix {
    position: fixed;
    z-index: 2;
}

http://jsfiddle.net/K3JAe/5/

Upvotes: 2

Related Questions