Top menu (with social icons and search) with transparent header

Hello,

Thank You so much for the Kind Words! :)

The Top Bar was not made to be Transparent Header compatible by default. But this is Definitely Possible to implement this by simply adding the following CSS Code:

@media (min-width: 992px) {

	#top-bar {
		z-index: 299;
		border-bottom-color: rgba(0, 0, 0, 0.05);
	}

	.top-links ul li,
	#top-social li {
		border-left-color: rgba(0, 0, 0, 0.05);
	}

	#top-bar.transparent-topbar { background: transparent !important; }

	#top-bar.transparent-topbar + #header.transparent-header + #slider,
	#top-bar.transparent-topbar + #header.transparent-header + .page-title-parallax {
		margin-bottom: -145px;
		top: -145px;
	}

}

.dark .top-links li > a { color: #EEE; }

.dark .top-links li:hover { background-color: rgba(255,255,255,0.15); }

.dark #top-social li { border-left: 0; }

.dark #top-social li a { color: #EEE; }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.