CODEWITHSUNDEEP
jqueryhtmlcss
XpellCZ
XpellCZ

Reputation: 1

How can I make div to overlay background image?

I'm trying to integrate a sticky navbar in to my website. However when I make the position of my navbar fixed, the background image overlays it. How can I fix that? I want my navbar to overlay everything which could be in its way.

.fixed {
  position: fixed;
  top: 0;
}

Here`s a link to my pen: https://codepen.io/XpellCZ/pen/BRRzPW

Thanks for any tips.

Upvotes: 0

Views: 68

Answers (4)

Nair Athul
Nair Athul

Reputation: 821

It seems you are using bootstrap so you can go through the navbar section https://getbootstrap.com/components/#navbar-fixed-top

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Upvotes: 0

athi
athi

Reputation: 1683

Use z-index property.

.fixed {
  position:fixed;
  top:0;
  z-index: 10;
}

Upvotes: 0

Hasan Elsherbiny
Hasan Elsherbiny

Reputation: 628

try to give it z-index

  .fixed{
    position:fixed;
    top:0;
    z-index:100;
}

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337580

To make the .navigation appear on top of the overlay, set it's z-index higher, eg:

.navigation {
  background-color: #000;
  z-index: 1
}


body {
  font-size: 2em;
}

.navigation {
  background-color: #000;
  z-index: 1;
}

.container-fluid {
  margin: 0px;
  padding: 0px;
}

.pageOne {
  background-image: url("http://unsplash.com/photos/55xd_uiUYEE/download?force=true");
  height: 550px;
  background-size: cover;
  opacity: .3;
}

.fixed {
  position: fixed;
  top: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<div class="container-fluid">
  <div class="navigation col-xs-12 fixed">
    <ul class="nav nav-pills">
      <li><a href="#">Marek Poul</a></li>
      <li class="pull-right"><a href="#">About Me</a></li>
      <li class="pull-right"><a href="#">References</a></li>
      <li class="pull-right"><a href="#">Contact Me</a></li>
    </ul>
  </div>
  <div class="pageOne col-xs-12"></div>
</div>

Upvotes: 2

Related Questions