Jump to content
illinimatt81

Keep Nav Below Header and Remain Fixed When Scrolling

Recommended Posts

illinimatt81    21
illinimatt81

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
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Madi+    1
Madi

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).


- Madi

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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/

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

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

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×