Help with Fixed Navbar!

Whenever I make my navbar fixed, it makes two a tag inside the div of the navbar layer on top of one another, but when I remove the position: fixed; it separates the two to their default flexbox positions.
Is there any way to either use an alternative of fixed or eliminate this bug?

With thanks,
~ RedCoder

1 Like

BTW, these are the before and after photos


Not entirely sure, but I think you can do position: sticky;.

Please mark this post as the solution if it solved your issue.

5 Likes

It solved the overlapping problem, but the navbar does not stay at the top of the html page when scrolled.
With thanks,
~ RedCoder

1 Like

Can you provide a url to the repl?

4 Likes

Austin f - Replit

Try:

position: fixed; 
top: 0;
1 Like

A rather appearing result occurred when I put

position: sticky;
top: 0;

in my navbar. Now, the only problem is that when the page first shows up, the navbar is not over the background image, but before it. And solve for this?


1 Like
position: -webkit-sticky; 
position: sticky; 
top: 0;

For better sticky cause browsers.

This might fix your other issue

2 Likes

New info: On replit’s mini-browser, the navbar shows up outside of the background, but on legitimate browsers, it does not. Now, the only problem is, if you can see on this link, when you scroll the navbar gets left behind after I pass the first background image. Any fixes?

i will mess aroud with it and see if i can find a solution

I cant seem to fork and edit the code

I would recommend that you rewrite your navigation bar and make them all lists instead, and to make them more interactive, you could use a JS package such as data.aos, or use lessons from [boring].
If you are confused, I can send an example along with it.
Thanks and enjoy your Easter,
@LesterHo2

I solved this on my own (I don’t remember how as it was so long ago)

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