CODEWITHSUNDEEP
htmlcss
Willem Zelen
Willem Zelen

Reputation: 1

Sticky navbar in css and html

I am trying to make the navbar stick at the top when i scroll down and i found this example on w3schools.

But when i add the margin at the top of the main content, the margin seems to get added to the navbar instead since it moves down 100px, can anyone help me out?

This is my code:

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Titillium Web', sans-serif;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-shadow: 0 0 10px;
  position: fixed;
  width: 100%;
}

.pages-container p {
  display: inline;
  margin: 0 35px;
  font-size: 20px;
}

.pages-container .last {
  margin-right: 0;
}

nav .title {
  font-size: 20px;
}

.main {
  margin-top: 100px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

<nav>
  <p class="title">Portfolio Willem</p>
  <div class="pages-container">
    <p>Economie</p>
    <p>Bedrijfseconomie</p>
    <p>Wiskunde A</p>
    <p class="last">Geschiedenis</p>
  </div>
</nav>
<div class="main">
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
</div>

Thanks in advance!

I was expecting the main content to move down and not the navbar.

Upvotes: 0

Views: 93

Answers (1)

Gleb Pristupa
Gleb Pristupa

Reputation: 23

Add to <nav> top: 0; background: white;

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Titillium Web', sans-serif;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-shadow: 0 0 10px;
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
}

.pages-container p {
  display: inline;
  margin: 0 35px;
  font-size: 20px;
}

.pages-container .last {
  margin-right: 0;
}

nav .title {
  font-size: 20px;
}

.main {
  margin-top: 100px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

<nav>
  <p class="title">Portfolio Willem</p>
  <div class="pages-container">
    <p>Economie</p>
    <p>Bedrijfseconomie</p>
    <p>Wiskunde A</p>
    <p class="last">Geschiedenis</p>
  </div>
</nav>
<div class="main">
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
</div>

Upvotes: 1

Related Questions