Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Navigation Logo Hover Color

Home Forums Support [Resolved] Navigation Logo Hover Color

Home Forums Support Navigation Logo Hover Color

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #584868
    Derek

    Hello πŸ™‚

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

    Thank you.

    GeneratePress 2.1.2
    #584883
    Leo
    Staff
    Customer Support

    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?

    #584888
    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.

    #584910
    Derek
    #584912
    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?

    #585165
    Leo
    Staff
    Customer Support

    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.

    #585400
    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.

    #585424
    Leo
    Staff
    Customer Support
    #585459
    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!

    #585730
    Leo
    Staff
    Customer Support

    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.

    #585893
    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.

    #585898
    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!

    #585921
    Leo
    Staff
    Customer Support

    Try this CSS:

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

    Perfect. Really happy with the result ty!

    #585945
    Leo
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.