Skip to content
Advertisement

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;
}
<!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>
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement