Why do the main navigation dropdowns have a spacing gap?

Overview

This articles provides a solution for fixing the “spacing gap” found in your Karma main navigation dropdown menus.

General Instructions:

  • If the main navigation dropdown menus have a spacing gap this is because Navigation Descriptions are enabled however you have not added Descriptions to the menu items
  • If you do wish to have Navigation Descriptions you can follow this tutorial for adding them.
  • However if you do not wish to display Navigation Descriptions you will simply need to disable them to remove the spacing gap.
  • To disable Navigation Descriptions click on: Appearance > Site Options > Header and Menu > Main Menu – Item Descriptions and check the box to disable them. Save all Changes and you’re all ready to go 🙂

Please note:

Disabling the Navigation Descriptions will remove the Menu Separator Lines and reduce the padding between each Menu Item. If you do not wish for this to happen but would still like to remove the gap, then instead add the following CSS code to your Site Options Panel: Appearance > Site Options > Styling and CSS > Custom CSS

#menu-main-nav .drop {top:34px !important;}

(click screenshot for a full-size view)