Cum faci meniul sa se suie acolo in bara de sus a browserului ?

[Che]

Va dau acest site ca exemplu:

Medical News Today: The Latest Health News

Cand dati scrol catre josul paginii, observati ca meniul ala albastru se pozitioneaza in bara de sus a browserului fara sa dispara. Nici nu stiu cum sa denumesc actiunea asta. Menu achor ?! Habar n-am.

Cum poti face chestia asta ? Care e codul care face asta ?

Multumesc mult !

[Birkoff]

CSS: fixed menus

[Che]

CSS: fixed menus

Am incercat sa fac asa ca acolo la un site test, si am facut asa:

index.html:

     <header>
         Best Website Since Google
     </header>
     <nav>
        <ul>
            <a href="#"><li>Home</li></a>
            <a href="#"><li>About</li></a>
            <a href="#"><li>Blog</li></a>
            <a href="#"><li>Shop</li></a>
            <a href="#"><li>Gallery</li></a>
            <a href="#"><li>Contact</li></a>
        </ul>
        <div class="handle"><div class="icon">?</div> [MENU]</div>
     </nav>

style.css:

@media print{ /* arata la ce vrei sa faci print */
    nav, .ad{
        display:none;
    }
    a{
        text-decoration: none;
    }
}

div {
line-height: 1.5em;
text-shadow: none;
color: #656565;
font-size: 17px;
font-family: Helvetica, Sans-serif;
}

h1 {
color: #ED6F21;
}

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

header{
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
a{
    text-decoration: none;
    color: inherit;
}
nav{
    position: fixed;
    top: 5%;
    width: 100%;
    margin-top: -2.5em;
}
nav ul{
    background-color: #43a286;
    overflow: hidden;
    color: white;
    padding: 0;
    text-align: center;
    margin: 0;
    -webkit-transition: 0.4s;
       -moz-transition: 0.4s;
        -ms-transition: 0.4s;
         -o-transition: 0.4s;
            transition: 0.4s;
}

nav ul li{
    display: inline-block;
    padding: 20px
}
nav ul li:hover{
   background-color: #399077
}
section{
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 0 auto;
}
.handle{
    width: 100%;
    background: #005c48;
    text-align: left;
    box-sizing: border-box;
    padding: 15px 10px;
    cursor: pointer;
    color: white;
    display: none;
    font-size: 1.5em;
}
.icon{
    padding-right: 0%;
    font-size: 2em;
    color: #FFF;
    display: inline;
}
@media screen and (max-width:580px){
    nav ul{
        max-height: 0;

    }
    .showing{
        max-height: 20em;
    }
    nav ul li{
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
    }
    .handle{
        display: block;
    }
}

Practic nu am adaugat decat:

nav{
    position: fixed;
    top: 5%;
    width: 100%;
    margin-top: -2.5em;
}

in style.css

si pare sa mearga, numai ca e o problema:

Aici: Medical News Today: The Latest Health News

Se vede clar headerul care este deasupra meniului. Este alb, dar ar putea fi o imagine, un text, orice.

Si numai cand dai scroll down headerul dispare si meniul se urca in partea de sus a browserului si ramane fixat acolo.

La mine e urcat din prima acolo si sta peste header. Practic sunt obligat sa mut headerul sub meniu de la bun inceput ca sa nu fie suprapus meniul peste el.

Cum fac ca sa fie exact ca in situl asta: Medical News Today: The Latest Health News

?

Multumesc mult !

[Birkoff]

pune si tu border 0, margin-top: 0px; top: 0px; ca sa inceapa fix de sus, altfel normal ca va ramane o bordura sau va aparea ceva deasupra lui...

in ce priveste prioritatea, poti folosi z-index sa fie meniul mai mare decat bg

[Che]

pune si tu border 0, margin-top: 0px; top: 0px; ca sa inceapa fix de sus, altfel normal ca va ramane o bordura sau va aparea ceva deasupra lui...

in ce priveste prioritatea, poti folosi z-index sa fie meniul mai mare decat bg

Nu la asta ma refer. Ma refer la faptul ca situl original are un header si apoi meniul iar cand abia dai scroll down headerul se duce in sus si dispare iar meniul se urca in sus la browser. La mine meniul se suprapune peste header. (Ala verde mai inchis din imagine este headerul.)

[Birkoff]

ce vrei tu implica si putin jquery sau js si anume sa ii spui ca atunci cand scrolul ajunge la o anumita distanta sa faca o pozitionare la meniu

- solutia o gasesti explicata la jquery - Leave menu bar fixed on top when scrolled - Stack Overflow

si un exemplu cu tot cu cod gasesti la

How to create Fixed Menu When Scrolling Page with CSS and jQuery | Sutana Ryan's Blog and Portfolio Site

fara js/jquery nu stiu daca se poate

[scriptlordz]

are dreptate birkoff, trebuie jquery