Custom Header Image Issues

Replace EVERYTHING in Custom CSS field you have now with this code instead. In your code there were duplicate values as well as missing brackets.

/* remove page title */
.page .entry-title {
    display: none;
}

/* hide text on slider */
.featured-text {
    display: none;
}

@media (min-width: 767px) {
	.header-image {
		margin-top: -100px;
	}

	.hgroup-wrap {
		padding-top: 0;
		padding-bottom: 0;
	}

	#main-nav {
		margin-top: -38px;
	}
	.hgroup-wrap {
		z-index: 100;
		position: relative;
	}
}

@media (max-width: 767px) {
	.hgroup-right .social-icons {
		display: block;
	}

}

Name “Navigation” for usability in case you would use blog index for front page. That way you would have a blank line of the top which of course wouldn’t be very intuitive. Here is a “fix” for that.