Menu icon Foundation
Centering Top Bar Dropdown + Add Padding

I was able to get the topbar dropdown to center itself with its parent element. Here is the Sass I used:

.top-bar-section {
    .right li	{
		.dropdown {
			left: -50%; // This centers the dropdown and helps decide the width
			right: -50%; // This centers the dropdown and helps decide the width
			text-align: center; 
			border-radius: 1px;
			padding: 0 2rem;
			background: $secondary-color;
			li {
				a {
					padding: 0 1rem !important;
					border-bottom: 1px solid lighten($secondary-color, 5%);
					line-height: 50px !important;
				}
			}
		}
	}
}

While this works pretty well for the most part, however the width of the parent ends of deciding the width of the dropdown menu as well.

Demo Link:
http://theadgarage.com/dev/test-site/

As you can see, the dropdown menu width is dependent on the width of the parent menu item.

Is there a better way to do this?

topbar

I was able to get the topbar dropdown to center itself with its parent element. Here is the Sass I used:

.top-bar-section {
    .right li	{
		.dropdown {
			left: -50%; // This centers the dropdown and helps decide the width
			right: -50%; // This centers the dropdown and helps decide the width
			text-align: center; 
			border-radius: 1px;
			padding: 0 2rem;
			background: $secondary-color;
			li {
				a {
					padding: 0 1rem !important;
					border-bottom: 1px solid lighten($secondary-color, 5%);
					line-height: 50px !important;
				}
			}
		}
	}
}

While this works pretty well for the most part, however the width of the parent ends of deciding the width of the dropdown menu as well.

Demo Link:
http://theadgarage.com/dev/test-site/

As you can see, the dropdown menu width is dependent on the width of the parent menu item.

Is there a better way to do this?

Rafi Benkual about 5 years ago

Jeremy,
What are you trying to do? Make the menu 1000px wide like a mega-menu? Does this help?
http://foundation.zurb.com/forum/posts/232-megamenu

Jeremy Englert about 5 years ago

Hi Rafi,

Here is a demo of what I'm trying to achieve:
http://theadgarage.com/dev/test-site/

The only thing I can't figure out is how to center the dropdown menu (with its parent element).

Any ideas?

Jeremy Englert about 5 years ago

I got close:
http://theadgarage.com/dev/test-site/

Now I just need to figure out how to center the dropdown.

Jeremy Englert about 5 years ago

I got closer to what I'm trying to achieve:
http://theadgarage.com/dev/test-site/

I still can't get the dropdown to center under its parent element though.

Any ideas?