CODEWITHSUNDEEP
htmlcss
Firefly
Firefly

Reputation: 428

Cannot get rid of the black bar

There is a black bar on top of the site I couldn't understand where it came from. It doesn't appear if I use float: left to put the navigation bar on the left side instead of display: inline-block to center it. I wanted to make the navigation bar transparent on top of the background rather than the black bar.

Also there is a small space between the 'Home' and other menus that I don't know where it came from too. I'm still new to html and css, please help me. Thanks in advance!

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('space-mono-v4-latin-regular.eot');
  src: local('Space Mono'), local('SpaceMono-Regular'),
       url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('space-mono-v4-latin-regular.woff2') format('woff2'),
       url('space-mono-v4-latin-regular.woff') format('woff'),
       url('space-mono-v4-latin-regular.ttf') format('truetype'),
       url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg');
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Space Mono', monospace;
	background: #000;
}

header {
	padding: 10px 100px;
	box-sizing: border-box;
}

section {
	width: 100%;
	height: 100vh;
}

section.sec1 {
	background: orange;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
}

section.sec2 {
	padding: 100px;
	box-sizing: border-box;
	height: auto;
}

section.sec2 h2 {
	font-size: 3em;
	margin: 0;
	padding: 0 0 20px;
	color: #fff;
}

section.sec2 p {
	font-size: 1.2em;
	margin: 0;
	padding: 0;
	color: #fff;
}

section.sec3 {
    background: url(bg2.jpg);
    background-size: cover;
}

.first-level {
	list-style: none;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: sticky;
	top: 10px;
}

.first-level a {
	text-decoration: none;
	line-height: 40px;
	color: #fff;
}

.first-level li {
	position: relative;
	text-align: center;
	display: inline-block;
	height: 40px;
	width: 160px;
	background: rgba(0,0,0,0.4);
}

.first-level > li:hover {
	background-color: teal;
}

.second-level {
	display: none;
}

.third-level {
	display: none;
}
<!DOCTYPE html>
<html>
    <head>
        <title>NavigationBar</title>
        <link rel="stylesheet" href="newnavbar.css" type="text/css">
    </head>
  <body>

    <ul class ="first-level">
        <li><a href="#">HOME</a></li>
   	    <li><a href="#">LAB 1-5</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 1</a></li>                    
                <li><a href ="#">LAB 2</a></li>                    
                <li><a href ="#">LAB 4</a></li>                    
                <li><a href ="#">LAB 5</a></li>
                    
            </ul>
	      <li><a href="#">LAB 6-8</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 6</a></li>                    
                <li><a href ="#">LAB 7</a></li>                   
                <li><a href ="#">LAB 8</a></li>
                    
            </ul>
        <li><a href="#">LAB 9-11</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 9</a></li>                    
                <li><a href ="#">LAB 10</a></li>                    
                <li><a href ="#">LAB 11</a></li>
                    
            </ul>
        <li><a href="#">LAB 12-14</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 12</a></li>                    
                <li><a href ="#">LAB 13</a></li>          
                <li><a href ="#">LAB 14</a></li>
                    
              </ul>
    </ul>


    <section class="sec1"></section>

    <section class="sec2">
      <h2>CSS Sticky Navigation Bar</h2>
      <p>Insert text here.</p>

    </section>

    <section class="sec3"></section>

  </body>
</html>

Upvotes: 0

Views: 60

Answers (3)

Nandita Sharma
Nandita Sharma

Reputation: 13417

Change top: 10px to top :0;

Add display: flex and justify-content: center and background: orange; on .first-level

Remove display: inline-block; from .first-level li

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('space-mono-v4-latin-regular.eot');
  src: local('Space Mono'), local('SpaceMono-Regular'), url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'), url('space-mono-v4-latin-regular.woff2') format('woff2'), url('space-mono-v4-latin-regular.woff') format('woff'), url('space-mono-v4-latin-regular.ttf') format('truetype'), url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg');
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Space Mono', monospace;
  background: #000;
}

header {
  padding: 10px 100px;
  box-sizing: border-box;
}

section {
  width: 100%;
  height: 100vh;
}

section.sec1 {
  background: orange;
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
}

section.sec2 {
  padding: 100px;
  box-sizing: border-box;
  height: auto;
}

section.sec2 h2 {
  font-size: 3em;
  margin: 0;
  padding: 0 0 20px;
  color: #fff;
}

section.sec2 p {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  color: #fff;
}

section.sec3 {
  background: url(bg2.jpg);
  background-size: cover;
}

.first-level {
  list-style: none;
  text-align: center;
  padding: 0px;
  margin: 0px;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  background: orange;
}

.first-level a {
  text-decoration: none;
  line-height: 40px;
  color: #fff;
}

.first-level li {
  position: relative;
  text-align: center;
  height: 40px;
  width: 160px;
  background: rgba(0, 0, 0, 0.4);
}

.first-level>li:hover {
  background-color: teal;
}

.second-level {
  display: none;
}

.third-level {
  display: none;
}
<ul class="first-level">
  <li><a href="#">HOME</a></li>
  <li><a href="#">LAB 1-5</a>
    <ul class="second-level">
      <li><a href="#">LAB 1</a></li>
      <li><a href="#">LAB 2</a></li>
      <li><a href="#">LAB 4</a></li>
      <li><a href="#">LAB 5</a></li>

    </ul>
    <li><a href="#">LAB 6-8</a>
      <ul class="second-level">
        <li><a href="#">LAB 6</a></li>
        <li><a href="#">LAB 7</a></li>
        <li><a href="#">LAB 8</a></li>

      </ul>
      <li><a href="#">LAB 9-11</a>
        <ul class="second-level">
          <li><a href="#">LAB 9</a></li>
          <li><a href="#">LAB 10</a></li>
          <li><a href="#">LAB 11</a></li>

        </ul>
        <li><a href="#">LAB 12-14</a>
          <ul class="second-level">
            <li><a href="#">LAB 12</a></li>
            <li><a href="#">LAB 13</a></li>
            <li><a href="#">LAB 14</a></li>

          </ul>
</ul>


<section class="sec1"></section>

<section class="sec2">
  <h2>CSS Sticky Navigation Bar</h2>
  <p>Insert text here.</p>

</section>

<section class="sec3"></section>

Upvotes: 1

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Change background-color of first-level because its position:sticky so applying css of body and top:0px; and remove space between li element font-size:0px to first-level and five font-size to first-level li

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('space-mono-v4-latin-regular.eot');
  src: local('Space Mono'), local('SpaceMono-Regular'),
       url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('space-mono-v4-latin-regular.woff2') format('woff2'),
       url('space-mono-v4-latin-regular.woff') format('woff'),
       url('space-mono-v4-latin-regular.ttf') format('truetype'),
       url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg');
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Space Mono', monospace;
	background: #000;
}

header {
	padding: 10px 100px;
	box-sizing: border-box;
}

section {
	width: 100%;
	height: 100vh;
}

section.sec1 {
	background: orange;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
}

section.sec2 {
	padding: 100px;
	box-sizing: border-box;
	height: auto;
}

section.sec2 h2 {
	font-size: 3em;
	margin: 0;
	padding: 0 0 20px;
	color: #fff;
}

section.sec2 p {
	font-size: 1.2em;
	margin: 0;
	padding: 0;
	color: #fff;
}

section.sec3 {
    background: url(bg2.jpg);
    background-size: cover;
}

.first-level {
	list-style: none;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: sticky;
	top: 0px;
  background:orange;
  font-size:0px;
}

.first-level a {
	text-decoration: none;
	line-height: 40px;
	color: #fff;
}

.first-level li {
	position: relative;
	text-align: center;
	display: inline-block;
	height: 40px;
	width: 160px;
	background: rgba(0,0,0,0.4);
  font-size:12px;
}

.first-level > li:hover {
	background-color: teal;
}

.second-level {
	display: none;
}

.third-level {
	display: none;
}
<!DOCTYPE html>
<html>
    <head>
        <title>NavigationBar</title>
        <link rel="stylesheet" href="newnavbar.css" type="text/css">
    </head>
  <body>

    <ul class ="first-level">
        <li><a href="#">HOME</a></li>
   	    <li><a href="#">LAB 1-5</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 1</a></li>                    
                <li><a href ="#">LAB 2</a></li>                    
                <li><a href ="#">LAB 4</a></li>                    
                <li><a href ="#">LAB 5</a></li>
                    
            </ul>
	      <li><a href="#">LAB 6-8</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 6</a></li>                    
                <li><a href ="#">LAB 7</a></li>                   
                <li><a href ="#">LAB 8</a></li>
                    
            </ul>
        <li><a href="#">LAB 9-11</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 9</a></li>                    
                <li><a href ="#">LAB 10</a></li>                    
                <li><a href ="#">LAB 11</a></li>
                    
            </ul>
        <li><a href="#">LAB 12-14</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 12</a></li>                    
                <li><a href ="#">LAB 13</a></li>          
                <li><a href ="#">LAB 14</a></li>
                    
              </ul>
    </ul>


    <section class="sec1"></section>

    <section class="sec2">
      <h2>CSS Sticky Navigation Bar</h2>
      <p>Insert text here.</p>

    </section>

    <section class="sec3"></section>

  </body>
</html>

Upvotes: 1

ellipsis
ellipsis

Reputation: 12152

Increase the padding of the first-level ul. It will hide the overflowing buttons

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('space-mono-v4-latin-regular.eot');
  src: local('Space Mono'), local('SpaceMono-Regular'),
       url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('space-mono-v4-latin-regular.woff2') format('woff2'),
       url('space-mono-v4-latin-regular.woff') format('woff'),
       url('space-mono-v4-latin-regular.ttf') format('truetype'),
       url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg');
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Space Mono', monospace;
	background: #000;
}

header {
	padding: 10px 100px;
	box-sizing: border-box;
}

section {
	width: 100%;
	height: 100vh;
}

section.sec1 {
	background: orange;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
}

section.sec2 {
	padding: 100px;
	box-sizing: border-box;
	height: auto;
}

section.sec2 h2 {
	font-size: 3em;
	margin: 0;
	padding: 0 0 20px;
	color: #fff;
}

section.sec2 p {
	font-size: 1.2em;
	margin: 0;
	padding: 0;
	color: #fff;
}

section.sec3 {
    background: url(bg2.jpg);
    background-size: cover;
}

.first-level {
	list-style: none;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: sticky;
	top: 10px;
  padding:12px;
}

.first-level a {
	text-decoration: none;
	line-height: 40px;
	color: #fff;
}

.first-level li {
	position: relative;
	text-align: center;
	display: inline-block;
	height: 40px;
	width: 160px;
	background: rgba(0,0,0,0.4);
  
}

.first-level > li:hover {
	background-color: teal;
  
}

.second-level {
	display: none;
  
}

.third-level {
	display: none;
}
<!DOCTYPE html>
<html>
    <head>
        <title>NavigationBar</title>
        <link rel="stylesheet" href="newnavbar.css" type="text/css">
    </head>
  <body>

    <ul class ="first-level">
        <li><a href="#">HOME</a></li>
   	    <li><a href="#">LAB 1-5</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 1</a></li>                    
                <li><a href ="#">LAB 2</a></li>                    
                <li><a href ="#">LAB 4</a></li>                    
                <li><a href ="#">LAB 5</a></li>
                    
            </ul>
	      <li><a href="#">LAB 6-8</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 6</a></li>                    
                <li><a href ="#">LAB 7</a></li>                   
                <li><a href ="#">LAB 8</a></li>
                    
            </ul>
        <li><a href="#">LAB 9-11</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 9</a></li>                    
                <li><a href ="#">LAB 10</a></li>                    
                <li><a href ="#">LAB 11</a></li>
                    
            </ul>
        <li><a href="#">LAB 12-14</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 12</a></li>                    
                <li><a href ="#">LAB 13</a></li>          
                <li><a href ="#">LAB 14</a></li>
                    
              </ul>
    </ul>


    <section class="sec1"></section>

    <section class="sec2">
      <h2>CSS Sticky Navigation Bar</h2>
      <p>Insert text here.</p>

    </section>

    <section class="sec3"></section>

  </body>
</html>

Upvotes: 1

Related Questions