Fixed menu scrolling page - Post ID...

Apr 10th, 2017 at 07:28 PM
User 148735 Photo

Larry Holihan
Registered User
97 posts

I want to put a row with menu button at the top of each page. I want the menu to stay fixed at the top of the page as the rest of the page is scrolled. Anyone know how to program this?
Apr 10th, 2017 at 08:37 PM
User 244626 Photo

Twinstream
Registered User
811 posts

Which framework are you designing in ? Foundation, Bootstrap, or Coffeegrinder ?
Bootstrap 5 CSS Grid.
Apr 10th, 2017 at 10:21 PM
User 148735 Photo

Larry Holihan
Registered User
97 posts

Bootstrap
Apr 11th, 2017 at 12:07 AM
User 244626 Photo

Twinstream
Registered User
811 posts

In Bootstrap you could add the standard responsive navigation menu to your design (or any other nav menu "button" component) and then add the class "navbar-fixed-top" to the container that has the class "navbar".

After you have done that create a new Symbol and then use that symbol on each page you want the nav menu on.

That way each time you need to change the menu, it changes it on all pages because its a symbol.

https://v4-alpha.getbootstrap.com/examp … top-fixed/
Bootstrap 5 CSS Grid.
Apr 11th, 2017 at 09:19 AM
User 148735 Photo

Larry Holihan
Registered User
97 posts

Thanks so much.
Apr 11th, 2017 at 02:30 PM
User 244626 Photo

Twinstream
Registered User
811 posts

Here is the Black Forest theme in Bootstrap which has a button menu. I modified it and added the navbar-fixed-top to menu (row 1).

I also created a symbol after doing so and then inserted on another page called "About" so the menu can be used on other pages.

Linked About and Home so you can go back and forward from those two pages only as a test.

Removed all pictures etc. as file was too big to upload.

Attachments:
Bootstrap 5 CSS Grid.
Apr 12th, 2017 at 01:44 PM
User 148735 Photo

Larry Holihan
Registered User
97 posts

Got it. Thanks.
Apr 12th, 2017 at 02:28 PM
User 244626 Photo

Twinstream
Registered User
811 posts

Just in case someone wants a fixed button menu in Foundation you would wrap it in a container...

It has a menu symbol also..... only two pages link one and two.

http://foundation.zurb.com/sites/docs/sticky.html
Attachments:
Bootstrap 5 CSS Grid.
Apr 12th, 2017 at 02:37 PM
User 244626 Photo

Twinstream
Registered User
811 posts

http://stickyjs.com/ is pretty easy too.....
Bootstrap 5 CSS Grid.

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.