Customize Menu Block with Leader Dots

Site URL: http://www.blackbookbar.com

Hi. 

My site (www.blackbookbar.com) uses CSS to add leader dots between the menu items and prices. To make the menu easier for my client to update, I'd like to use Squarespace's built-in Menu Block feature rather than custom code blocks, but I want to keep the look of the leader dots.

I assume this can be done with a combination of scripting and css but it is well above my knowledge level. 

Any ideas on how to achieve this? Thanks in advance for any help!

3 hours ago, cchs said:

Site URL: http://www.blackbookbar.com

Hi. 

My site (www.blackbookbar.com) uses CSS to add leader dots between the menu items and prices. To make the menu easier for my client to update, I'd like to use Squarespace's built-in Menu Block feature rather than custom code blocks, but I want to keep the look of the leader dots.

I assume this can be done with a combination of scripting and css but it is well above my knowledge level. 

Any ideas on how to achieve this? Thanks in advance for any help!

You should create a menu with menu block first so we can have a look, the dots can be achieved using css border

Thanks. If you go to www.blackbookbar.com/drinks you will see an example at the top of the page that uses a code-block to create leader dots.

Below that the beer list is created using Squarespace's menu block.

On 7/23/2021 at 12:21 PM, cchs said:

Thanks. If you go to www.blackbookbar.com/drinks you will see an example at the top of the page that uses a code-block to create leader dots.

Below that the beer list is created using Squarespace's menu block.

Can't do the same. You can achieve similar by adding this to Design > Custom CSS

.menu-item {
    border-bottom: 2px dotted white;
    padding-bottom: 10px !important;
}