css make navbar on top

* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 1200px; font-size: 18px; font-family: sans-serif; color: #5D6063; } a:link, a:visited { color: #5D6063; text-decoration: none; } a:hover { text-decoration: underline; } .header { position: fixed; display: flex; justify-content: space-between; width: 100%; padding: 50px; background: #D6E9FE; }

html navigation bar

<!--Method 1: Using HTML5 Nav Tag-->
<nav>
	Thing1 |
  	Thing2 |
  	Thing3
</nav>

<!--Method 2: HTML5 + CSS3 with DIV element-->

<ul class="topnav">
  <li><a class="active" href="#">Thing 1</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li class="right" ><a href="#">Thing 2</a></li>
</ul>
<style>
	
  ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-family: arial;
    text-align: left;
    width: 100%;
    position: sticky;
    top: 0;
  }
  ul.topnav li {float: left;}
  ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    float: left;
    font-size: 17px;
    border-right: 1px solid #bbb;
  }
  ul.topnav li a:hover:not(.active) {
      background-color: #ddd;
      color: black;
  }
  ul.topnav li a.active {
      background-color: #4CAF50;
  }
  ul.topnav li.right {
      float: right;
  }
  @media screen and (max-width: 720px) {
    ul.topnav li{
        width: 100%;
    }
    ul.topnav a{
        width: 100%;
    }
  }
</style>

Posted by: Guest on January-03-2021

Code answers related to "css make navbar on top"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "css make navbar on top"

Code answers related to "css make navbar on top"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us