Adding an image with a link to the left of the logo in the header

Support
#1

I would like to add an image with a link to the left of the logo in the header. I am using integrity with inline logo.

here is the site : http://yaakvalley.org

Thanks

#2

Hi @montanag,

Thanks for posting in.

You mean to add another image beside the existing image which is the logo? Or add a link to the existing part of the logo, which is the image instead of text in the logo? If it’s adding another image, then we could do that with jQUery. Please add this code to your global custom javascript with your image URL and link.

jQuery('<a href="http://yaakvalley.org/" class="x-brand img" title="Protect Restore Connect"><img src="http://yaakvalley.allsystemsgomt.com/wp-content/uploads/yvfc-logo2017.png" alt="Protect Restore Connect"></a>').insertBefore('a.x-brand');

Thanks!

#3

Definitely looking to add another image. I added the following code per your instructions and it does not display the image:

jQuery('<a href="http://yaakvalley.org/programs/pacific-northwest-trail-route/" class="x-brand img" title="Protect Restore Connect"><img src="http://yaakvalley.org/wp-content/uploads/pnt1.jpg" alt="Proposed Pacific Northwest Trail Route"></a>').insertBefore('a.x-brand');

Any ideas?

Thanks much for you help!

#4

Hi @montanag,

Add the code in your CUSTOM JS instead of in your Custom CSS.

Hope it helps.

Let us know how it goes.

Thanks.

#5

Ok that does make the image show up but it enlarges the image to more than 3 times the size?

#6

Hello There,

The code displays the actual image dimension. If you want a smaller image, please update the code and use this:

jQuery('<a href="http://yaakvalley.org/programs/pacific-northwest-trail-route/" class="x-brand img" title="Protect Restore Connect"><img src="http://yaakvalley.org/wp-content/uploads/pnt1.jpg" alt="Proposed Pacific Northwest Trail Route" style="max-width: 120px;"></a>').insertBefore('a.x-brand');

Please take note of the max-width: 120px;. You can increase or decreased the size of the image which suites your site design.

We would loved to know if this has work for you. Thank you.

#7

I am so close on this now. The only issue is that it now stacks the logo on top of navbar instead of inline.
I tried adding this to custom css:
.x-container.max {
margin-left: 50px;
}
It moved the image and logo over But it still is stacked.
Also need a small space between the image and the logo

Sorry to keep bugging you on this. I really appreciate your help. I uploaded a screenshot.

#8

Hi montanag,

There is no option in the X theme to do so. You will need to custom code that. You will need to be comfortable coding PHP and install the Child Theme and using the hooks given in this article to override the header PHP file and add the HTML code of the image you want before the logo. Then you will need to add custom CSS code to style that image to make sure it will be set correctly at the left side of the logo and vertically be centered.

Also, you need to read this article to understand what is the best practice of the overriding original theme files.

All the steps above is way beyond our support scope and you will need to hire a developer to do so if you can not do it yourself.

Another alternative for such a case is that you can purchase a conversion from X to Pro theme where you will have a Pro builder that can create the whole header using the header builder. For more information:

Thank you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.