jquery - How to stop navigation bar from blocking page -

this question has answer here:

• navbar fixed on top of html page (css / html) 5 answers

last week wrote ask navigation bar creating. began fcc , i'm new.

**problem:**navigate bar seems blocking content , in way of other elements. notice how "this text" blocked. after tons of copying.

i able basic navigation bar working highlight function working. however, bar blocking text seems. want have navigation bar sit on top of screen , scroll down user scroll can click of buttons whenever please.

i have completed html, css, jquery, , bootstrap on fcc. these extremely basic lessons.

https://codepen.io/bomaran/pen/evorpr

here code: css:

/* http://meyerweb.com/eric/tools/css/reset/     v2.0 | 20110126    license: none (public domain) */  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {     margin: 0;     padding: 0;     border: 0;     font-size: 100%;     font: inherit;     vertical-align: baseline; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {     display: block; } body {     line-height: 1; } ol, ul {     list-style: none; } blockquote, q {     quotes: none; } blockquote:before, blockquote:after, q:before, q:after {     content: '';     content: none; } table {     border-collapse: collapse;     border-spacing: 0; }  ul {   list-style-type: none;   margin: 0;   padding: 0;   background-color: black;   /*----fixes nav bar top---*/   position: fixed;   top: 0;  width: 100%;   font-family: sans-serif; }  li {   float: left; } li {   display: block;   color: white;   text-align: center;   padding: 14px 16px;   text-decoration: none; }  /*--drop down buttons--*/ li a, .dropbtn {     display: inline-block;     color: white;     text-align: center;     padding: 14px 16px;     text-decoration: none; }  li a:hover, .dropdown:hover .dropbtn {     background-color: #4caf50; }  li.dropdown {     display: inline-block; }  .dropdown-content {     display: none;     position: absolute;     background-color: #000000;     min-width: 160px;     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);     z-index: 1;   /*how right:0; keep text going off screen?*/   right: 0; }  .dropdown-content {     color: #ffffff;     padding: 12px 16px;     text-decoration: none;     display: block;     text-align: left; }  .dropdown-content a:hover {background-color: #4caf50}  .dropdown:hover .dropdown-content {     display: block; } 

html:

<div class="container-fluid"> <!----nav bar ---->   <ul>     <li><a href="#home">home</a></li>     <li class="dropdown" style="float:right"><a href="#about"  class="dropbtn">about</a>     <div class="dropdown-content">       <a href="#">contact</a>       <a href="#">日本生活</a>     </div>     </li>     <li><a href="#resume">resume</a></li>     <li><a href="#projects">projects</a></li>   </ul> <!---end nav bar----> </div> <!---background images --->  <p> text text text text v v text v v  text text text text text  textthis textthis textthis textthis textthis textthis  textthis textthis textthis textthis textthis textthis  textthis textthis textthis textthis textthis textthis text  </p> 

**goal:**navigation bar needs remain in place user scrolls; user able use navigation bar @ point during time on site. goal (https://codepen.io/freecodecamp/full/yqlyxb)

i believe example page might using more html, css, jquery, , bootstrap. new coding , have no idea doing. goal use languages know now.

use css style:

.navbar {  position: fixed;   z-index: 99999;  }

<div class="navbar">      //your code navbar  </div>   

wiki