Sticky Menu #2 - Post ID 303982

User 2140875 Photo


Registered User
378 posts
Online Now

I am working on a site. The menu was created with Easy CSS Menu Maker. The script it creates is copied into an HTML element. I've made the menu into a symbol.

I'd like to have the menu stay at the top of the page and content slide under it as the user scrolls down the page.

Can I create a sticky menu in this situation? Or, does the menu have to be created within SD.

If it's possible, any suggestions will be appreciated.
Thanks!

User 122279 Photo


Senior Advisor
14,547 posts

Take a look at the menus on my sharing site. Many of them are sticky or fixed. 'Sticky' usually means that the menu slides up to a point, where things like Logo, tag lines etc disappear but the actual menu stays on top. This includes some JS. A 'fixed' menu is made to stay put at the top of the page, or at some other intended position, all the time. No JS needed there.

If you don't find exactly what you want, you may perhaps use one to see how the stickiness is done. Just select the framework you prefer.
The URL can be found in my signature.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,547 posts

Addendum:

I have noticed that you sometimes have got help and advice from Wayan. In that case, you are probably using Foundation. So, if you cannot find a suitable menu in the Foundation collection on my sharing site, take a look at the ones for BareBone (Frameworkless). Most of them can easily be converted to Foundation. If needed, I can help with that.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
5,077 posts
Online Now

Hi Galen
Try making the HTML container itself sticky (depending on where it is in relation to it's parent container (to be sticky needs to be the 'Body' element

If the HTML element is a child of another container then that parent container is the one to apply 'sticky' to.

or as Inger suggests make another one using Site Designer and either one of her components or DIY it easy enough to do.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2140875 Photo


Registered User
378 posts
Online Now

First, thank you Inger for your suggestions. I'll go to your site and check it out.

Wayan--I've attached to images. One of the index page as seen in SD and the other its related Element Inspector.
Does it fit what you mentioned above?

Thanks!

Attachments:
User 2699991 Photo


Registered User
5,077 posts
Online Now

Galen Garretson wrote:
First, thank you Inger for your suggestions. I'll go to your site and check it out.

Wayan--I've attached to images. One of the index page as seen in SD and the other its related Element Inspector.
Does it fit what you mentioned above?

Thanks!



Yes you need make the parent container "sticky-nav" the sticky one

There is a fiddle for older mobile devices and earlier versions of some browsers, a bit too complicated for me to explain, I can do a quick short demo for the fiddle if you think it ould help

You need declare the position it sticks to the top in pixels, If you want the header to stick to the top too you need make that sticky too sticky top position = (0px), then set the menu containers sticky position to stop below that)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2140875 Photo


Registered User
378 posts
Online Now

Great. I'll give it a try. Where in the Layout or Design panel is that position "top pixel" value added?

Thanks again for your help!!
User 2699991 Photo


Registered User
5,077 posts
Online Now

The same place as you give the parent container position sticky
Attachments:
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2140875 Photo


Registered User
378 posts
Online Now

Hi Wayan,
Image shows how it is set right now. I must be doing something else wrong.
Attachments:
User 2699991 Photo


Registered User
5,077 posts
Online Now

Galen Garretson wrote:
Hi Wayan,
Image shows how it is set right now. I must be doing something else wrong.


Send me the project file I will take a look
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/

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.