Menu icon Foundation
problem with height of dropdown menu

I am new to foundation and I am having a problem with the height of my navbar dropdown menus.
The navbar has a standard height of 45px and I like to have my dropdowns to be 30px. I cannot find where to change these values.

Either the navbar and the dropdowns all become 30px, but than the menu is not working on a mobile phone.

Please, is there anyone who can help me with some tips?

heightdropdown

I am new to foundation and I am having a problem with the height of my navbar dropdown menus.
The navbar has a standard height of 45px and I like to have my dropdowns to be 30px. I cannot find where to change these values.

Either the navbar and the dropdowns all become 30px, but than the menu is not working on a mobile phone.

Please, is there anyone who can help me with some tips?

Bob Sawyer over 4 years ago

Try this:

.top-bar-section li:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:not(.button) {
    height: 30px;
    line-height: 30px;
}

Rafi Benkual over 4 years ago

Bobs example works well.

Here is an example of doing it with padding on the top-bar-section http://codepen.io/gosupernova/pen/ekHym

You can actually pad the entire top-bar and get the same result on all elements within it.

Bob Sawyer over 4 years ago

Interesting, Rafi. Hadn't thought of doing it that way. My example is based on live code at https://www.ugcorp.com -- although my top bars are the same height as the drop-downs. I just copied the CSS I used for the drop-downs. :)

fvhamburg over 4 years ago

bobs example works fine indeed, but a problem I have now is that the menu on a mobile is not working, although it is visible.
Any Idea how to solve that? I was thinking, leaving the topbar at 45px and the dropdown at 30px. But how?

Rafi Benkual over 4 years ago

I would wrap this in a media query so it only affects medium-up screens.

fvhamburg over 4 years ago

I could bring the height back from 45px(standard) to 30px, but there is one thing I do not understand.

My navbar items are generated by a cfquery and they work fine when the height is 45px, with 30px most of the items are oke, but some stay at 45px. It looks there must be another class to include to cover this problem, but I have no idea which one. Anyone an idea?