Making my "title" text show up on the navbar-CodePudding

I am currently making my first mockup website, fiddled around with making a navbar and having a logo on it. I've managed to do it, but now when I try to add the 'name' onto the navbar it won't show up.

body {
  margin: 0;
  padding: 0;
}

.logo {
  float: left;
  height: 60px;
}


/* ~~ Top Navigation Bar ~~ */

#navigation-container {
  width: auto;
  margin: 0 auto;
  height: 70px;
}

.navigation-bar {
  background-color: #333;
  height: 70px;
  width: 100%;
  text-align: center;
}

.navigation-bar img {
  float: left;
}

.navigation-bar ul {
  float: right;
  padding: 0px;
  margin: 0px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.navigation-bar li {
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
  border-right: 1px solid #bbb;
}

.navigation-bar li:last-child {
  border-right: none;
}

.navigation-bar li a {
  color: whitesmoke;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 0.7;
}

.navigation-bar title {
  color: red;
}

#menu {
  float: right;
}

<!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.0">
  <link rel="stylesheet" href="/css/style.css">
  <title>The Fox Den</title>
</head>

<body>

  <!-- logo -->
  <img  src="images/logo.png">

  <!-- buttons -->
  <div >
    <div id=navigation-container>
      <h1 >The<span>Coffee</span>shop</h1>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>

      </ul>
    </div>
  </div>


  <!-- end of buttons -->

</body>

</html>

I've tried moving the text around to different places, but it ends up moving the navbar to be under the text.

CodePudding user response：

You have set .navigation-bar ul to be float: right. float removes items from the normal flow of the page, which is why it is leaving your navbar.

You can fix this using flexbox, by adding the following rules to .navigation-bar ul:

.navigation-bar ul{
  ...
  display: flex;
  justify-content: right;
}

Here are some extra observations on your code, that are unrelated to the main problem

There are several places where you have hardcoded the height of the navbar - this could instead be replaced with a CSS variable - i.e.

:root{
  --navbar-height: 70px;
}

.logo {
  height: calc(var(--navbar-height) - 10px);
}

#navigation-container {
  height: var(--navbar-height);
}

.navigation-bar {
  height: var(--navbar-height);
}

/* etc */

You should try to avoid pixel units where possible as these are not responsive - instead, the preferred unit is rems.

However, in this case I don't actually think you need to set the height - the content inside (i.e. the header, logo and navbar) should instead make the header resize. This is particularly important for responsive pages.

Adapted code:

body {
  margin: 0;
  padding: 0;
}

.logo {
  float: left;
  height: 60px;
}


/* ~~ Top Navigation Bar ~~ */

#navigation-container {
  width: auto;
  margin: 0 auto;
}

.navigation-bar {
  background-color: #333;
  width: 100%;
  text-align: center;
}

.navigation-bar img {
  float: left;
}

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  display: flex;
  justify-content: right;
}

.navigation-bar li {
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
  border-right: 1px solid #bbb;
}

.navigation-bar li:last-child {
  border-right: none;
}

.navigation-bar li a {
  color: whitesmoke;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  padding: 5px 15px;
  opacity: 0.7;
}

.navigation-bar title {
  color: red;
}

#menu {
  float: right;
}

<!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.0">
  <link rel="stylesheet" href="/css/style.css">
  <title>The Fox Den</title>
</head>

<body>

  <!-- logo -->
  <img  src="images/logo.png">

  <!-- buttons -->
  <div >
    <div id=navigation-container>
      <h1 >The<span>Coffee</span>shop</h1>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>

      </ul>
    </div>
  </div>


  <!-- end of buttons -->

</body>

</html>