Problem with position: sticky

HTML-CSS
1

Hello, i’m trying to pass this test of the last challenge of the web design certification. The navbar should stick to the top of the viewport and for that i’m using the property “position: sticky”. Regardless, the navbar does not stick to the top. I would need some help to understand what’s going wrong.

Your code so far

<main>
<section id="navbar">
  <a href="#welcome-section">a la bienvenida</a>
  <a href="#end">al final</a>
  <a href="" target="_blank" id="profile-link"
</section>

<section id="welcome-section">
  <h1>Bienvenido!</h1>
</section>
<section id="projects">
  <title class="project-tile"></title>
  <a href="#project_1"></a>
</section>

  <p id="end">el final</p>
</main>

main{
  display: initial;
  overflow: visible;
}

#navbar {
  position: sticky;
  top: 0;
}

@media (max-width = 100px) {
  background-color: red;
}

#welcome-section {
  height: 100vh;
}

#end {
  position: absolute;
  top: 10000px;
}

I’m currenly using Microsoft edge

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

First, i can see a missing part in your last a tag.
<a href="" target="_blank" id="profile-link" :arrow_left: :warning:

Second, sticky is like a combination of fixed an relative position, so, when the parent tag (in this case main moves out from the viewport, the section navbar will also do so.

also, you can use the nav tag instead section for your navbar

Could you post the link to your project?

3

@ricardoantonio I never used the sticky type, but I think it would be better to use the fixed type here. After he can adapt his code in function of that. What do you think about this ?

4

Me too, I never used sticky, I prefer fixed or absolute, it depends. I’m agree with you, in this case fixed looks like a better option.

5

I don’t know if it is possible to do in another way, I tried to do this with flexbox but I didn’t arrive except if the navbar or menu is at the sides (right or left)

6

Thanks! it seems the problem was in the missing “>” symbol. I’ve tried with fixed and it didn’t work at first but it might have been the “>” that was missing.

7

It’s not only one > missing, it’s the entire closing tag.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.