Seperator Bars in Mega Menu

Is there any way to add separator bars in the Mega Menu stack?

Do you mean vertical separators between the top tier navigation items? If so, no, that is not something that Mega Menu does.

I did. I’m searching for some CSS for it with no luck. I will likely turn them into images in a column stack if the client really has to have that feature. Thank you. :smile:

@dropgates, this should get you started. I’m not sure what look you’re trying to achieve, so you’ll have to modify this.

.foundry-mega-menu .top-level-item {
  border-left: 1px solid white;
.foundry-mega-menu .top-level-item:first-child {
  border-left: 1px solid red;
.foundry-mega-menu .top-level-item:last-child {
  border-right: 1px solid green;

The first rule puts a left border on the left side of each button area. That leaves the last button without a border on the right. The 3rd rule adds that. I included the 2nd rule in case you want to do something different on the left side of the first button. The various colors are just to help you see what each rule does.

If you only want borders separating the buttons (i.e. between them), use the first 2 rules and change the second to “border-left:none;”


worked perfectly! THANK YOU.

You’re welcome. Just make sure you test these CSS modifications in all the browsers, especially Windows. When I post them, I’ve usually only checked them in Safari and/or Firefox on OS X. The rest is on you.

If you do see something odd in a different browser and can’t figure it out, post here and I’ll be happy to look at it further.


works fine in IE11; totally appreciate it.