Travelify gap between header and submenu on site

Travelify
1

Site: www.ilanewton.org

I posted this on word-press not realizing there was a support form right here. I want to start with saying I am new to word press and coding, especially the use of CSS. I’m learning quickly, but I apologize for silly questions.

I am working on creating a website for our company. I am using the Travelify theme and so far love it, but I am noticing that there is a gap between the drop options for the main menu at the top and the options under each menu.

As a result when you move your mouse down to try to select a sub-option, the menu closes. I’ve tried googling results, and have tried adding lines of CSS code from other topics to my custom CSS area, but I am having no luck. I seached through topics on this forum as well and to no avail. I’m not sure how to close the gap in the main header menu or where I would even find the code I am supposed to edit to fix it. Any help would be GREATLY appreciated! Im just not sure what I’m doing wrong at this point.

Ive attached a screen shot. It is hard to see the gap due to the white-on-white, but if you look closely you can see what I’m looking at. It also shows the last line of CSS code I attempted to add to fix the issue.

2

Issue resolved! Under the style.css page I changed:

#main-nav ul li ul {
	position: absolute;
	background-color: #fff;
	border-bottom: 1px solid #439f55;
	top: 40px;
	left: 0px;
	width: 190px;
}

to

#main-nav ul li ul {
	position: absolute;
	background-color: #fff;
	border-bottom: 1px solid #439f55;
	top: 35px;
	left: 0px;
	width: 190px;
}
3

Hi @teaghue,

Awesome great to see you got that resolved.

Please advise if you have more questions.

Have a fantastic day!

Cheers,
Movin