Header background color not displaying

Question

This is the HTML for the navbar I was trying to create , header has been set to have a background color of white and lack for its text color but still won't take any effect when the code is being run.

body {
  margin: 0;
  padding: 0;
  background-color: #999;
}

.head {
  background-color: #fff;
}

.head #logo {
  margin: 0;
  padding: 0;
  float: left;
}

.head .menu {
  clear: none;
  padding: 0;
  float: right;
  margin: 0;
  list-style: none;
}

.head .menu a {
  text-decoration: none;
  color: black;
  padding: 10px 0px 0px 5px;
}

.head .menu li {
  float: left;
}

.head .menu a:hover {
  background-color: #bbb;
}

<head>
  <title>Page Title</title>
</head>

<body>
  <header class="head">
    <h1 id="logo">CORP</h1>
    <ul class="menu">
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </header>
</body>

For some reason, it doesn't display the header background color. What could I have done wrong?

score 1 · Accepted Answer · answered May 02 '20 at 07:27

Since you are using float property while styling, you need to use clear after the floated items. You can use a generic class (such as .clearfix) for this issue:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Then just put clearfix class to the container of floated elements

body {
  margin: 0;
  padding: 0;
  background-color: #999;
}

.head {
  background-color: #fff;
}

.head #logo {
  margin: 0;
  padding: 0;
  float: left;
}

.head .menu {
  clear: none;
  padding: 0;
  float: right;
  margin: 0;
  list-style: none;
}

.head .menu a {
  text-decoration: none;
  color: black;
  padding: 10px 0px 0px 5px;
}

.head .menu li {
  float: left;
}

.head .menu a:hover {
  background-color: #bbb;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

<head>
  <title>Page Title</title>
</head>

<body>
  <header class="head clearfix">
    <h1 id="logo">CORP</h1>
    <ul class="menu">
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </header>
</body>

Further reading: https://www.w3schools.com/howto/howto_css_clearfix.asp

Thanks so much Harun, it worked like magic. One more question, is it compulsory to always put hyperlinks in a
? — Solomon, May 02 '20 at 10:49
You're welcome. Glad to hear it helped :) It is not required to wrap anchor tags with a `
`. It depends on your needs. You can style the anchor tags to display them the same as well. — Harun Yilmaz, May 02 '20 at 10:58
I want to be as great as you are, is there any room for mentorship? I already know the basics and advanced css but trying to move to js by 2nd week of this month. — Solomon, May 02 '20 at 16:49
Thank you, I appreciate that :) The key is to practice a lot, to confront as many problems as possible during the learning, imho. You can follow video courses like the ones in Udemy or tips/tricks articles like the ones in Medium depending on your needs. I'm sure the folk in SO will always help when/if you stuck. Enjoy the journey :) — Harun Yilmaz, May 02 '20 at 18:08

Header background color not displaying

1 Answers1