html - Trying to make my Fix nav bar with containt on the left, a white box and it doesn't work? -


please need help. i'm noobie in programming , i'm trying solve problem.

i trying make nav bar letter in hex color #66cd00, positioned right , fixed. white block around follows navbar. when try either background-color white doesn't cover whole nav bar, or "home, works, about" section end going left , doesn't stick position want; in right.

another problem "home, works, about" part, scroll down page, gets behind of pictures put. if can me appreciate much.

sorry ask much. tried hard , got stuck.

can please me solve puzzle? know seems silly, haven't found exact answer anywhere. help. code , link codepen follows below.

link code pen: https://codepen.io/jt_cerqueira/full/yxolxg/ (to visualize code click change view editor view.)

css , html

/*==== nav bar css goes below ==== */    .container {    margin: 0;    width: 80%;  }    header {    color: #ffffff;  }    header::after {content: '';                 display: table;                 clear: both;  }    nav {    position: fixed;    right: 7%;    top: 0;  }    nav ul {margin: 0;          padding: 0;          list-style: none;  }    nav li {display: inline-block;          margin-left: 70px;          padding-top: 50px;          position: relative;  }    nav ul li {    color: #66cd00;    text-decoration: none;    font-size: 18px;  }    nav a:hover {    color: #78ab46;  }    nav a::before {    content: "";    display: block;    height: 5px;    background-color: #444;        position: absolute;    top: o;    width: 0%;        transition: ease-in-out 250ms;      }    nav a:hover::before {    width: 100%;  }
<header>     <div class="container">      <nav>         <ul>          <li><a href ="#home">home<a></li>          <li><a href ="#works">works<a></li>          <li><a href ="#about">about<a></li>        </ul>       </nav>    </div>     </header>

also if willing contribute in means willing remake navbar or other sources , start scratch.

thank you.

just change these 2 classes

`

.container {   margin: 0;   padding: 0px;   width: 100%; } nav {   position: fixed;   margin:0;   padding:0;   width:100%;   background-color:white;   z-index:99; } 

`


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -