{"id":5528,"date":"2018-10-30T11:47:30","date_gmt":"2018-10-30T10:47:30","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=5528"},"modified":"2025-04-24T06:39:52","modified_gmt":"2025-04-24T04:39:52","slug":"how-to-build-a-services-sidebar-menu","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/","title":{"rendered":"How to build a services sidebar menu"},"content":{"rendered":"\n<p>In this tutorial, I\u2019ll 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.<\/p>\n\n\n\n<p>You can find a live demo here:<\/p>\n\n\n<div class=\"gb-button-wrapper gb-button-wrapper-20958b72\">\n\n<a class=\"gb-button gb-button-3ac61617 gb-button-text demo-button-free-layouts\" href=\"https:\/\/www.demo.markhendriksen.com\/service-1\/\" target=\"_blank\" rel=\"noopener noreferrer\">Demo Website<\/a>\n\n<\/div>\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Step by step tutorial<\/h2>\n\n\n\n<p><strong>Step 1<\/strong><br>For this example I created 5 services pages that I want to show up in the sidebar menu. I use a 1\/4 \u2013 3\/4 column structure. This is how I set it up.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1416\" height=\"661\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu.jpg\" alt=\"Service pages for sub menu\" class=\"wp-image-5539\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu.jpg 1416w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu-380x177.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu-680x317.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu-300x140.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu-768x359.jpg 768w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu-1024x478.jpg 1024w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu-720x336.jpg 720w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu-610x285.jpg 610w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu-1080x504.jpg 1080w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Service-pages-for-sub-menu-510x238.jpg 510w\" sizes=\"(max-width: 1416px) 100vw, 1416px\" \/><\/figure>\n\n\n\n<p><strong>Step 2<\/strong><br>Go to Appearance &gt; Menus and create a new menu. Under Menu Settings don\u2019t check anything. In this menu you need to add the pages you want to show up in the sidebar menu.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1731\" height=\"784\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu.jpg\" alt=\"create a sub menu\" class=\"wp-image-5530\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu.jpg 1731w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu-380x172.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu-680x308.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu-300x136.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu-768x348.jpg 768w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu-1024x464.jpg 1024w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu-720x326.jpg 720w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu-610x276.jpg 610w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu-1080x489.jpg 1080w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/create-a-sub-menu-510x231.jpg 510w\" sizes=\"(max-width: 1731px) 100vw, 1731px\" \/><\/figure>\n\n\n\n<p><strong>Step 3<\/strong><br>Go to Appearance &gt; Widgets add a new sidebar (You need to refresh the page in order to see the new sidebar)<\/p>\n\n\n\n<p>Add the Navigation widget to this sidebar and assign the services menu to it<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1025\" height=\"629\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2018\/10\/side-menu-widget.jpg\" alt=\"side menu widget\" class=\"wp-image-5534\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/side-menu-widget.jpg 1025w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/side-menu-widget-380x233.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/side-menu-widget-680x417.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/side-menu-widget-300x184.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/side-menu-widget-768x471.jpg 768w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/side-menu-widget-1024x628.jpg 1024w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/side-menu-widget-652x400.jpg 652w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/side-menu-widget-610x374.jpg 610w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/side-menu-widget-510x313.jpg 510w\" sizes=\"(max-width: 1025px) 100vw, 1025px\" \/><\/figure>\n\n\n\n<p><strong>Step 4<\/strong><br>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1170\" height=\"690\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget.jpg\" alt=\"Assign services menu to the sidebar widget\" class=\"wp-image-5542\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget.jpg 1170w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget-380x224.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget-680x401.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget-300x177.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget-768x453.jpg 768w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget-1024x604.jpg 1024w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget-678x400.jpg 678w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget-610x360.jpg 610w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget-1080x637.jpg 1080w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/Assign-services-menu-to-the-sidebar-widget-510x301.jpg 510w\" sizes=\"(max-width: 1170px) 100vw, 1170px\" \/><\/figure>\n\n\n\n<p><strong>Step 5<\/strong><br>Use the following CSS to style the services menu. Place this CSS in Divi &gt; Custom CSS or in your child theme CSS file if you have one. You can learn&nbsp;<a href=\"https:\/\/www.markhendriksen.com\/divi-child-theme-essential-guide\/\">here<\/a>&nbsp;on how to create one.<\/p>\n\n\n\n<p>I have added some comments (in grey) where you can change the color codes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* ###### SIDEBAR MENU  ###### *\/\n\n\/* ###### Background color menu item ###### *\/\n.et_pb_widget_area .menu .menu-item {\n\tbackground-color: #e5e5e5;\n}\n\n\/* ###### Text color menu item ###### *\/\n.et_pb_widget_area .menu .menu-item a {\n\tcolor: #444;\n}\n\n\/* ###### Background hover ###### *\/\n.et_pb_widget_area .menu .menu-item:hover {\n\tbackground-color: #1e5096;\n}\n\n\/* ###### Text color hover ###### *\/\n.et_pb_widget_area .menu .menu-item:hover a {\n\tcolor: #fff;\n}\n\n\/* ###### Background color active menu item ###### *\/\n.et_pb_widget_area .menu .current-menu-item {\n\tbackground-color: #1e5096;\n}\n\n\/* ###### Text color active menu item ###### *\/\n.et_pb_widget_area .menu .current-menu-item a {\n\tcolor: #fff !important;\n}\n\n\/* ###### Widget menu title size ###### *\/\n.widget_nav_menu h4 {\n\tfont-weight: bold !important;\n        margin-bottom: 10px;\n        font-size: 28px !important;\n}\n\n@media all and (max-width: 980px) {\n.et_pb_column .et_pb_widget.widget_nav_menu {\n\twidth: 100% !important;\n}}\n\n.et_pb_widget_area .menu .menu-item {\n\tpadding: 10px 20px 10px 20px;\n\t-webkit-transition: all .3s ease-out;\n        -moz-transition: all 0.3s ease-out;\n        -ms-transition: all 0.3s ease-out;\n        -o-transition: all 0.3s ease-out;\n        transition: all 0.3s ease-out;\n}\n\n.et_pb_widget_area .menu .menu-item a {\n\t-webkit-transition: all .3s ease-out;\n        -moz-transition: all 0.3s ease-out;\n        -ms-transition: all 0.3s ease-out;\n        -o-transition: all 0.3s ease-out;\n        transition: all 0.3s ease-out;\n}<\/code><\/pre>\n\n\n\n<p>If you have any questions let me know in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":5550,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-5528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to build a services sidebar menu | Markhendriksen.com<\/title>\n<meta name=\"description\" content=\"In this step by step tutorial, I\u2019ll be covering how you can build a side menu for your service pages in Divi. And we will be styling it with some CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build a services sidebar menu | Markhendriksen.com\" \/>\n<meta property=\"og:description\" content=\"In this step by step tutorial, I\u2019ll be covering how you can build a side menu for your service pages in Divi. And we will be styling it with some CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-30T10:47:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T04:39:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/How-to-build-a-services-sidebar-menu.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to build a services sidebar menu\",\"datePublished\":\"2018-10-30T10:47:30+00:00\",\"dateModified\":\"2025-04-24T04:39:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/\"},\"wordCount\":295,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/How-to-build-a-services-sidebar-menu.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/\",\"name\":\"How to build a services sidebar menu | Markhendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/How-to-build-a-services-sidebar-menu.jpg\",\"datePublished\":\"2018-10-30T10:47:30+00:00\",\"dateModified\":\"2025-04-24T04:39:52+00:00\",\"description\":\"In this step by step tutorial, I\u2019ll be covering how you can build a side menu for your service pages in Divi. And we will be styling it with some CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/How-to-build-a-services-sidebar-menu.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/How-to-build-a-services-sidebar-menu.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to build a services sidebar menu\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to build a services sidebar menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to build a services sidebar menu | Markhendriksen.com","description":"In this step by step tutorial, I\u2019ll be covering how you can build a side menu for your service pages in Divi. And we will be styling it with some CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/","og_locale":"en_US","og_type":"article","og_title":"How to build a services sidebar menu | Markhendriksen.com","og_description":"In this step by step tutorial, I\u2019ll be covering how you can build a side menu for your service pages in Divi. And we will be styling it with some CSS.","og_url":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2018-10-30T10:47:30+00:00","article_modified_time":"2025-04-24T04:39:52+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/How-to-build-a-services-sidebar-menu.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to build a services sidebar menu","datePublished":"2018-10-30T10:47:30+00:00","dateModified":"2025-04-24T04:39:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/"},"wordCount":295,"commentCount":5,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/How-to-build-a-services-sidebar-menu.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/","url":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/","name":"How to build a services sidebar menu | Markhendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/How-to-build-a-services-sidebar-menu.jpg","datePublished":"2018-10-30T10:47:30+00:00","dateModified":"2025-04-24T04:39:52+00:00","description":"In this step by step tutorial, I\u2019ll be covering how you can build a side menu for your service pages in Divi. And we will be styling it with some CSS.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/How-to-build-a-services-sidebar-menu.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/10\/How-to-build-a-services-sidebar-menu.jpg","width":720,"height":400,"caption":"How to build a services sidebar menu"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-build-a-services-sidebar-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to build a services sidebar menu"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/5528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=5528"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/5528\/revisions"}],"predecessor-version":[{"id":35641,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/5528\/revisions\/35641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/5550"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=5528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=5528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=5528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}