Tagged: header bar
Dear Team,
i would like to create a top header area above the menu – with with more info than just a thin “addtl. phone info” bar. More like here: https://autohaus-timmann.com/
-> How do I realize this w/ Enfold?
thx a lot & best regards
Tilman
Hey Tilman,
Thank you for the inquiry.
You can add the same html in the phone info field.
<div class="top-bar-content">
<span class="content">
<i class="fa rt-icon-placeholder2"></i> Süderquerweg 651 • 21037 Hamburg
</span>
<span class="content">
<i class="fa rt-icon-telephone"></i>
<a href="tel:+49407375020">+49 40 737 50 20</a>
</span>
<span class="content">
<i class="fa rt-icon-3-time"></i> Mo. bis Fr. 7:15-18:00
</span></div>
Then, add this css code to adjust the layout of the content:
.top-bar-content {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
}
.top-bar-content .content {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 14px;
}
.top-bar-content i {
font-family: "FontAwesome";
font-style: normal;
font-size: 16px;
display: inline-block;
}
You may need to install the FontAwesome plugin to properly display the icons.
— https://wordpress.org/plugins/font-awesome/
Best regards,
Ismael
ok, thx Ismael, I need to play around with the settings …
Cheers, Tilman