CODEWITHSUNDEEP
csssasszurb-foundationzurb-foundation-5
Boss Nass
Boss Nass

Reputation: 3522

Zurb Foundation adjust topbar dropdown height

I have adjusted the height of topbar within _topbar.scss to 76 though this also seems to be affecting the dropdown

// Height and margin
$topbar-height: rem-calc(76) !default;

I have changed around 430 to the following, which reduces the height of the dropdown, but then pushes the top margins out on the menu

      // Styling elements inside of dropdowns
  .dropdown {
    padding: 0;
    position: absolute;
    #{$default-float}: 100%;
    top: 0;
    z-index: 99;
    @include topbar-hide-dropdown();

    li {
      width: 100%;
      height: $topbar-height/2;

      a {
        font-weight: $topbar-dropdown-link-weight;
        padding: 8px $topbar-link-padding;
        &.parent-link {
          font-weight: $topbar-link-weight;
        }
      }

enter image description here

Upvotes: 2

Views: 654

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

When you inspect the HTML-code of a dropdown you will find that the title and items of the menu render all in the same ul (modified by javascript), for instance:

<ul class="dropdown">
<li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
<li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Button Dropdown</a></li>
<li><a href="#">First link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul>

So, yes when i change $topbar-height the height of all these items changes.

With $topbar-height: rem-calc(90); my dropdown will look like that shown in the figure below:

enter image description here

Now i think a possible solution for your issue can be to make the items of the dropdown less high after applying $topbar-height: rem-calc(90);. This should effect every item after the first two items in the ul.dropdown.

You can use the SCSS code like that shown beneath to do that:

.top-bar ul.dropdown li:nth-child(n+2) a, 
.top-bar ul.dropdown li.active:nth-child(n+2) a {
line-height: rem-calc(45);
}

(in your situation you should put the above code at the end of _topbar.scss)

After recompiling your code, the dropdown now should look as follows:

enter image description here

Finally you should notice that editing _topbar.scss is bad practice in most cases, cause doing so disable you from updating foundation. You should create a app.scss and compile that file:

@import "settings";
@import "foundation";

.top-bar ul.dropdown li:nth-child(n+2) a, 
.top-bar ul.dropdown li.active:nth-child(n+2) a {
line-height: rem-calc(45);
}

and your (custom) _setttings.scss:

$topbar-height: rem-calc(90);

Upvotes: 2

Related Questions