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


(Lisa Sandler) #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?

@zeebe @joeworkman @tav


(Paul Dennison) #2

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


(Lisa Sandler) #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?


(Paul Dennison) #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.


(Doug Bennett) #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.


(scott williams) #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.


(Ric) #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.
https://casaejardim.pt
Hover over ‘Exterior’ in the top bar menu and you can see I have used dividers above exterior dining and exterior carpets.


(Robert Ziebol 🖖🏼) #8

Here is a project file showing you how it is done


@swilliam and @ricinport are correct


(Lisa Sandler) #9

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


(Larry F.) #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.


(Doug Bennett) #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;
}
}