CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Necrosis Pain
Necrosis Pain

Reputation: 51

Trouble fixing an image to the top of a bootstrap navbar

Alright, so I'm having some absolute positioning issues here.

This is what I'm trying to accomplish.

enter image description here

If you look closely at the top of this black nav there is a transparent brush effect that is accomplished by black brush stroke PNG. Which I've situated within it's own div. All I'm trying to do is fix this div on top of the default black bootstrap navbar.

To do this I used absolute positioning relative to the a div that wraps around the navbar (which it is relative to)

, but I'm having weird issues pop up like the overflow hidden not working. Can someone look at my code and tell me what I'm doing wrong? Thanks.

HTML 

  <nav class="navbar navbar-inverse">



    <div class="container-fluid">


      <div class="navbar-header">

      <!-- BrushStroke PNG Shit -->


      <div class="img-wrap">
        <img class="image-responsive black-brush" src="img/blackbrushnew.png">
      </div>


    <!-- BrushStroke PNG Shit -->

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Italian Joe's</a>
        <p class="navbar-text text-center" id="NavHours" style="color:white; width: 230px;"> Open 6am to 5pm </p>
      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-right">
          <li id="Home" class="active"><a href="#">Home</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">About</a></li>
          <li id="location"><a href="#">Location</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

  <!-- End Navbar -->

CSS

.blackbrush{
            position: absolute;
            top: -135%;
            text-align: center;
            margin: 0 -1000px;
            z-index: 100;
            mix-blend-mode: multiply;
                }
.img-wrap {
  overflow: hidden;
}

Upvotes: 0

Views: 81

Answers (1)

Wisely D Cruizer
Wisely D Cruizer

Reputation: 1139

Add a class to your navbar-header div. say some xyz class then add your backgound image like below

 .xyz
 {
  background-image:url('img/blackbrushnew.png');
 }

Delete your div with the img-wrap class.

Upvotes: 1

Related Questions