The words or text below the logo in the navbar are not moving to the right of the logo (for reference link to the page -> http://127.0.0.1:5500/index.html).
Additionally the logo is not shifting to its left – it’s happening in basically all the navbar codes. I’m trying to do this using CSS bootstrap. Any explanation would be very helpful since I have recently started learning bootstrap CSS.
body { font-size: 16px; color: #fff; background-color: #F5EEE0; font-family: 'Oxygen', sans-serif; } /** HEADER **/ #header-nav { background-color: #AE7F60; border-radius: 0; border: 0; } #logo-img { background: url('../images/coffee-shop-logo_large.png') no-repeat; width: 150px; height: 150px; margin: 10px 15px 10px 0; } .navbar-brand { padding-top: 25px; } .navbar-brand h1{ /*Resturant name */ object-position: right; font-family: 'Lora', sans-serif; color: #B35840; font-size: 1.5cm; text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 1px #222; margin-top: 0; margin-bottom: 0; line-height: .75; } .navbar-brand a:hover, .navbar-brand a:focus{ text-decoration: none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>coffee cafe</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> </head> <body> <header> <nav id="header-nav" class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="index.html" class="pull-left visble-md visible-lg "> <div id="logo-img" alt="Logo image"></div> </a> <div class="navar-brand"> <a href="index.html"><h1>Coffee Place</h1></a> </div> </div> </nav> </header> <!-- jQuery (Bootstrap JS plugins depend on it) --> <script src="js/jquery-3.6.0.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script> </body> </html>
Advertisement
Answer
You need to add .d-flex
in div.navbar-header
.
also add a little margin in you h1
to make it vertically align with the logo or you can also you vertical-align
property.
I’ve also closed the unclosed container div.
body { font-size: 16px; color: #fff; background-color: #F5EEE0; font-family: 'Oxygen', sans-serif; } /** HEADER **/ #header-nav { background-color: #AE7F60; border-radius: 0; border: 0; } #logo-img { background: url('https://www.svgrepo.com/show/15418/coffee-cup.svg') no-repeat; width: 50px; height: 50px; margin: 10px 15px 10px 0; } .navbar-brand { padding-top: 25px; } .navbar-brand h1 { /*Resturant name */ object-position: right; font-family: 'Lora', sans-serif; color: #B35840; font-size: 1.5cm; text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 1px #222; margin-top: 0; margin-bottom: 0; line-height: .75; } .navbar-brand a:hover, .navbar-brand a:focus { text-decoration: none; }
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> <header> <nav id="header-nav" class="navbar navbar-default"> <div class="container"> <div class="d-flex navbar-header"> <a href="index.html" class="pull-left visble-md visible-lg"> <div id="logo-img" alt="Logo image"></div> </a> <div class="navar-brand"> <a href="index.html"><h1 class="mt-3">Coffee Place</h1></a> </div> </div> </div> </nav> </header>