Jump to content


Photo
- - - - -

Keep Nav Below Header and Remain Fixed When Scrolling


Best Answer Danny , 24 March 2013 - 10:30 AM

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/

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 14 March 2013 - 02:24 PM

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?

 

 



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 14 March 2013 - 02:55 PM

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



#3 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 14 March 2013 - 03:20 PM

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

 

 

 

Attached Files

  • Attached File sc2.png   496.17KB  15 downloads


#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 14 March 2013 - 10:28 PM

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.



#5 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 14 March 2013 - 11:28 PM

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.



#6 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 15 March 2013 - 01:50 AM

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.

 

Please Login or Register to see this Hidden Content

 

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

 

Please Login or Register to see this Hidden Content

 

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.



#7 Madi

Madi

    Member

  • Members

  • 19 posts
  • Country: Country Flag

Posted 23 March 2013 - 09:34 PM

I'm very eager to hear this answer.

 

Here's an example that I think illinimatt81 (Matt?) refers to: 

Please Login or Register to see this Hidden Content

<-- what I'm trying to do with

Please Login or Register to see this Hidden Content

 

 

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



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15163 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 March 2013 - 10:30 AM   Best Answer

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.

 

Please Login or Register to see this Hidden Content


  • Madi likes this

#9 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 27 March 2013 - 01:34 PM

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



#10 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 27 March 2013 - 01:46 PM

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