Streaming live at 10am (PST)

"Connect the dots" of a slider navigation

Hi! I’ve managed to change my navigation dots color with some easy custom code, but what i need to do now is to “connect” them. Since i can’t modify the HTML of the slider module, i was wondering if there’s a was of doing this with just CSS, has anyone already donde this?

This would be the proposed design:

and here is my site Read-Only:

I’ll autoreply myself since i’ve found a workaround creating a border-top and adding some negative margin. Probably isn’t best practice but for know ir works! I’ll leave it here just in case somebody finds it useful.

.w-slider-nav { font-size: 20px; border-top: 1px solid #4b276c; } .w-slider-dot { background-color: #4b276c; margin-top: -45px; border: 4px #ede9e5 solid; } .w-slider-dot.w-active { background: #F64843; }