How to create a floating jumplink menu widget

I was making a documentation page for my new plugin and I thought a floating jumplink widget with Accordion Menu would work really well.

See Demo Here

It was surprisingly easy to do.

Step 1: Use the Div Element shortcode to create jump ID’s for each section and use the Left Sidebar Template of one of my themes.

See “Classic Editor” screenshot on the right.¬† For Gutenberg¬† just click the Templates link on right.

Example

Copy

 

Step 2: Make a wordpress menu called Documentation and add the links like this.

Example:

URL: #Getting
Nav Label: Getting Started

Step 3: Add the Accordion Menu widget to the Left Sidebar and select the Documentation menu.

Step 4: Add this code to Additional CSS. (Your DIV ID number might be different, 1,3 etc)

Copy

That’s it.

Previous Post

How to add an Author Box to your posts

Next Post

Social Media Icons In Primary Menu

Leave a Reply

Your email address will not be published. Required fields are marked *