Custom image positioning in header X

Support
#1

Hi, could someone please assist me with some CSS code? I need to add an additional accreditation logo in the main header where the main logo is but it needs to be justified to the right. This will need to be visible in Desktop and Tablet but NOT in Phone screen size as I don’t think the phone screen size will accommodate the extra logo.

I have uploaded a mock-up of what I need to achieve. The image I need to place is the two small Visit England Award logos which are shown on my mock-up positioned in the header, set to the right and under the News & Exclusive Offers button. Although these are two logos, it is in fact one image file which is 90px wide x 60px high.

#2

Hi There,

For more complex headers like you are aiming for we recommend using PRO which has Pro Header Builder.

If you purchased X before the release of Pro you are entitled to a free upgrade.

Hope it helps

#3

Hi, I do not want to upgrade to pro just yet as this would inevitably create more issues of its own and will result in more development hours.

For now I just need to place these small logos as described. I know before pro you guys were excellent at supporting custom css snippets to do such things and would really appreciate some help with this without having to upgrade to pro.

I know you guys can do this. Please help! :slight_smile:

Thank you.

#4

Hi There,

Let’s try adding it on the fly using JQUERY. Add it on Global JS

jQuery(document).ready(function($) {
	
    $('<img src="http://grimsdyke.com/wp-content/uploads/2016/10/gd-plaque.png" style="float: right;max-width: 90px;    margin-top: -15px;">').insertAfter(".x-brand.img" );

});

To understand the code see this insertafter js function.
To know which element, use dev tools to inspect element: https://screencast-o-matic.com/watch/cbQj2KI6Ut
I have use that image to see how it will work. Change the image source URL.

Hope this helps.

#5

OMG you are amazing!

One thing, this seems to have pushed the main logo over to the left a bit. It should be central. And can we have it so the new Visit England logos don’t appear on mobile screen size?

If you could fix these that would be perfect!

#6

Hi there please kindly add the code below to X > Launch > Options > CSS:

.x-logobar .x-container > img:last-child {
    position: absolute;
    right: 58px;
}

@media (max-width: 540px) {
    .x-logobar .x-container > img:last-child {
        display: none;
    }
}

Hope it helps.

#7

Perfect :slight_smile:

#8

Glad that we could be of a help :slight_smile: