Archived

This topic is now archived and is closed to further replies.

  • 0

Keep Nav Below Header and Remain Fixed When Scrolling

Question

Posted · Report post

Is there a way to implement some CSS to make the navigation bar at the bottom of the header and then remain fixed to the top of the browser when the user scrolls down the page?

 

I am aware Pagelines offers a fixed nav, however I want to have it be positioned below my header when the page loads and then remain at the top when scrolling down the page.  I'm also using UberMenu for more robust navigation and some CSS to match the rest of the container to span full width as UberMenu does not span full width out of the box.

 

I'm thinking something could be added to the CSS for the container for the nav?

 

 

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

The simplest method would be to use the Scroll Spy section. If this isn't to your taste, the best course of action would be to contact one of our Pros. As this would most likely require a custom section.

 

http://www.pagelines.com/pros/

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

OK - please let us know if you require further assistance. 

Share this post


Link to post
Share on other sites

Posted · Report post

Basically, you'd like the functionality of ScrollSpy with the behavior of NavBar?

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, that same functionality only using my navbar that I have created which is more robust than scrollspy.

 

 

 

post-31751-0-25449100-1363274450_thumb.p

Share this post


Link to post
Share on other sites

Posted · Report post

I'm very eager to hear this answer.

 

Here's an example that I think illinimatt81 (Matt?) refers to: http://whiteboard.is/ <-- what I'm trying to do with http://o.oiac.org

 

 

I'm assuming you can customize the CSS for scrollspy for it to appear directly after another section (i.e. a banner in my case).

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, try setting the menu you've created to position: absolute with a top:0. That should set it to the top of the page and left the page scroll under it.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, try setting the menu you've created to position: absolute with a top:0. That should set it to the top of the page and left the page scroll under it.

 

Wouldn't this force it to the top at all times? I was hoping to have it occur in the current position on the page just below the header and then when you scroll the page down it will set to the top of the page.  If you look at the scroll spy it behaves this way. The scroll spy nav is further down on the page and then moves with the page until it reaches the top of the page at which time it becomes fixed to the top.

 

That is the effect I am looking to accomplish.

Share this post


Link to post
Share on other sites

Posted · Report post

Ah i see, so it picks it up as it goes down the page.

 

Well looks like there's two separate things going on there. The normal nav is in place as scrolls down the page as normal, there's another fixed version on the page, but its set to not display.

 

http://screencast.com/t/tzE5OqLz9

 

When that first nav scrolls off the page, something triggers the fixed version to change from hidden to display:block.

 

http://screencast.com/t/es5j6hMoIvd

 

It looks like the trigger is all set by javascript. So I don't think you'd be able to create that effect using css alone.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the feedback everyone. I'll manage as is.

Share this post


Link to post
Share on other sites