feture

Use CSS and make (Responsive Nav bar)

This is CSS variable sheet(Flex-direction: column)

.manu18{

    background-color: lightseagreen;

    display: flex;

    justify-content: flex-end;

    padding: 15px;

    background-size: 100%;

}

.manu18 a{

    padding-right: 50px;

    color: black;

    text-align: center;

   font-size: 15px;

   margin-left: 2px;

   width: 50px;

   height: 30px;

   justify-content: center;

}

.manu18 a:hover{

     background-color: gray;

     color: white;

   

}

@media screen and (max-width:600px){

    .manu18{

        flex-direction: column;

        padding: 10px;

       

    }

    .manu18 a{

        background-color: indigo;

        margin: 10px 0;

        text-align: center;

        border-radius: 5px;

        text-align: left;

        width: 240px;

        color: white;

        justify-content: center;

    }

}

This is HTML sheet

 <!-- responsive Nav bar  -->

            <div class="manu18">

                <a href="#">Home</a>

                <a href="#">Python</a>

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

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

                <a href="#">Help</a>

            </div>