Tri-Level Header

Template #001

Headers

The Tri-Level Header features a top bar with quick-click buttons and info, a middle header with logo and contact info + icons, and a bottom navigation header with the menu items. Fully responsive, but will need to be tweaked depending on the content that gets added to it.

*Needs to be updated to make use of global colors and fonts

Example In Use

Posted By

Jordyn P

How To Install

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Download Files

Full Zip File Download

JSON Files

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

How To Install

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Copy & Paste CSS

Add this CSS to Customizer > Custom CSS/JS

Lines 8, 29, 68, 110, 121, 126, 145 all control the height and width of the logo. You will need to edit these sizes so that the logo fits properly.

				
					/* MIDDLE HEADER */

#site-logo #site-logo-inner a:hover img {
	opacity: .9;
}

#site-header #site-logo #site-logo-inner a img, #site-header.center-header #site-navigation-wrap .middle-site-logo a img {
    max-height: 100px;
}

#top-bar-wrap {
	z-index: 100;
}

.is-sticky #top-bar-wrap {
    z-index: 999;
}

#site-header-inner {
	padding-bottom: 0!important;
	padding-top: 0!important;
}

#site-header.medium-header .top-col.logo-col {
	text-align: left;
}

#site-header.medium-header .top-col.col-1 {
	width: 390px!important;
	flex: none;
	margin-right: 40px;
}

.header-topbar .elementor-container {
	float: right!important;
	margin: 0!important;
}

.header-topbar .elementor-column-wrap {
	margin-right: 0!important;
}

.special-button-thing {
	margin-top: -10px;
	margin-bottom: -10px;
}

.special-button-thing h3{
	text-align: left!important;
	margin-bottom: 0!important;
	font-size: 24px;
	color:#1EAAC2;
	line-height: 1!important;
	margin-top: 2px;
}

.special-button-thing i.fal {
	color: #fff!important;
	background: #1eaac2;
	padding: 12px;
	font-size: 24px;
	margin-right: 10px;
	vertical-align: middle!important;
}

@media only screen and (max-width: 1135px) {
	#site-header.medium-header .top-col.col-1 {
		width: 300px!important;
		margin-right: 0px;
	}
	#mobile-dropdown .oceanwp-social-menu {
		display: none!important;
	}
	
	.special-button-thing {
	margin-top: -10px;
	margin-bottom: -10px;
}

.special-button-thing h3{
	font-size: 18px;
}

.special-button-thing i.fal {
	padding: 8px;
	font-size: 16px;
}
	#top-bar-content, #topbar-template {
		width: 100%!important;
	}
	#site-header.medium-header .oceanwp-mobile-menu-icon a.side-panel-btn {
		margin-left: 72px;
		position: relative;
		top: auto;
		width: auto;
		padding: 0px 20px!important;
		line-height: 50px!important;
	}
	.side-panel-text {
		display: inline-block;
	}
	.side-panel-btn .side-panel-icon {
		font-size: 14px!important;
		display: inline-block!important;
	}
}

@media only screen and (max-width: 900px) {
	#site-header.medium-header .top-col.col-1 {
		width: 200px!important;
		margin-right: 0px;
	}
	
	.top-col h3 {
		font-size: 14px!important;
	}
}

@media only screen and (max-width: 767px) {
	#site-header.medium-header .top-col.col-1 {
		width:250px!important;
		float: left;
	}
	
#site-header #site-logo #site-logo-inner a img, #site-header.center-header #site-navigation-wrap .middle-site-logo a img {
    max-height: 80px;
    margin-top: 0px;
    margin-bottom: 0px;
}
	.header-topbar .elementor-container {
		float: none!important;
		margin: 0!important;
	}
	#mobile-dropdown .oceanwp-social-menu {
		display: block!important;
	}
	
	#site-header.medium-header .oceanwp-mobile-menu-icon a.mobile-menu {
		margin-left: 0px;
	}
	#site-header.medium-header .oceanwp-mobile-menu-icon a:hover {
		background: rgba(0,0,0,.25);
	}
	#site-header #site-logo #site-logo-inner a img, #site-header.center-header #site-navigation-wrap .middle-site-logo a img {
    max-height: 120px;
    margin: 0 auto!important;
	}
}

@media only screen and (max-width: 595px) {
	.m-only {
		display: block;
	}
	.d-only {
		display: none!important;
	}
	.topbar-content {
		padding-right: 10px;
	}
}

@media only screen and (max-width: 480px) {
	.mobile-phone-button {
  display: block;
}

}