[Resolved] Navigation Logo Hover Color

[Derek]

Hello 🙂

I have my logo inside my menu, and I want to change the color of the logo upon hover.

Thank you.

[Leo]

Hi there,

Hmm not sure if that’s possible.

Have you seen this done on another site before that you can link me to it?

[Derek]

At the very least you should be able to set the opacity upon hover, but I don’t remember how to do that either. I think is possible, you just make the same exact logo, then change the color. Then you have to set the css or something so that when you hover over that area it changes the image.

[Derek]

https://generatepress.com/forums/topic/logo-hover/

Found something here. Ty.

[Derek]

https://generatepress.com/forums/topic/logo-hover/

Ok so that tutorial is for a logo image, and it works because I tested it, I just need to do the same thing, but with the in-menu nav. logo.

Perhaps only a few things in the code need to be changed?

[Leo]

Ok that method is using 2 images.

Try this code:

<div class="site-logo sticky-logo navigation-logo">
      <a href="URL TO CLICK THROUGH TO" class="hover-logos">
            <img src="URL TO YOUR LOGO" alt="" class="logo-regular-state" />
            <img src="URL TO YOUR HOVER LOGO" alt="" class="logo-hover-state" />
      </a>
</div>

With this hook: https://docs.generatepress.com/article/generate_inside_navigation/

And the original CSS should work as well.

[Derek]

“Insert your hook contents in here.” is that were the above code would go?

Sorry I tried to read it and understand but I’ll need your help on this one 😛

Thanks.

[Leo]

Yup exactly 🙂

[Derek]

Cool. Here is what I ended up with:

add_action( 'generate_inside_navigation','in_menu_nav_logo_hover' );  
function example_function_name() { ?> 
    <div class="site-logo sticky-logo navigation-logo">
      <a href="my home page url">
            <img src="white logo url" alt="" class="logo-regular-state" />
            <img src="color logo url" alt="" class="logo-hover-state" />
      </a>
</div>
<?php }

Note: It’s not working 😛 Did I mess something up? I put this code in the gp hooks “before header content.”

Thanks!

[Leo]

The function name needs to match your action name:

add_action( 'generate_inside_navigation','in_menu_nav_logo_hover' );  
function in_menu_nav_logo_hover() { ?> 
    <div class="site-logo sticky-logo navigation-logo">
      <a href="my home page url">
            <img src="white logo url" alt="" class="logo-regular-state" />
            <img src="color logo url" alt="" class="logo-hover-state" />
      </a>
    </div>
<?php }

And it needs to be added with one of these methods: https://docs.generatepress.com/article/adding-php/

Make sure you replace the white logo url with actual image URL as well.

[Derek]

Ah ok so I was doing many things wrong, can’t say I’m surprised. Well, now I have 3 logos inside the menu lol. I tried to removed the logo via the customizer and that did away with two of the three, and left me with a giant logo. So I’m going to do some resizing and such and see if I can figure this out then report back. ty.

[Derek]

Ok so I had to resize the image since with this method the customizer isn’t involved, then I had to re-do the logo urls, now it’s working….almost. I guess I just need some custom css to center it? Would you be able to help me with that Leo?

Thank you!

[Leo]

Try this CSS:

.site-logo {
    float: left;
    padding-top: 13px;
}

[Derek]

Perfect. Really happy with the result ty!

[Leo]

Glad to hear!

[Author]

Posts