How to make a nav bar in html?

1 Answer

Relevance
  • 1 month ago

    **Responsive Navigation Bar**

    <!DOCTYPE html>

    <html>

    <head>

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

    <style>

    body {margin: 0;}

    ul.sidenav

    {

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 25%;

    background-color: #f1f1f1;

    position: fixed;

    height: 100%;

    overflow: auto;

    }

    ul.sidenav li a {

    display: block;

    color: #000;

    padding: 8px 16px;

    text-decoration: none;

    }

    ul.sidenav li a.active

    {

    background-color: #4CAF50;

    color: white;

    }

    ul.sidenav li a:hover:not(.active)

    {

    background-color: #555;

    color: white;

    }

    div.content

    {

    margin-left: 25%;

    padding: 1px 16px;

    height: 1000px;

    }

    @media screen and (max-width: 900px)

    {

    ul.sidenav {

    width: 100%;

    height: auto;

    position: relative;

    }

    ul.sidenav li a

    {

    float: left;

    padding: 15px;

    }

    div.content {margin-left: 0;}

    }

    @media screen and (max-width: 400px)

    {

    ul.sidenav li a {

    text-align: center;

    float: none;

    }

    }

    </style>

    </head>

    <body>

    <ul class="sidenav">

    <li><a class="active" href="#home">Home</a></li>

    <li><a href="#news">News</a></li>

    <li><a href="#contact">Contact</a></li>

    <li><a href="#about">About</a></li>

    </ul>

    • Commenter avatarLogin to reply the answers
Still have questions? Get your answers by asking now.