Single scrolling page navigation menu

I want to make Shapely’s navigation menu at the top right corner to become a single page navigation menu. Such as on this site: www.juvohomefriend.com

For example, if you click “Contact” the page will navigate to the bottom and show you the subscribe box.

My website is: www.ohlala.hr
How do I make that for my website?

I found this tutorial but I can’t follow it. They say to open a “Layers” menu on the Wordpress dashboard but I don’t have that menu.

Hi,

Go to Appearance -> Menus and for the menu add the Custom Links http://take.ms/6uk1U and add the URL like this,

http://ohlala.hr/#shapely_home_contact-3

And for smooth scroll you can use any plugins, https://colorlibsupport.com/t/smooth-scroll/#post-59049

Let us know,

Thanks,
laranz.

Thank you very much!

Hello laranz,

Could you also specify where we know the anchor tags of specific widgets? I’ve been searching for it all over and there doesn’t seem to be anywhere to name them or show what they have been named by default.

I have tried and found that for example my contact form is named “#shapely_home_contact-2”. Okay, can find them by trial and error like this until some point maybe but do those numbers change if there are widgets added to or removed from in between?

And is there a list of widgets names used in shapely? I may want to add video, or other extra widgets as well?
Which comes to my first question again I guess… How do we know what that specific widget we added or edited is named? Can’t ask you every time :slight_smile:

Thank you.

Hey guclu, maybe I can help with that.

You find out the widget’s ID (correct way to say “widget’s name”) by using your browser’s “Inspect” tool. I will show you how I use it on Chrome and I’ll use my website as an example.

Let’s say I want to find out the ID of my gallery section (“Galerija” in Croatian language).

I can right click on “Gallery” and then click “Inspect”.

Chrome will now open a window on the right hand side where I can see webpage’s HTML source code. Chrome will also highlight part of the website that I inspected in the previous step with a light blue color. In the previously mentioned image, you can see Chrome has highlighted the part where the “Gallery” headline is.

Now, you can use the “element selector” and navigate around the website and Chrome will highlight webpage’s elements and show you their respective HTML source code on the right. For instance, this is how it looks like when I select the “Gallery” widget. You need to find the widget’s ID which is titled “div ID” on the right hand side but you can also find it in the highlighted section on the left hand side. In my case, gallery’s widget ID is bwp_gallery-3.

If this is too hard to follow, you should learn some basic HTML.

Hi Guclu,

Sorry for a late response, you can easily find the names using the Browser tools, In Firefox or Chrome, right click and choose “Inspect Element” and you can get its name ( the ID is the name ) http://take.ms/32Fxf

And is there a list of widgets names used in shapely?

I didn’t understand this question, can you be more specific…? If you’re asking about the widgets, then you can see all the widgets in Appearance → Customize → Widgets or Appearance → Widget.

Let us know if you have any other questions,

Thanks,
laranz.

Hi,

@larper Thanks for the help. :slight_smile:

Regards,