How To Create Responsive Header Using CSS And HTML

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

we can create responsive header using css and html.how to do it.

How To Create Responsive Header Using CSS And HTML

Complete Code For Creating Responsive Header Using CSS And HTML.

<!DOCTYPE html>
<html>
<head>
    <title>How To Create Responsive Header 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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    * {box-sizing: border-box;}

    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }

    .header {
        overflow: hidden;
        background-color: #f1f1f1;
        padding: 20px 10px;
    }

    .header a {
        float: left;
        color: black;
        text-align: center;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        line-height: 25px;
        border-radius: 4px;
    }

    .header a.logo {
        font-size: 25px;
        font-weight: bold;
    }

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

    .header a.active {
        background-color: green;
        color: white;
    }

    .header-right {
        float: right;
    }

    @media screen and (max-width: 500px) {
        .header a {
            float: none;
            display: block;
            text-align: left;
        }

        .header-right {
            float: none;
        }
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: black;">Create Responsive Header Using CSS And HTML</h1>
    </div>
    <div class="well">
        <div class="header">
            <a href="#default" class="logo">Logo</a>
            <div class="header-right">
                <a class="active" href="#home">Home</a>
                <a href="#contact">Contact</a>
                <a href="#about">About</a>
            </div>
        </div>

        <div style="padding-left:20px">
            <h1>Responsive Header</h1>
            <p>Resize the browser window to see the effect.</p>
            <p>Some content..</p>
        </div>
    </div>
</div>
</body>
</html>

Related Post