0

Before I posted anyone question, and I got some criticism, so I'm trying to format a better question now. Yeah. So, I'm making a website, and I have a header for navigation. However, in CSS, I put the header with div class = "header" to color:black;. I don't know why the background isn't black and is not there. I made a jsfiddle. As you can see when you go on the jsfiddle , the header is non-existent, and when you scroll down, as you can see, the header is not white. Does anyone know how to make the header solid, or is there inconsistencies in the hierarchy?

.header {
  position:relative;
  top:-20px;
  left:0px;
  width:100%;
  background-color:#000000;
  border-left: 5px solid white;
}
.header ul li a {
  color: black;
  position: fixed;
  top: 13px;
  font-weight: bold;
  text-decoration: none;
  //background: #000000;
}
ul {
  list-style-type: none;
}
a#strawpoll {
  right: 215px;
}
a#previousblogs {
  right: 95px;
}
a#aboutme {
  right: 15px;
}
h1 {
  text-align: left;
  position: fixed;
  left: 10px;
  top: -10px;
  color: black;
}
body {
  position: relative;
  top: 60px;
  font-family: 'Raleway', sans-serif;
  background-image:
  //url('https://cms-images.idgesg.net/images/article/2015/11/black-100630491-orig.jpg');
  background-size: cover;
  color: white;
  text-align: center;
  color: black;
}
a:link {
  color: black;
  text-decoration: none;
}
.header a:hover {
 text-decoration: underline; 
}
a:visited {
  color: black;
  text-decoration: none;
}
<title>My Blog</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="blog.css">
        <link rel="icon" href="http://images4.fanpop.com/image/photos/22600000/Smiley-Face-smiley-faces-22608094-1000-1000.png">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
    <body>
<div class="header">
<div class = "navbar">
  <ul>
        <li><a id = "strawpoll" href ="#"> Strawpoll </a></li>
        <li><a id = "previousblogs" href ="#"> Previous Blogs </a></li>
        <li><a id = "aboutme" href ="#"> About Me </a></li>
  </ul>
</div>
 <script src="app.js"></script>
 <h1><a href ="#">My Life</a></h1>
</div>
<p>
texttext, yeah, I put this here to increase the page length, so that I can show you guys the header is not filled in. starting from here its all reandom stuff.
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
<p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p>
</p><p>
bopbopbopbopbopbopbob
</p>
sapodksadksa
daa
</p>

Here is the jsfiddle

Add in the comments if I'm unclear. Hopefully I am.

Cookie Ninja
  • 1,156
  • 15
  • 29
RareKyurem
  • 11
  • 2

3 Answers3

0

You should add overflow:hidden on your .header

You should read this SO post for a better explanation on why that works.

Community
  • 1
  • 1
VilleKoo
  • 2,827
  • 2
  • 14
  • 23
0

Your CSS needs to be adjusted, and I also think that the .header class is used in the jquery.menu.css already so I changed to .header1

Below is a working example. Not sure if this is what you want to have.

.header1 {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #000000;
  border-left: 5px solid white;
  height: 100px;
}
.header1 ul {
  float: right;
  margin-right: 20px;
  list-style-type: none;
  margin-top: 5px;
}
.header1 ul > li {
  display: inline-block !important;
  margin-right: 10px;
}
.header1 ul > li > a {
  font-weight: bold;
}
.header1 > h1 {
  text-align: left;
  margin-left: 20px;
}
.content {
  margin-top: 105px;
}
body {
  position: relative;
  top: 60px;
  font-family: 'Raleway', sans-serif;
  //background-image: url('https://cms-images.idgesg.net/images/article/2015/11/black-100630491-orig.jpg');
  background-size: cover;
  color: white;
  text-align: center;
  color: black;
}
a:link {
  color: white;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: #cccccc;
  text-decoration: none;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
<div class="header1">
  <ul>
    <li><a id="strawpoll" href="#"> Strawpoll </a>
    </li>
    <li><a id="previousblogs" href="#"> Previous Blogs </a>
    </li>
    <li><a id="aboutme" href="#"> About Me </a>
    </li>
  </ul>
  <h1><a href ="#">My Life</a></h1>
</div>
<p class="content">
  texttext, yeah, I put this here to increase the page length, so that I can show you guys the header is not filled in. starting from here its all reandom stuff.
  <p>
    bopbopbopbopbopbopbob
  </p>
  <p>
    bopbopbopbopbopbopbob
  </p>
  <p>
    bopbopbopbopbopbopbob
  </p>
  <p>
    bopbopbopbopbopbopbob
  </p>
  <p>
    bopbopbopbopbopbopbob
  </p>
  <p>
    bopbopbopbopbopbopbob
  </p>
  <p>
    bopbopbopbopbopbopbob
  </p>
  <p>
    bopbopbopbopbopbopbob
  </p>
  <p>
    bopbopbopbopbopbopbob
  </p>
  <p>
    bopbopbopbopbopbopbob
    <p>
      bopbopbopbopbopbopbob
    </p>
    <p>
      bopbopbopbopbopbopbob
    </p>
  </p>
  <p>
    bopbopbopbopbopbopbob
  </p>
  sapodksadksa daa
</p>
Nguyen Tuan Anh
  • 1,036
  • 8
  • 14
0
<html>
<title>My Blog</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="blog.css">
<link rel="icon" href="http://images4.fanpop.com/image/photos/22600000/Smiley-Face-smiley-faces-22608094-1000-1000.png">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
<style>
    body{
        margin: 0;
        padding: 0;
    }
    .header{
        width: 100%;
        position: relative;
    }
    .navbar{
        background: #000;
        width: 100%;
        overflow: hidden;
        position: fixed;
        top:0;
    }
    .navbar h1{
        float: left; 
        padding-left: 20px;
    }
    .navbar h1 a{
        color: #fff;
        text-decoration: none;
    }
    .navbar ul{
        float: right;
        line-height: 45px;
        padding-right: 20px;
    }
    .navbar ul li{
        display: inline-block;
    }
    .navbar ul li a{
        color: #fff;
        padding: 0 10px;
        text-decoration: none;
    }
    .content{
        width: 100%;
        float: left;
        margin-top: 100px;

    }
</style>

<body>
    <div class="header">
        <div class="navbar">
           <h1><a href ="#">My Life</a></h1> 
            <ul>
                <li><a id="strawpoll" href="#"> Strawpoll </a></li>
                <li><a id="previousblogs" href="#"> Previous Blogs </a></li>
                <li><a id="aboutme" href="#"> About Me </a></li>
            </ul>
        </div>
    </div>
      <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus totam ipsum laudantium laborum doloremque doloribus quas incidunt unde reprehenderit at, modi cum repellendus accusantium ea corrupti, magni ut provident dicta!Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
      </div>


</body>
</html>
Jaydeep Kaila
  • 17
  • 3