CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Paul
Paul

Reputation: 11746

blurred effect under fixed bootstrap navbar

I'm trying to blur the content as it passes under my fixed navbar, but I'm unable to blur anything...here is my latest jsfiddle attempt:

I'm assuming I need two layers, a top layer for the text and a lower transparent layer that blends the content underneath. This is what my css looks like:

.navbar {
  z-index: 999;
  opacity: .94;
}

.navbar-fixed-top-glass-layer {
  top:0;
  position:fixed;
  z-index: 998;
  width:100%;
  height:50px;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

I've posted a jsfiddle of the desired effect I'm trying to achieve with bootstrap

Any thoughts?

Upvotes: 1

Views: 5416

Answers (1)

CSS Apprentice
CSS Apprentice

Reputation: 939

I can't add a comment to y'all's current discussion because my reputation. Fahad's answer is right though, just add a fixed position div with a higher z-index for the content you want over your blurred header

jsFiddle http://jsfiddle.net/CSS_Apprentice/WtQjY/415/

HTML

<ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>          
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

#navbar {
    width: 75%;
    text-align: justify;
    min-width: 500px;
    margin: 1% auto 0 auto;
    padding: 0;
    z-index: 10000000001;
    position: fixed;
    top: 0;
}

#navbar:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#navbar li {
    display: inline-block;
}

Upvotes: 4

Related Questions