Bootstrap CSS positioning

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;
}

JavaScript
​x
 
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>

JavaScript
 
<!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>
​

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;
    }

JavaScript
 
    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>

JavaScript
 
<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>

Advertisement

Answer