Search code examples
csssasszurb-foundationmixins

How to style dropdown buttons using Zurb Foundation 5?

I am using Zurb Foundation 5 with Sass mixins and I want to change the style of the dropdown arrow. I am pretty confident that it lies somewhere inside of here but I'm not sure what it is:

// Dropdown Buttons

// $include-html-button-classes: $include-html-classes;

// We use these to set the color of the pip in dropdown buttons
// $dropdown-button-pip-color: #fff;
// $dropdown-button-pip-color-alt: #333;

// $button-pip-tny: rem-calc(6);
// $button-pip-sml: rem-calc(7);
// $button-pip-med: rem-calc(9);
// $button-pip-lrg: rem-calc(11);

// We use these to style tiny dropdown buttons
// $dropdown-button-padding-tny: $button-pip-tny * 7;
// $dropdown-button-pip-size-tny: $button-pip-tny;
// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1);

// We use these to style small dropdown buttons
// $dropdown-button-padding-sml: $button-pip-sml * 7;
// $dropdown-button-pip-size-sml: $button-pip-sml;
// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1);

// We use these to style medium dropdown buttons
// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2);

// We use these to style large dropdown buttons
// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);

Here is what I have:

enter image description here

And I want the dropdown arrow to look more like this:

enter image description here

How can I achieve this? Thanks in advance!

===== EDIT ===== With this scss:

.dropdown.button:before{
  width: 15px;
  height: 15px;
  border: none;
  background: url("../images/dropdown.png") no-repeat;
}

And this html:

 <a href="#" data-dropdown="drop" class="button login dropdown width-limit">[email protected]</a><br>
      <ul id="drop" data-dropdown-content class="f-dropdown">

The button looks like this:

enter image description here

How do I move the arrow now? Updated jsfiddle:http://jsfiddle.net/Y4jDW/

Solution

  • There is no default arrow фы in your example, but you can overwrite Foundation's styles. Simply add these styles:

    .dropdown.button:before{
  width: 10px;  //width of your arrow
  height: 10px; //height of your arrow
  border: none;
  background: url(...) no-repeat;  //url for image
}