CODEWITHSUNDEEP
css
Jamie Belcher
Jamie Belcher

Reputation: 123

Navigation Bar Height and Functionality

So I'm looking at creating a navigation bar that'll sit at the top of my webpage and stick to it no matter where I scroll, but it always gets caught and disappears as I scroll away?

Not only that, but this is what happens when I hover over it:

Nav-Bar

Is it possible to also only have the darker background fill the actual black bar it sits inside?

This is the snippet from my style sheet as well:

body {
    background-color: #ecf0f1;
    margin: 0;
    font-family: Arial;
}
header {
    background-color: #333;
}

.navbar {
    height: 5%;
    overflow: auto;
    margin: auto;
    width: auto;
    min-height: 60px;
    top: 0;
    text-align: center;
}

.title {
    display: block;
}

.navbar ul {
    list-style-type: none;
    position: fixed;
    top: 0;
    padding: 0;
    overflow: hidden;
}

.navbar li {
    display: inline-block;
}

.navbar li a {
    padding: 25px;
    display: block;
    height: 100%;
    color: white;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
    background-color: #111;
}

All help is greatly appreciated! First time playing around with CSS!

EDIT:

Here is the snippet of HTML that creates this header

<link rel="stylesheet" type="text/css" href="style/style.css">

    <header>
        <div class="navbar">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#news">About Us</a></li>
                <li><a href="#contact">Contracts</a></li>
                <li><a href="#about">Other</a></li>
            </ul>
        </div>
    </header>

Upvotes: 2

Views: 4236

Answers (1)

Paulie_D
Paulie_D

Reputation: 115045

Fix the header...not the navbar or the menu.

body {
  background-color: #ecf0f1;
  margin: 0;
  font-family: Arial;
}
header {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}
.navbar {} .title {
  display: block;
}
.navbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.navbar li {
  display: inline-block;
}
.navbar li a {
  padding: 25px;
  display: block;
  height: 100%;
  color: white;
  text-decoration: none;
}
/* Change the link color to #111 (black) on hover */

.navbar li a:hover {
  background-color: #111;
}
body {
  height: 2000px; /* so you can see the header NOT moving */
}
<header>
  <div class="navbar">
    <ul>
      <li class="hvr-underline"><a href="#home">Home</a>
      </li>
      <li><a href="#news">About Us</a>
      </li>
      <li><a href="#contact">Contracts</a>
      </li>
      <li><a href="#about">Other</a>
      </li>
    </ul>
  </div>
</header>

Upvotes: 4

Related Questions