Some issues in Club website challenging project

I have completed the Club website project but there is a Bug. I’m unable to figure out what’s wrong with the code.
when max-width goes below 800px or something, the navigation menu merges in the toggle button. On clicking that button the navigation menus appear again just like a normal responsive website do.
But at the time when I scroll, look what happens below.

here is my code you can easily find anything in my code with the comments I have given:- https://github.com/Agreegor/Verge.cG

Hosted it on - https://codexcalate.ml/

Help me to remove this bug. Thanks.:heart:

Hi there,

CSS:

nav ul {
  position: fixed;
  top: 540px;
}

With this set, it’ll always appear 540px from the top.

Here’s what happens if I change it to top: 140px;

And, on scroll, it’ll obviously stay there.

You need to find a way for it to be positioned relative to something other than the top of the page.

1 Like

Sorry, but I’m a bit confused about what changes should I have to do to overcome these mistakes. :worried: :frowning_face:
Whenever I tried to change something it makes the situation even worse so please help me.

Not really a mistake, you’re experimenting and that’s good!

To achieve this, you need to consider the element you want to fix somewhere on the page, and its relation to its parent container. Here, we have ul to fix, and nav as its parent.

The trick is to give a relative positioning to the parent, and an absolute one to the child.

Here’s how the relationship works:

#parent {
   position: relative;
}

#child {
   position: absolute;
   top: 0;
}

Of course, in your case, you won’t want to use top: 0, but I’ll let you experiment further to find what fits best for your design.

1 Like