1) with blog module

Add a blog module and style it without featured image and excerpt.

Example: https://www.deduifruurlo.nl/arrangementen/borrel-arrangement/

2) With coloured vertical border

This gives a thick coloured line next to the menu.
And it highlights the currently active menu with a different colour with a » symbol

/* -- START custom menu in sidebar widget -- */
.hws_menu_widget_left {
padding-right: 30px !important;
border-right: 20px solid #F6EB20 !important;
}
.hws_menu_widget_right {
padding-left: 30px !important;
border-left: 20px solid #F6EB20 !important;
}
/* -- END custom menu in sidebar widget -- */Code language: CSS (css)

You can also add an icon by adding this

font-family: FontAwesome;
content: "\f054";Code language: HTTP (http)

3) With coloured link for active page

/* -- START custom menu in sidebar widget -- */
.widget_nav_menu li.current-menu-item a {
    color: #dd0000 !important;
}
.widget_nav_menu li.current-menu-item a:after {
    content: "»";
    padding-right: 5px;
    float: right;
    color: #D74D25;
}
/* -- END custom menu in sidebar widget -- */Code language: CSS (css)

With coloured link for active section

The current-menu-item setting from the previous css doesn’t work for menu items that are based on sections on a single page, like on a one page website.

https://ayanize.com/snippets/how-to-highlight-current-menu-items-on-a-one-page-site-in-divi

1. Give each section a css id
2. Create a menu with custom links where each url is #cssid
3. Copy the following in the Divi theme options » integrations » head.
   • You can also save this in a code module on the page that needs this functionality. That prevents conflicts on a page that doesn’t have a menu with anchor links (secondary menubar won’t work).
   • You can also save this without the yellow highlights in a scroll.js file that you store in the \childtheme folder (see url for details).
4. And in the Divi options custom css you copy this css

<script type="text/javascript">
(function($) {
$(document).ready(function() {
    var navChildren = $("#top-menu li").children();
    var aArray = [];
    for (var i = 0; i < navChildren.length; i++) {
        var aChild = navChildren[i];
        var ahref = $(aChild).attr('href');
        aArray.push(ahref);
    }
    $(window).scroll(function() {
        var windowPos = $(window).scrollTop();
        var windowHeight = $(window).height();
        var docHeight = $(document).height();
        for (var i = 0; i < aArray.length; i++) {
            var theID = aArray[i];
            var secPosition = $(theID).offset().top;
            secPosition = secPosition - 135;
            var divHeight = $(theID).height();
            divHeight = divHeight + 90;
            if (windowPos >= secPosition && windowPos < (secPosition + divHeight)) {
                $("a[href='" + theID + "']").parent().addClass("active");
            } else {
                $("a[href='" + theID + "']").parent().removeClass("active");
            }
        }
    });

});
})(jQuery);
</script> Code language: HTML, XML (xml)

#top-menu .active a{
	color: #c3095f!important;
}
#top-menu .active a:after{
	content: '';
	border-bottom: 2px solid #c3095f;
	display: block;
	width: 100%;
	position: relative;
	top: 8px;
}Code language: CSS (css)

If you use it for a sidebar widget with custom menu, you need to use #top-menu as the css id in the sidebar module.