Unnecessary Spacing After Menu Items

Add this to your custom css:

form.search-form {
    margin-bottom: 0;
}

The height of your menu items is only 60px but the <div> that contains them is 76px. The easiest way I have found to solve for this issue is to apply a max-height to the <div> like this:

.nav-primary .wrap {
max-height: 60px;
}

When I use the console in Chrome to apply this rule it cuts out the extra space under your menu options, may be worth a look but make sure it doesn’t bite you when you scale down for responsive design.

The height of your menu items is only 60px but the <div> that contains them is 76px.

The height of 76px is a computed value, because the search form at the right end of the menu has a bottom margin of 16px. Your approach will work, but it will not address the root cause. You are always better off addressing the root cause, rather than applying a band-aid solution, which max-height is in this case.

Thanks for help!! that worked perfectly.