Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1487046

    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

    #1487053

    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

    #1487231

    ok, thx Ismael, I need to play around with the settings …

    Cheers, Tilman

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.