Template #001
Tri-Level Header
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
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
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;
}
}