CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user7347942
user7347942

Reputation:

how to make div element go under nav bar when scrolling up

I am trying to make the div elements below the nav bar go under nav bar when i scroll up. Currently, the contents go over the nav bar when i scroll up. I tried using some of the solutions in stackoverflow but somehow it does not work for my case. Would kindly appreciate your help.

This is the HTML code:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
alpha.2/css/bootstrap.min.css" integrity="sha384-
y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" 
crossorigin="anonymous">

<meta name="viewport" content="width=device-width, initial-scale=1">

<div class = "container-fluid">
  <div class = "navigation-bar" id = "nav-bar">
    <div class = "w3-top">
    <div class = "w3-bar w3-border w3-card-4" >
      <a href = "#" class="w3-bar-item w3-button">About</a>
      <a href = "#" class="w3-bar-item w3-button">Portfolio</a>
      <a href = "#" class="w3-bar-item w3-button">Contact</a>
     </div>
    </div>
  </div>
  <body>
  <div class = "Intro" id = "myIntro">
   <div class="w3-panel w3-card-4">
    <h4 class = "header" align = "center"> My workspace</h4>
    <p>
     <table style="width:90%">
       <tr>
         <td align = "center"><i>Aspiring developer</i></td>
         <td align = "center"><i>Tech enthusiast</i>
         <td align = "center"><i>Loves fishing</i>
       </tr>
       </table>
      </p>
   <hr>
  </div>
 </div>

This is the current css code:

.navigation-bar{
  z-index: 1;
}
body {
  padding: 50px;
  z-index: -1;
}
h4 {
  padding-top: 20px;
}

You can see what happens through here: https://codepen.io/chawin/pen/EWBaxo

Upvotes: 0

Views: 5334

Answers (5)

itacode
itacode

Reputation: 3787

Please try:

.w3-top{
  z-index: 10;
  background: white;
  left: 0;
}

Upvotes: 0

Anwar
Anwar

Reputation: 24

You can try a combination of z-index and position fixed. Also make sure no other element has a z-index higher than your nav bar.

#nav-bar{ 
     position: fixed;
     z-index:99;
 }

Upvotes: 0

bearwithbeard
bearwithbeard

Reputation: 331

For horizontal navigation bar

.navigation-bar{ 
     position: fixed;
     width: 100%;
 } 
body { 
     margin: 0;
}

Upvotes: 0

shaochuancs
shaochuancs

Reputation: 16226

Actually, in your code, the div element goes under the nav bar. It appears to be "go over" because the nav bar's background color is transparent (rgba(0,0,0,0)). To fix the issue, all you need is define the nav bar's background color as white:

.navigation-bar .w3-top {
  background: white;
}

Please check the CodePen.

Upvotes: 3

Tobiq
Tobiq

Reputation: 2657

Simply, use the z-index attribute.

The default is 0, so if the other elements have not been changed, you can just set the z-index of the nav-bar to 1 and it will display above all other elements.

** NOTE: For z-index to work, you must use positioning.

i.e: position: fixed

You need to rewrite your page, properly. After playing around, you can see the bar starting to display over the text http://prntscr.com/ettdzp, but you've done things like add padding which has offset, as well as use external style sheets. Placing divs outside the body in free-space is not a good idea, also.

Upvotes: 0

Related Questions