How to build a services sidebar menu

by | Oct 30, 2018 | Divi tutorials

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

Step 1
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.
Service pages for sub menu
Step 2
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.
create a sub menu
Step 3
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

side menu widget
Step 4
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.

Assign services menu to the sidebar widget

Step 5
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. You can learn here on how to create 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.