Avatar of Rowby Goren
Rowby Goren
Flag for United States of America asked on

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

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
CSSJavaScriptjQuery

Avatar of undefined
Last Comment
Rowby Goren

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Tom Beck

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

Fix it with CSS
Add this to your header:

   position: fixed;  
    width: 100%;  
    left: 0;  
    top: 0;  
    z-index: 100;
Rowby Goren

ASKER
Thanks,  tru3533!

I'll be doing it tomorrow.

Rowby
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Rowby Goren

ASKER
Hello

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

Rowby
Rowby Goren

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

Rowby