In this example you will learn, how to create a responsive header with CSS. Following is the code to create a responsive header with CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box;} nav { overflow: hidden; background-color: #330b7c; padding: 10px; } .links { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; float: left; color:white; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px; border-radius: 4px; } nav .logo { font-size: 25px; font-weight: bold; } nav .links:hover { background-color: rgb(214, 238, 77); color: rgb(42, 10, 94); } nav .selected { background-color: dodgerblue; color: white; } .rightSection { float: right; } @media screen and (max-width: 870px) { nav .links { float: none; display: block; text-align: left; } .rightSection { float: none; } } </style> </head> <body> <nav> <a class="links logo" href="#">Company Logo/Image</a> <div class="rightSection"> <a class="selected links" href="h">Home</a> <a class="links" href="#">Contact Us</a> <a class="links" href="#">About Us</a> <a class="links" href="#">More Info</a> <a class="links" href="#">Register</a> </nav> </body> </html> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
