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.

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.

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

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.

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.

/* ###### SIDEBAR MENU  ###### */

/* ###### Background color menu item ###### */
.et_pb_widget_area .menu .menu-item {
	background-color: #e5e5e5;
}

/* ###### Text color menu item ###### */
.et_pb_widget_area .menu .menu-item a {
	color: #444;
}

/* ###### Background hover ###### */
.et_pb_widget_area .menu .menu-item:hover {
	background-color: #1e5096;
}

/* ###### Text color hover ###### */
.et_pb_widget_area .menu .menu-item:hover a {
	color: #fff;
}

/* ###### Background color active menu item ###### */
.et_pb_widget_area .menu .current-menu-item {
	background-color: #1e5096;
}

/* ###### Text color active menu item ###### */
.et_pb_widget_area .menu .current-menu-item a {
	color: #fff !important;
}

/* ###### Widget menu title size ###### */
.widget_nav_menu h4 {
	font-weight: bold !important;
        margin-bottom: 10px;
        font-size: 28px !important;
}

@media all and (max-width: 980px) {
.et_pb_column .et_pb_widget.widget_nav_menu {
	width: 100% !important;
}}

.et_pb_widget_area .menu .menu-item {
	padding: 10px 20px 10px 20px;
	-webkit-transition: all .3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
}

.et_pb_widget_area .menu .menu-item a {
	-webkit-transition: all .3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
}

If you have any questions let me know in the comments.