One page web design - how to slide to sections from the fixed menu, instead of jumping to a new page

Elements
1

Hi everyone, still having on and off relationship with Elements but I am getting used to it.

I followed most of the tutorials but I cant find one which would describe how to link menu item to a section/specific container without leaving my home page but rather all do jump to a new page. I want to use FIXED menu so the sections are visible while scrolling the page.

I would prefer to click a menu item and smoothly slide to that section within one HOME page. How can I do it? The only item In the menu is HOME, but I want to have one page design with , sections like contact, what we do, social, about, subscribe . . I want these to be visible in the menu, and I just want to slide down to these instead of jumping to a new page.

Is there a tutorial on this somewhere? I understand I need to create ID in the Advance menu but its still limited to the menu items linked to different webpages rather then sections. (searched forum but only found something from 2015, all free projects have separate pages for menu items unfortunately. Here is an example what I am after. Thank you ! Mike

2

@meonmac

Try this https://youtu.be/VEqrlcXydTs?is=meUkKlnYFZoiUJey

Just create your own menu

3

Thanks Steve. Yes, I did saw this one, links from text within the page, thats not what I am after. I need to be able to add Container name / Section name from within that one page design into Fixed Menu. Coming from Blocs, it’s pretty easy.

4

Something similar this NoirOne or to LinearOne?

5

Yes. Great design and dynamic. I prefer the first one. Great work. I don’t think I have seen anything similar done by Elements. :+1:t2: how did you made that Sticky menu?

6

ok did this ages ago, basic, just turn modal into a top menu

elementsapp://downloadDocument/cBNJu9hedbry

7

Design is a component that is not included in Elements, you cannot buy it unless you get it from the designers :smiling_face_with_sunglasses:

8

Thank you, did you use Sticky Menu for the Noire web? How to create custom names and link those to the sections on the page and not separate pages then? That’s what I am trying to figure out.

9

The easiest way to accomplish this is by using anchors. You can define a custom ID in the Advanced section of the settings for each of the sections you want to be able to navigate to. Then you can create links to these anchors that will allow you to move to each section when the link is activated.

There are a number of ways you could expose these links; one would be to create a folder with all of the links you need, then use the Top Pages component to expose them by pointing it to the folder of links. You could also create individual buttons for each of the sections and set their links to point to the appropriate anchor.

I use anchors all the time to accomplish in-page navigation; it really helps getting around within a page.

10

:+1:

11

Thank you all. looks like that Sticky Menu is not the right component for this purpose and I will need to create custom Menu as recommended by most of you. Adding text / buttons for the ID link to the sections. Thanks for your time, much appreciated :folded_hands:

12

You can also use a standard menu for the anchor links on the page like NoirOne or create a more sophisticated manual nav like LinearOne

13

Thanks, yes. This is the only way. For some reason I was stuck with the Sticky menu :wink:

14

Pssst…check spelling in the Noir > Contacts, the little slide out box on the left. :wink:

15

thanks! Build updated

16

project

elementsapp://downloadDocument/BJDp1HMwaRhq

converted to top I just pulled the flex out of the modal and turned it row rather than column

18

Thank you. Thats great.

19

That’s a very impressive example. But how does it work? I can’t find a link anywhere.

20

Here’s the simple way to link from the menu component to different sections on a page :slight_smile:

21

THIS !!! ohh, that magic Right Click. Thank you Dan. I knew there must have been some easy way to this. This is golden.