Docs

[ldollard]

Hi,

If there anyway to create a mouse hover over effect for the main logo in the theme.

So for instance. if you hovered over the “Corridor5” logo at the top…

http://corridor5.novelcreativeagency.com/

…it would change to another logo, perhaps saying “home” or whatever.

Thanks

[Lely]

Hi There,

Please try adding this CSS on Appearance > Customize > Custom > Edit Global CSS:

a.x-brand.img:hover img {
    opacity: 0;
}
a.x-brand.img:hover {
    background-image: url('http://corridor5.novelcreativeagency.com/wp-content/uploads/2016/08/deadtrees.jpg');
}

Then change the image to your new logo.

Hope this helps.

[ldollard]

this makes the image turn into a pattern and replicate itself like the url shows

http://corridor5.novelcreativeagency.com/

So two questions, how do i make it only show one copy of the image and secondly, how do i make the hover over only appear once the page has been scrolled down with the logo now inline, so in otherwords the hover over only affects the logo inline and not stacked.

thanks

[Rue Nel]

Hello There,

Please update the given css code and use this instead:

.x-navbar.x-navbar-fixed-top .x-brand.img:hover img {
    opacity: 0;
    transition: all 0.15s linear;
}

.x-navbar.x-navbar-fixed-top .x-brand.img:hover {
    background-image: url('http://corridor5.novelcreativeagency.com/wp-content/uploads/2016/08/home-icon-silhouette_318-85097.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.5s linear;
}

Please let us know if this works out for you.

[ldollard]

Rue as usual you are a genius. One more question. How do i apply css to move it in, i tried

I just want the house to be inline with the large image. without that fade from left, its hard to see where to apply the css as it wont show in chrome inspector.

thanks so much

[Joao]

Hi There,

Please try using :

.x-navbar.x-navbar-fixed-top .x-brand.img:hover img {
    max-height: 60px;
}

BUT I would recommend you editing the logos in Photoshop or similar software in a way they are aligned without CSS.

Ideally both logos would have the same dimensions, even if in the case of the house most of the picture is a transparent block.

Hope it makes sense.

Joao

[ldollard]

Joao… lol obviously they should be the same size, sorry for being so stupid (this is not sarcasm lol) i’ll do that instead.

Thanks so much.

[Joao]

You are welcome 🙂

Let us know if we can help with anything else.

Joao

[Author]

Posts