Navbar Scrolling

How to avoid overlapping of page content and navbar content while scrolling.

Hey, @Sapna2001,

It would be really helpful for us, if you provide us a link to your project, or the code for your project, because right now, I don’t know what you’re really asking for. I don’t know how much you know and don’t know. We need more information.


This is not my personal project.
Came across this doubt while going through the website.
As you can see that contents are overlapping in the navbar while scrolling.

I don’t see them overlapping the nav-bar. What I see is the navbar having an opacity of less than 1. That means its a little translucent that you can see the contents behind it, but it’s not overlapping the nav bar. This is quite common in some designs for asthetic

1 Like

So by changing the opacity to 1 this issue can be solved?

Not quite, when you check in the developer console, they used a transparent background-color, so the fix would be to change the last digit into 1.

So, background-color: rgba(255, 255, 255, .9) into background-color: rgba(255, 255, 255, 1);

After I updated it, it should not be transparent anymore, here’s the result:

1 Like