Logo Area Arrangement with ClicKable Buttons

[bluetroop2]

Hello X Team,

Please see the attached image sample. That’s how I want my logo area to look with clickable email and phone buttons. Below is my global CSS and JavaScript. Can you tell what I need to correct to achieve the desired results?..

CSS

.x-navbar .desktop .x-nav > li:last-child > a {
border-right: none;
}
.x-navbar .desktop .x-nav > li > a {
border-right: 1px solid white;
}
.x-navbar .sub-menu a{
font-size:17px;
font-family: 'Signika'
}
.x-logobar {
background: url(/wp-content/uploads/2019/07/NavBackground4.jpg) no-repeat;
background-size: cover;
}
.masthead-stacked .x-brand {
  float: left;
}
.header-contact {
  position: absolute;
}

JavaScript

jQuery(document).ready(function($) {
  var html = '<div class="header-contact"><a href="mailto:director@lakecitieschamber.com"><img src="/wp-content/uploads/2020/03/buttonEmail.png" alt="Email Us"</a> &nbsp; &nbsp; &nbsp;<a href="tel:940-497-3097"><img src="/wp-content/uploads/2020/03/buttonPhone.png" alt="Call Us"</a></div>;
  $( html ).appendTo('.x-logobar-inner .x-container');
});

Here is what I have now…

Home

[jade]

Hi @bluetroop2,

There is a Javascript error in your code that is why it is not working.

Please update it to:

(function($){

  var html = '<div class="header-contact"><a href="mailto:director@lakecitieschamber.com"><img src="/wp-content/uploads/2020/03/buttonEmail.png" alt="Email Us"</a> &nbsp; &nbsp; &nbsp;<a href="tel:940-497-3097"><img src="/wp-content/uploads/2020/03/buttonPhone.png" alt="Call Us"</a></div>';
  $( html ).appendTo('.x-logobar-inner .x-container');

})(jQuery);

then update this CSS:

.header-contact {
    float: right;
}

to

.header-contact {
    float: right;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[bluetroop2]

This works, thank you for your help, Jade.

[ruenel]

You’re most welcome!
We’re glad @Jade were able to help you out.