Высота и функциональность навигационной панели

Question

Итак, я ищу создание навигационной панели, которая будет сидеть в верхней части моей веб-страницы и придерживаться ее независимо от того, где я прокручиваю, но она всегда попадает и исчезает, когда я прокручиваю прочь?

Не только это, но это то, что происходит, когда я зависать над ним:

Можно также только темнее фона заполнить фактическую черную полосу он сидит внутри?

Это фрагмент из моей таблицы стилей, а также:

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; 
} 

Вся помощь очень ценится! Первый раз, играя с CSS!

EDIT:

Вот фрагмент HTML, который создает этот заголовок

<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> 

Answer 1

исправить заголовок ... не Navbar или меню.

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>