How to make my menu "sticky" - Post...

User 2140875 Photo


Registered User
312 posts

I really am using RSD and not the new SD. SD just is too complicated for me. I struggle just with RSD v. 2.5, build 2425.

I don't know if "sticky" menu is the right way to describe what I want. Anyway, I'm just starting to work on a site for a local non-profit group that offers a "Relationship Recovery" program. I would like to be able to keep the menu (navigation) bar present while users scroll down the page.

The heading does not need to remain visible, nor does the banner picture. Hope that makes sense.

Thanks for your help in advance! Really appreciate it. Go easy on me. I am a non-coder.

Here's the link where I publish while I am building it: http://rr.galenswebsite.com
User 122279 Photo


Senior Advisor
12,600 posts

Hi, is it this effect youy want?
http://eikweb.com/sharing/bs-sticky-nav/index.html
If it is, I have this in my sharing folder, but it is for SD3. But I can make it RSD2.x if you like. Just let me know if you want it for Bootstrap or Foundation.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2699991 Photo


Registered User
2,508 posts
Online Now

Galen Garretson wrote:
I really am using RSD and not the new SD. SD just is too complicated for me. I struggle just with RSD v. 2.5, build 2425.

I don't know if "sticky" menu is the right way to describe what I want. Anyway, I'm just starting to work on a site for a local non-profit group that offers a "Relationship Recovery" program. I would like to be able to keep the menu (navigation) bar present while users scroll down the page.

The heading does not need to remain visible, nor does the banner picture. Hope that makes sense.

Thanks for your help in advance! Really appreciate it. Go easy on me. I am a non-coder.

Here's the link where I publish while I am building it: http://rr.galenswebsite.com


Hi Galen
Just a couple of things
1/ The "sticky" thingy doesn't work on mobile devices you would have to use "fixed for that.
2/ Your menu needs altering at those smaller viewpoints (especially below the lowest default breakpoint

3/ to make your menu-bar "sticky" select the row or the column holding the menu-bar (the outer one if there is one) go to "position" & select "sticky" for the top margin select 0 px for other margins leave auto (or change to how you want)


For the setting at lower widths, this depends on how you want it to be displayed once you have sorted out the layout for those menu items. Try the higher end widths first, then come back & let us know how you want it displaying at lower widths

The Help You Need: When You Need It The Most
User 2699991 Photo


Registered User
2,508 posts
Online Now

Or you could take up Ingers Offer of a component :D
The Help You Need: When You Need It The Most
User 2140875 Photo


Registered User
312 posts

Thank you Inger and Wayan. You both always come through for others on this forum.

Inger - That is what I am looking for. The only difference is my navigation bar is below my header, but above a banner picture. So when scrolling down the header would need to disappear, the nav bar stay, and the banner picture would also need to disappear. Is that doable?? It is in foundation.

Wayan - I will give that a try and thank you. I'll let you know the results.
User 2699991 Photo


Registered User
2,508 posts
Online Now

Galen Garretson wrote:
Thank you Inger and Wayan. You both always come through for others on this forum.

Inger - That is what I am looking for. The only difference is my navigation bar is below my header, but above a banner picture. So when scrolling down the header would need to disappear, the nav bar stay, and the banner picture would also need to disappear. Is that doable?? It is in foundation.

Wayan - I will give that a try and thank you. I'll let you know the results.


Hi Galen

well such a long time since I used RSD & a sticky menu thingy I got a couple of things wrong
1/ select the column holding the menu
2/ go to "attributes"
start to type" data sticky container" the dropdown menu will show it in a list ```` select it leave the value blank
3/ still in attributes
start to type "data sticky" select that from the list (leave the value blank
4/ still in attributes
start to type "data options"
select that from the list this time in value type " marginTop:0;" WITHOUT THE QUOTES

to make the slider scroll underneath the menu, you should also set the z index for the container as high as possible say 1000, if the slider still goes over the top of the menu, then you need to reduce the z index of the slider to below 1000

That should do it for medium to large widths
The Help You Need: When You Need It The Most
User 122279 Photo


Senior Advisor
12,600 posts

Galen, for the banner to disappear you need to increase the height of your pages, so that you have enough space to be 'scrolled away'.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2140875 Photo


Registered User
312 posts

Wayan,

Sorry, followed your instructions but does not remain sticky. Just acts as normal. Other suggestions maybe.

Really appreciate your help.
User 2699991 Photo


Registered User
2,508 posts
Online Now

Galen Garretson wrote:
Wayan,

Sorry, followed your instructions but does not remain sticky. Just acts as normal. Other suggestions maybe.

Really appreciate your help.


need to see the project file

which framework are you using Foundation or bootstrap
The Help You Need: When You Need It The Most
User 2699991 Photo


Registered User
2,508 posts
Online Now

There is a video on the way. No sound as we are in the middle of building work so too noisy, but you should be able to see it and the way it is done
The Help You Need: When You Need It The Most

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.