Why is my Nav bar hiding the text behind it?

HTML-CSS
1 
ul {
  list-style-type:none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float:left;

}

li a{
  display: block;
  color: white;
  text-align: center;
  padding:14px 16px;
  background-color:#333;
  text-decoration:none;
  
}
li a:hover:not(.active) {
  background-color: #578;
  color:white;
}

.active{
  background-color:#333;
}

li:last-child {
  border-right:none;
}
img{
  width:100%;
  height:400px;
  border-radius:8px;
}
2

Freecode camp isn’t allowing me to post the html, because new users can’t post more than two links.

3

Can’t really tell what’s going on without the html. Try using z-index.

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

1 Like
5

can you use https://codepen.io/ and post a link?
Try using three backticks to create a code block then put your code in it.

" ``` "
code goes here

" ``` "
backticks without quotes and spaces.

<html>
 <body>
</body>
</html>
1 Like
6 
<html>
 <head>
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
 </head>
 <body>
    <ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#contact">Contact</a></li>
   <li><a href="#News">News</a>
   <li style="float:right"><a class="active" href="#about">About</a></li>
   </ul>
   <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <img id="landscape" src="https://photos-6.dropbox.com/t/2/AAArSf6Oz8vUcG0aSdxjx8bCQiR2l_Jf2Kryy83fjkd76Q/12/602265211/jpeg/32x32/1/_/1/2/Penninsula%20View.JPG/EOfCge4EGOcGIAIoAg/xfwXlpdthRtJGw9VlOvoo13bETIWaAryJPms3AkiWEw?size=2048x1536&size_mode=3" alt="penninsula">
        </div>
    </div>     
  </div>
 </body>
  
</html>

I tried what you suggested with the z-index and was able to move the image from under the navigation bar. I’m not sure if the code is “clean” but that’s the codee ^

7

You’re using Bootstrap, so can try its nav class.

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
   <div class="navbar-header">                       <-- This is optional -->
    <a class="navbar-brand" href="#" id="mybrand">Your brand Name here </a>
  </div>

 <ul class="nav navbar-nav navbar-right list-inline" id="aboutbar">
     
     <li class="active"><a href="#home">Home</a></li>
     <li><a href="#contact">Contact</a></li>
     <li><a href="#news">News</a></li>
     <li style="float:right"><a class="active" href="#about">About</a></li>
   
  </ul>
  </div>
</nav>
8

I got it to work by adjusting the margin. Thanks, now I know next time I could use Bootstrap to make the navigation bar, much appreciated.