Docs

[mahmoud237]

How to add a custom image on the navbar to be like the attached photo ?

[mahmoud237]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in!
You can add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($) {
  var html = '<img class="my-header-img" src="http://placehold.it/200x50">';
  $( html ).appendTo('.x-navbar-inner .x-container');
});

Change the image path http://placehold.it/200×50 with your uploaded image URL.

Then add this under Custom > CSS in the Customizer.

.my-header-img {
  display: block;
  left: calc(50% - 100px);
  position: absolute;
  top: 15px;
}

You might need to change the left value that will depend on the image width, the half of the image width. Adjust according to your need.

Cheers!

[mahmoud237]

Perfect it worked 🙂

How can I add href link to this image ?

[Nico]

Hi There,

Change the code above.

jQuery(document).ready(function($) {
  var html = '<a href="urlhere.com"><img class="my-header-img" src="http://placehold.it/200x50"></a>';
  $( html ).appendTo('.x-navbar-inner .x-container');
});

Hope it helps.

Let us know how it goes.

Thanks.

[mahmoud237]

it worked perfectly ,

Thank you 🙂

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts