Example 1: Navbar without Bootstrap (Vanilla HTML CSS)
<!DOCTYPE html> <html> <head> <title>Navbar BAJARANGI SOFT</title> <style> body { margin: 0; } nav { width: 100%; } ul { margin: 0; padding: 0; } li { float: left; margin: 0; padding-top: 10px; padding-bottom: 10px; font-size: 30px; width: 12%; list-style: none; text-align: center; } a { color: rgb(0, 29, 102); text-decoration: none; } img { width: 30%; } #image { width: 24%; } #blankSpace { width: 16%; height: 34px; } </style> </head> <body> <nav> <ul> <li id="image"> <img src= "logo.jpg" alt="" /></li> <li><a href="">Tutorials</a></li> <li><a href="">Students</a></li> <li><a href="">Courses</a></li> <li id="blankSpace"><a href=""></a></li> <li><a href="">Hire with us!</a></li> <li><a href="">Login</a></li> </ul> </nav> </body> </html>
Explanations:
HTML:
CSS:
<!DOCTYPE html> <html> <head> <title>bootstrapNavbar BAJARANGI SOFT</title> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity= "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" /> <style> div { text-align: center; } img { width: 80%; } .btn { font-size: 25px; color: rgb(0, 102, 0); } </style> </head> <body> <div class="row"> <div class="col-3"> <img src= "logo.jpg" alt="" /> </div> <div class="col-4 row"> <div class="col-4"> <a href="#" class="btn">Tutorials</a> </div> <div class="col-4"> <a href="#" class="btn">Students</a> </div> <div class="col-4"> <a href="#" class="btn">Courses</a> </div> </div> <div class="col-2 row"></div> <div class="col-3 row"> <div class="col-8"> <a href="#" class="btn">Hire with us!</a> </div> <div class="col-4"> <a href="#" class="btn">Login</a> </div> </div> </div> </body> </html>
Explanations: As we are aiming for a static navbar without any JavaScript, it will be feasible to use grid instead of a nav.
CSS: