Menu icon Foundation
Any way to alter height of top bar dropdown items independently?

Sorry guys for what might look like a double post - but not able to add to my existing feed for some reason :-(

Still struggling to get independent control of top-bar dropdown heights. I've just made a topbar 70px in height and want the dropdowns to be a sensible height and not take the top-bar dimension as a lead. Not sure where to look. Have tried every scss setting and css override I can think of but still stuck...

Running 5.5 for sites.

Many thanks

Sorry guys for what might look like a double post - but not able to add to my existing feed for some reason :-(

Still struggling to get independent control of top-bar dropdown heights. I've just made a topbar 70px in height and want the dropdowns to be a sensible height and not take the top-bar dimension as a lead. Not sure where to look. Have tried every scss setting and css override I can think of but still stuck...

Running 5.5 for sites.

Many thanks

topbardropdownsites

Sorry guys for what might look like a double post - but not able to add to my existing feed for some reason :-(

Still struggling to get independent control of top-bar dropdown heights. I've just made a topbar 70px in height and want the dropdowns to be a sensible height and not take the top-bar dimension as a lead. Not sure where to look. Have tried every scss setting and css override I can think of but still stuck...

Running 5.5 for sites.

Many thanks

Sorry guys for what might look like a double post - but not able to add to my existing feed for some reason :-(

Still struggling to get independent control of top-bar dropdown heights. I've just made a topbar 70px in height and want the dropdowns to be a sensible height and not take the top-bar dimension as a lead. Not sure where to look. Have tried every scss setting and css override I can think of but still stuck...

Running 5.5 for sites.

Many thanks

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

I saw your other post but deleted it in favor of this one so there are no duplicates.

There is no variable for top-bar <li> height.

The Sass mixin includes this style on line 413 of top-bar.scss which sets the <li> to height auto. This means the link padding must be creating the height, which is controlled by top-bar height.

li {
          width: 100%;
          height: auto;

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

You will have better luck probably changing the CSS on this one:

.top-bar-section .dropdown li {
  height: 1rem;
}

PhilW over 4 years ago

Thanks Rafi,

Almost there... That reduces the dropdown li height but my hovers in that dropdown are now off...

If you've got a minute...

http://goo.gl/HaIb6v

The "Services" menu is the one with the dropdown

I actually made the li height 45 like a standard top-bar.

Cheers

PhilW over 4 years ago

So I've fixed it now...

Needed to override the line-height too which was still inheriting the 70px.

Used these in the end:

ul.dropdown li {
    height: rem-calc(45);
}

ul.dropdown li a {
  height: rem-calc(45);
  line-height: rem-calc(45) !important;
}

PhilW over 4 years ago

Just a disappearing mobile second level menu to fix now... :-)

It just zooms off to the left never to be seen again!

PhilW over 4 years ago

Fixed my disappearing menu....

It was my hack to left align dropdown menu on right aligned topbar section...

.top-bar-section ul.right li .dropdown {
  left: 0; right: auto;
  }

Stuffed it into a media query instead and all good :-)