Menu icon Foundation
top-bar Dropdown (child) smaller than 45px

Help

How can I change the height of the drop-down menus on the top bar with large screens? In foundation 5.03 it was no problem, but in 5.11 things changed

css5.11topbar

Help

How can I change the height of the drop-down menus on the top bar with large screens? In foundation 5.03 it was no problem, but in 5.11 things changed

Rafi Benkual over 5 years ago

The topbar <li> height is based on the font size in px with the padding added, 12px X 2. On this page they are 33px high.

Can you explain how you did it in 5.03?

Hannes Lehner over 5 years ago

Sorry, it was 5.02.
I just changed padding .top-bar-section .dropdown li a { .. padding: 12px 15px; <!-- reduced to 6px 15px -->
But in 5.11 it has no effect.

Bojan St over 5 years ago

I pretty much have the same problem, this chunk of code that is used for topbar anchors is cascading to the dropdown class

.top-bar-section li:not(.has-form) a:not(.button) {
padding: 0 20px;
line-height: 60px;
background: white;
}

end then not letting the padding to be set on .dropdown li a ... it prints this in the browser but it is overwritten by the first part

.top-bar-section .dropdown li a {
color: #8a8a8a;
line-height: 1;
white-space: nowrap;
padding: 12px 20px;
background: white;
}

Hannes Lehner over 5 years ago

Exact: It seems, there is no way to Change the Dropdown-Class. In this case, 5.11 has no benefit for me and I have to use further 5.02.

I fixed the problem now like this, but I don't know, whether it is recommended:

Line 1246:
Renamed
.top-bar-section li:not(.has-form) a:not(.button)
in
.top-bar-section li a:not(.button)

Line 1281:
changed
margin-top: -8px
in
margin-top: -2px

Line 1289:
changed
.top-bar-section .dropdown li a {
padding: 12px 15px; }
in
.top-bar-section .dropdown li a {
padding: 6px 15px; }

It seems to work!

JCJ80 over 5 years ago

Hi

I have had this issue and i got it to do what i wanted by adding a class to the drop down item and adding the following to an overriding CSS file (not the best way i know)

.top-bar-section li:not(.has-form) a.MYOWNCLASS:not(.button) {

height:30px;
lin-height:30px;

}

hector_sapien about 5 years ago

Is there a solution for this?
I've even tried putting the css is the header and it's still overridden.

thx!