sticky menu

User 2140875 Photo


Registered User
343 posts

I have been working on a site for my sign language classes. Originally done with VSD. I recently updated to SD4. What a learning curve.

I muddled my way through and am getting close to what I wanted. I tried to use a nav menu from in the component library, but could not find one I wanted and not enough knowledge to make adjustments. I used a program call CSS Menu 5 to make a menu I wanted. Then pasted the appropriate code into an html box. Everything works fine.

Here's the site so you can see the menu w/o the sticky feature: https://asl1.galenswebsite.com/

The only thing I would like to do is make the menu "sticky".

Can any one provide with some code examples and where to add them that will keep the menu the way it functions now and just add the "sticky" feature to it?

Thank you for your help. I plan on spending more time in SD, but the class is coming up soon and need to finish this off.

Galen
User 2699991 Photo


Registered User
3,124 posts
Online Now

Hi Galen
You would have to give the container holding the HTML element an additional class of "sticky-container" (without quotes of course)

then hop aolng down to the "Layout" tab
slide on down to "position" section
skip over to the last icon which =sticky
back to the box underneath with the arrow that points upwards change from "auto" to " 0 px
That should now do it for the nav to stick to the top.

If it doesnt (because it can also depend on where your container is in relation to the body) then you will also need to give the HTML another class name "sticky" repeating the position process

Otherwise you will need get in touch and I can show you how to make that nav using SD without the need for html
which then is really easy to make it sticky too

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 379556 Photo


Registered User
1,134 posts

I prepared this before Wayan's answer appeared, and am putting it here as it does demonstrate how it can be done in all frameworks or none.

For the HTML element:
1. In the Styles panel, I would go to Layout > Positiion.
2. By the word "Position" is a row of icon choices, and I would choose the one on the far raght (hovering the mouse on it shows that it's postion:sticky).
3. Underneath that row of icons I would select the first item (with the up arrow), and change it to px with a value of 0.

I have put some text in an HTML element to demonstrate this in the attached file.

Frank
Attachments:
User 2140875 Photo


Registered User
343 posts

Thanks for your responses. Followed our suggestions, unfortunately did not make menu sticky.

After first change did not work, I went back and changed the class name of the html element to sticky-container. no joy there either.

User 379556 Photo


Registered User
1,134 posts

Perhaps attaching here a zipped copy of the .rsd file might help someone to find the solution.

Frank
User 2699991 Photo


Registered User
3,124 posts
Online Now

Galen Garretson wrote:
Thanks for your responses. Followed our suggestions, unfortunately did not make menu sticky.

After first change did not work, I went back and changed the class name of the html element to sticky-container. no joy there either.


The class sticky container should be on the container ( with the class "container-2" ) not the html element

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2140875 Photo


Registered User
343 posts

Here is the .rsd file and also there are files that Easy CSS Menu 5 had me up-load to the root directory of my site.

Here is the link to Google Drive: https://drive.google.com/drive/folders/1K3uRNTXcrOFbOvXAqu42VbNIMUbq95QM?usp=sharing

Really appreciate the help!
User 2699991 Photo


Registered User
3,124 posts
Online Now

Wayan Jaya Space Cadet wrote:
Galen Garretson wrote:
Thanks for your responses. Followed our suggestions, unfortunately did not make menu sticky.

After first change did not work, I went back and changed the class name of the html element to sticky-container. no joy there either.


The class sticky container should be on the container ( with the class "container-2" ) not the html element


There again it could also be something to do with the CSS file for the HTML element

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2140875 Photo


Registered User
343 posts

It worked!!!!! I had changed the html element, not the container.

WOW!! Thank you so much.
User 2140875 Photo


Registered User
343 posts

Can anyone tell me why the form (built using WFB) slides on top of my sticky menu rather than under it. My other forms don't do that.
Thanks.

Here's the form: https://forms.rascal.cc/membershipapp/

As a side note. All my forms stopped working on my WordPress site. I know it was something to do with the PHP version, but was unable to find a solution (downgrading, upgrading, completely redoing the form) even with the help of CC support and web hosting support.

My solution was to create a subdomain and store the forms there. Once the form is submitted the user is automatically sent back to the WP site.

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.