How To Create Pill Navigation Menu Using CSS And HTML

Posted By Bajarangi soft , Posted On 27-11-2020

we can create pill navigation menu using css and html ,so today we discuss how to do it.

How To Create Pill Navigation Menu Using CSS And HTML

Complete Code For Creating Pill Navigation Menu Using CSS And HTML.

<!DOCTYPE html>
<html>
<head>
    <title>How To Create Pill Navigation Menu Using CSS And HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    .pill-nav a {
        display: inline-block;
        color: black;
        text-align: center;
        padding: 14px;
        text-decoration: none;
        font-size: 17px;
        border-radius: 5px;
    }

    .pill-nav a:hover {
        background-color: #ddd;
        color: black;
    }

    .pill-nav a.active {
        background-color: dodgerblue;
        color: white;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: black;">Create Pill Navigation Menu Using CSS And HTML</h1>
    </div>
    <div class="well">
        <div class="pill-nav">
            <a class="active" href="#home">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </div>
    </div>
</div>
</body>
</html>