How to build a services sidebar menu
In this tutorial, I’ll be covering how you can build a side menu for your services pages. This side menu gives your customers a nice overview of the available services, and they can navigate easily through them.
You can find a live demo here:
Step by step tutorial
For this example I created 5 services pages that I want to show up in the sidebar menu. I use a 1/4 – 3/4 column structure. This is how I set it up.
Go to Appearance > Menus and create a new menu. Under Menu Settings don’t check anything. In this menu you need to add the pages you want to show up in the sidebar menu.
Go to Appearance > Widgets add a new sidebar (You need to refresh the page in order to see the new sidebar)
Add the Navigation widget to this sidebar and assign the services menu to it
Now we need to assign our just created menu to the service pages. Open your service page and open the sidebar module. In the widget area assign your created menu to it.
Do this for every service page. When you are done you have created a working sidebar menu. This menu looks really dull and in the next step, we are going to style it with some CSS.
Use the following CSS to style the services menu. Place this CSS in Divi > Custom CSS or in your child theme CSS file if you have one.
I have added some comments (in grey) where you can change the color codes.
If you have any questions let me know in the comments.