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>