zurb/foundation — pull request #3140 by seantimm (2013-09-04 04:57:51+00:00)
Title: Topbar - With increased height, the dropdown symbol in a dropdown menu, is pushed down almost one line.

**There are 2 JSfiddles below the code snippet.**

When just increasing the topbar height, the ```\00bb"``` (a.k.a. ```»```) indicator in a topbar dropdown menu (which indicates the existence of further dropdowns) is pushed down out of position.

**Cause :**
The snippet of ```scss``` further down is responsible for displaying it, and the **hard-coded** ```margin-top: -16px;``` is causing the problem.
With a topbar with a height of 90px, it should be ```margin-top: -38px;```.
I couldn't find the proper algo to calculate this. And if there isn't, probably a warning near variable ```$topbar-height``` would be appropriate. Or maybe even a new topbar variable (side-by-side with ```$topbar-height```) to set this symbol position correction.
But I assume that when more people look at it, we can come up with something better. It would be nice if this could be automatically calculated, or differently specified in the CSS.

Also, specifying a different symbol than ```\00bb"``` often needs an adjustment of ```margin-top: -16px;```.

https://github.com/zurb/foundation/blob/master/scss/foundation/components/_top-bar.scss#L444-L453
```scss
.dropdown li.has-dropdown {
& > a {
&:after {
border: none;
content: "\00bb";
margin-top: -16px;
#{$opposite-direction}: 5px;
}
}
}
```
**Here is a JSfiddle with the standard 45px topbar height** : http://jsfiddle.net/uNFVA/
**Here is a JSfiddle with a 90px topbar height** : http://jsfiddle.net/AFkkC/
I used the index.html page which is generated from the Foundation 4.3.1 gem for both fiddles, and added the example topbar markup from the topbar docs webpage, and changed the CSS and JS links.
Both fiddles pull JS from the current Repo Master through http://rawgithub.com/ .
The CSS was pulled and compiled from the Repo Master this morning, uploaded to Dropbox and are pulled from there.
But the problem also exists in the Foundation 4.3.1 gem, and before that.

Screenshots here :

45px high Topbar, symbol positioned correctly :

![topbar-dropdown-raquo-position-issue-29-08-2013 10-57-09](https://f.cloud.github.com/assets/2570736/1050536/71607efe-10bb-11e3-8082-b2ab779089d3.png)

90px high Topbar, symbol pushed down almost one line :

![topbar-dropdown-raquo-position-issue-29-08-2013 11-10-27](https://f.cloud.github.com/assets/2570736/1050546/86dd469a-10bb-11e3-8beb-fd74fd1241c0.png)