Floating menu stays on top of a web page when scrolling up and down

Rowby Goren
Rowby Goren used Ask the Experts™
on
Hello

I have a client who wants there to be a horizontal menu that stays at the top of the page when a visitor scrolls up and down.

They want the menu to stay visible at the top at all times.

I think something like this is basic css.  Or am I missing something.  Would javascript be a part of the mix?

Thanks!

Rowby
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
Google for "sticky jquery"
For example : http://stickyjs.com/
Top Expert 2015

Commented:
Sticking to the top is easy. Just css. For the menu bar, just use position:fixed;top:0;left:0; and z-index it on top of everything. Sticking to the bottom is more difficult to achieve.
TomMicrosoft ISV Partner

Commented:
Fix it with CSS
Add this to your header:

   position: fixed;  
    width: 100%;  
    left: 0;  
    top: 0;  
    z-index: 100;
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Thanks,  tru3533!

I'll be doing it tomorrow.

Rowby

Author

Commented:
Hello

Sorry for the delay on this. I hope to get this implemented early next week,

Rowby

Author

Commented:
OOpos.  Sorry I did not award the points.  Thanks please award the points.  I am using Leakim971's solution.

Rowby

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial