Place An Image Inside Navbar Using HTML And CSS


Its features:

  • It is completly responsive.

  • You can change the model color via CSS if you want.

  • You can add a link to the name of each menu.

  • The left side back image has a length of 300 pixels and a width of 100 pixels.

Try to create like yourself by following the codes below :

Step 1) Add to head :
<meta name="viewport" content="width=device-width, initial-scale=1">
Step 2) Add to html :
<h2>Create Responsive Simple Footer With HTML And CSS</h2> <header> <div class="header"> <div class="container"> <img src="g01.png" alt="Snow"> <div class="centered"></div> </div> <div class="header-right"> <a class="active" href="#home">Resister</a> <a href="#contact">log in</a> </div> </div> </header>
Step 3) Add to css :
.header { width:100%; height:auto; overflow: hidden; background-color: #f1f1f1; border-bottom:5px solid green; } .container { position: relative; text-align: center; color: white; float:left; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:50px; color:blue; } .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: 50px; } .header a:hover { background-color: #ddd; color: black; } .header { background-color:#0aa93b; color: white; } .header-right { float: right; margin-right:15px; margin-top:20px; }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.