Making a customized text in the header clickable

1 hour ago, tuanphan said:

It requires <script> code

Use this code to Website Tools > Code Injection > FOOTER

DO NOT add code to CSS box

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<div class="header-custom-info"><a href="tel:08032707655">08032 70 76 55</a><a href="mailto:info@schweinsteiger-bau.de"><i class="fa-regular fa-envelope"></i> info@schweinsteiger-bau.de</a></div>').appendTo('.header-actions.header-actions--right');
});
</script>
<style>
 .header-actions.header-actions--right {
    display: flex !important;
    position: absolute;
    right: 0;
}
  .header-title-logo::after {
    display: none !important;
}
 .header-actions-action.header-actions-action--social {
    display: none !important;
}
  .header-custom-info>a:nth-child(1) {
    margin-left: 20px;
}
</style>
  

 

Thank you. This is what finally worked for me:

 

<!-- Text in Header clickable -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    // Define the HTML content to be added to the header
    var customInfoHtml = '<div class="header-custom-info">' +
                           '<a href="tel:08032707655">' +
                             '<i class="fa-solid fa-phone"></i> 08032 70 76 55' +
                           '</a>' +
                           '<a href="mailto:info@schweinsteiger-bau.de">' +
                             '<i class="fa-solid fa-envelope"></i> info@schweinsteiger-bau.de' +
                           '</a>' +
                         '</div>';
    // Append the custom HTML content to the header actions container on the right
    $(customInfoHtml).appendTo('.header-actions.header-actions--right');
  });
</script>
<style>
/* Ensure the header actions container on the right is flex and positioned absolutely to the right */
.header-actions.header-actions--right {
  display: flex !important;
  position: absolute;
  right: 0;
}

/* Remove any after pseudo-element from the header title logo */
.header-title-logo::after {
  display: none !important;
}

/* Hide the social actions in the header */
.header-actions-action.header-actions-action--social {
  display: none !important;
}

/* Style the custom header info links */
.header-custom-info a {
  margin-left: 0; /* Remove left margin to align links to the left */
  display: block; /* Make each link a block element to appear on a new line */
  font-size: 14px; /* Set font size to a smaller value */
  line-height: 1.2; /* Reduce line height to decrease line spacing */
  font-family: 'Gendis', sans-serif; /* Set font to Gendis */
  margin-bottom: 4px; /* Add margin bottom to control spacing between links */
}

/* Ensure the entire custom info container is left-aligned */
.header-custom-info {
  text-align: left; /* Align text to the left */
}

/* Media query to hide the custom info container on screens smaller than 768px */
@media (max-width: 768px) {
  .header-custom-info {
    display: none; /* Hide the custom info on mobile devices */
  }
}
</style>
<!-- Text in Header clickable -->