Streaming live at 10am (PST)

Help for fixed navbar scroll alignment with section


#1

Hello All . . . .

I have trouble with my fixed navbar. I have two navbars main navbar is fixed and sub navbar hides when i scroll down.

When i select a link from sub navbar to a section, some part of section hides under the main navbar.

www.ambermobility.com/mobility

Please help me how to correct this issue.

my practice link : https://preview.webflow.com/preview/shraddhas-radical-project?preview=8e10a16bd9b8ad90d310f6b6caf3ffc3

navlink selection doesn’t work here either(works only for pink section).
yellow and blue section is not selected .

Thanks.


Here is my public share link: LINK
(how to access public share link)


#2

Hi @web_crazy,

Great question.

The best way for me to show the scroll alignment solution is by using your site and making changes in my browser inspector:

  1. Add a div above where you would like the scroll to stop

  2. Add the following style to the newly created div

  • Position absolute
  • Bottom: 5px
  1. Finally, remove the ID from the below section (id=“howitworks”), and it to the newly created div.

Taking these steps will allow the scroll to come to that area, but 5px higher than it originally did. The “bottom” value can be changed to your liking.

You can view the steps I took in the inspector at the following short video:

Hopefully, this helps :blush:

Best regards,
Micah


#3

@micahryanhtml . . .
Thamk you for your reply.

so , you mean where ever the scroll is not pointing to the exact section I must add a div block above the section and link (div id) to the navlinks?

correct me if I am wrong?

I tried to implement it first in my practice website (navlink About=blue)
https://preview.webflow.com/preview/shraddhas-radical-project?preview=8e10a16bd9b8ad90d310f6b6caf3ffc3

doesn’t seem to work there :frowning:


#4

@web_crazy

Oh no problem.

Yes, you’re exactly right.

If you add more space between sections you will see that the scroll will stop right above the blue section. The additional height is needed so that the browser can scroll to that section - previously it was being stopped because it had reached the bottom of the page.

The following video shows me adding more height (100vh) to the sections, then testing the interaction:

Hopefully this helps :blush:


#5

@micahryanhtml . . . you solution works if i make the sections height to 100Vh. but some of my sections are smaller than this height and this solution doesn’t work. Is there any other way to fix this issue. (will interactions work for this issue?) . Also, i have to select write Vh in height (only %, px and auto options available). Tia.


#6

Hi @web_crazy,

Sure, you can use different heights. The solution I provided was used as an example because the browser needs room to scroll.

For example, if you select to scroll to an ID that is near the bottom of the page - it will not be able to scroll directly to that ID because it cannot scroll pass the available content in the viewport.

A good example to think of is having a link to the footer of your page - because the footer will typically not take up 100% of the viewport - the content above the footer section will be visible.

Feel free to adjust the heights to your liking.

Hopefully this helps :blush:

Best regards,
Micah


#7

@micahryanhtml . . . i tried to implement your solution In my real website page. But somehow its not working there. I added Div element above each section with Position:absolute, bottom padding :5px and Divid = sectionid. but its not working.
It is not published yet. Please check AmberAnaliticsCopy Page.

https://preview.webflow.com/preview/amber-888cda?preview=e1fd60ea04b415c1eab333b240ce90f1

Thanks!


#8

Hi @web_crazy,

We’re almost there :wink:

The following steps will get the solution to work as expected:

  1. First, move the position absolute div into the element “whyAnalytics”
  2. Next, remove the bottom padding, and add 25px to the bottom of the absolute div element (you can find this input where position is located)
  3. Then, change the position of “whyAnalytics” to relative

The solution should now work as expected.

You can view the video I created to see the steps I took:

Hopefully this helps :blush:

Best regards,
Micah


#9

Thanks a ton for your immediate reply. I tried applying these changes to Div - position: relative, bottom:35 and Id=section Id. So it also worked. but Please let me know which is good method for long term use?


#10

Awesome!

That way works also if you don’t mind the pixels being added to that section.

Good job! :wink:


#11

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