Docs

[Ann]

Hello Hello,

Is there a way to add an image to the top nav bar? I’d like an image to be all the way to the right, next to “contact” – see attached image. I have also attached the image I’d like to add.

Thanks so much!

Ann

[Ann]

This reply has been marked as private.

[Rupok]

Hi Ann,

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://parronhall.marketingofdesign.com/uploads/yourimage.png"/>';
  $( html ).appendTo('.x-navbar-inner');
});

Let’s update http://parronhall.marketingofdesign.com/uploads/yourimage.png with your uploaded image URL.

Then add this under Custom > CSS in the Customizer.

.my-header-img {
  position: absolute;
  right: 10px;
  top: 20px;
  width: 100px;
}
.x-navbar-inner {
  padding-right: 100px;
}

Let’s adjust the CSS if needed.

Cheers!

[Ann]

That worked perfectly!

It does mess up the header on mobile view though, is it possible to hide on mobile view?

Thanks!

Ann

[Rupok]

Hey Ann,

Thanks for writing back and glad that it worked for you. You can add this as well to hide this on mobile :

@media only screen and (max-width: 979px) {
.my-header-img {
  display: none;
}
}

Cheers!

[Ann]

Perfect!

All good now! Thanks again guys!

Ann

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts