navbar is niet fixed

[Verwijderd]

Hey,

Ik snap niet waarom mijn navbar niet fixed is. Weet jij wat ik verkeerd doe?
Welk forum is beter mijn vraag te stellen of staat Tweakers dit toe?

*snip* spam

HTML:

    <div id="navbar">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
    </div> 
    
    <div class="page-wrapper">

Cascading Stylesheet:

#navbar {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 10;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;

[ Voor 2% gewijzigd door RobIII op 03-04-2020 21:20 . Reden: Spam verwijderd, code tags toegevoegd ]

[Merethil]

Verwijderd schreef op vrijdag 3 april 2020 @ 19:29:
Hey,

Ik snap niet waarom mijn navbar niet fixed is. Weet jij wat ik verkeerd doe?
Welk forum is beter mijn vraag te stellen of staat Tweakers dit toe?

*snip* spam

html
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>

<div class="page-wrapper">

css
#navbar {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}

/* Page content */
.content {
padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 10;
width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;

/* The sticky class is added to the navbar with JS when it reaches its scroll position */

Heb je de JavaScript wel toegevoegd?

[ Voor 1% gewijzigd door RobIII op 03-04-2020 21:21 ]

[DJMaze]

Gebruik geen JavaScript.
Maak gewoon de nav direct position:fixed en zet je body op margin-top:30px

[RobIII]

Verwijderd schreef op vrijdag 3 april 2020 @ 19:29:
Ik snap niet waarom mijn navbar niet fixed is. Weet jij wat ik verkeerd doe?

Nou, nee, zo werkt 't hier niet helemaal; ik adviseer je even onze Quickstart door te nemen.
Die vragen die hier staan wanneer je een nieuw topic opent staan er dan ook niet voor niets

Mijn vraag
...

Relevante software en hardware die ik gebruik
...

Wat ik al gevonden of geprobeerd heb
...

See?

Verwijderd schreef op vrijdag 3 april 2020 @ 19:29:
Welk forum is beter mijn vraag te stellen of staat Tweakers dit toe?

Waar hoort mijn topic? staat met reden bovenaan dit forum te prijken

Verwijderd schreef op vrijdag 3 april 2020 @ 19:29:
*snip* spam

Gewoon een handvol regels relevante(!) code volstaat hoor Je hoeft je site dus niet te spammen

Wil je de volgende keer als je een topic opent naast het hanteren van de voorgenoemde Quickstart ook code tags gebruiken voor 't posten van code?

[ Voor 7% gewijzigd door RobIII op 03-04-2020 21:26 ]