SOLVED - Foundation Top Bar add dividers to drop down menus only

Classic Stacks
1

Updated: Joe to the rescue!

.dropdown li {border-bottom: 1px solid #900;}

.dropdown li:last-child { border-bottom: none;}

Can anyone help with adding divider lines only to the drop down menus and not the main top menu?

dividers.png716×393 354 KB

@zeebe @joeworkman @tav

2

Try the TopBarSurgeon stack from Big White Duck, it allows a bit of Topbar customisation

1 Like
3

thank you, @pmjd. I’ve got that and playing around with it now. Do I add it in addition to the Top Bar Stack?

4

Yes it needs to have both top bar and top bar surgeon. I think the Drop Down settings at the bottom are where you might find the settings you need to add a border to the top only.

1 Like
5

Did you check out Joe’s video on this page

https://foundationstacks.com/learn/navigation/

Been a while since I watched it but think he shows how to do that.

1 Like
6

I answered you on WS, this is already built into foundation. Add the <hr> tag where you want a divider. I sent you link to docs.

2 Likes
7

I add dividers to items in the drop down menu to divide the menu into discrete areas. You could do this to all menu items or just where you want to:

Add an off-site page between the menu items that you want to divide.
Name the page in the pages menu as < hr > (I’ve had to add a space here either side of the tags to stop it formatting in the post but don’t add spaces).
Make sure the off-site page is checked as ‘show in navigation’ in general settings.

For example.


Hover over ‘Exterior’ in the top bar menu and you can see I have used dividers above exterior dining and exterior carpets.

2 Likes
8

Here is a project file showing you how it is done


@swilliam and @ricinport are correct

2 Likes
9

ok so the offsite page is the only way to go, then? No site-wide code?

10

Related to this, I want dividers to appear only when using the hamburger menu and dropdowns on a phone or tablet. I have a regular menu at other sizes and I don’t want dividers between top items. There are no submenus on this simple site.

11

Try this:
Set the add divider in top-bar on and add this CSS:

@media only screen and (min-width:40em) {
.divider {
	display:none;
}
}