Control header logo’s hover image or overlay colour?

  • Resolved Matheron

    (@matheron)


    7 years, 3 months ago

    How do you change the header logo’s hover image?

    We can control the header logo’s hover opacity with CSS:
    #site-logo #site-logo-inner a:hover img { opacity: 0.7; }
    But I wish for a bit more control.

    One elegant way would be to specify a second header logo image to display only at mouse hover.

    An alternative way could be to control the header logo’s hover overlay rgba colour for pixels that are not completely transparent.

    The main logo, the clicking of which sends the user to the home screen, probably is the most looked-at part of every website. Therefore, it makes some sense to provide this level of control. Perhaps even as a theme feature.

    In any case, I’m happy to use CSS or any other workaround.

    How do you change the header logo’s hover image (or hover overlay colour)?

    • This topic was modified 7 years, 3 months ago by Matheron.
Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author oceanwp

    (@oceanwp)

    Hello, this is something you will need to do via your child theme.

    Thread Starter Matheron

    (@matheron)

    Thank you. I would like to know how to do this myself.

    Using OceanWP, how do you change the image or colour of the header logo on hover?

    Could you please let me know how, if possible step by step?

    Theme Author oceanwp

    (@oceanwp)

    Hello, I don’t do custom customization, sorry.
    You will need to do some work so if you don’t know how to do, you will need to see this with a developer.

    Thread Starter Matheron

    (@matheron)

    Thank you, that is clearer.

    Elementor was quite proud of their image hover state feature when they released it in the summer of 2017. As you can see, their users were not less enthusiastic in their comments.

    So I think that more than one OceanWP user would happily use a distinct logo hover image – if only the option were available in OceanWP.

    Is this feature request stillborn to you?
    Or could I open a GitHub issue on for consideration?

    Theme Author oceanwp

    (@oceanwp)

    You can do this manually via the logo.php file.
    Copy/paste this file into the same path in your child theme, add your image manually to this file, and add css to display it to the hover, for example:

    #site-logo #site-logo-inner a:hover img.custom-logo {display: none;}
    #site-logo #site-logo-inner a:hover img.hover-logo {display: block;}

    1. https://youtu.be/lYDsIKv1CE0
    2. https://youtu.be/xXrHOptvF1c (You need Ocean Elementor Widgets – Logo Widget https://oceanwp.org/extension/ocean-elementor-widgets/ )

    Or if you do not want to buy, use CSS styles.

    • This reply was modified 7 years, 3 months ago by Vad.
    Thread Starter Matheron

    (@matheron)

    Good, thank you @oceanwp and @vadym1 .

    I will try your suggestions.

    Theme Author oceanwp

    (@oceanwp)

    Hello, having received no reply from you, I assume that you have found a solution to your problem, so I close this topic.
    Feel free to open a new one if you encounter another issue ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Control header logo’s hover image or overlay colour?’ is closed to new replies.