How to style divider lines in Foundation Top Bar - need a dotted line

I need to create occasional horizontal dividers between page links in my Drop Down menus. Using Foundation’s Top Bar - easy enough to do using


, and colour adjustment is easy using the ‘accent’ setting.

However, I need to have a Dotted Line - not having any luck with my attempts at inline styling or CSS. Anyone know how to do this?

Try This:

.top-bar-section .divider{
border-top:dotted;
color:FFFFFF;
size:1px;
}

3 Likes

Many thanks Scott - works very well except the sizing doesn’t seem to make any difference in RW. Not critical but I’d like the dots to be smaller if possible.

1 Like

Try throwing an !important after the size statement

1 Like

Thanks - tried this but no luck. I’ll take a fresh look tomorrow

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.