---
title: "How to Change Site Logo on Hover in WordPress? (Show Full Logo on Hover)"
url: https://nexterwp.com/docs/change-site-logo-on-hover-in-wordpress-show-full-logo-on-hover/
date: 2024-11-29
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to change the logo when hovering on your WordPress website? If you have two logo variations, changing the logo on hover can add some interactivity to your..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Change-Site-Logo-on-Hover-in-WordPress_-Show-Full-Logo-on-Hover-1024x519.jpg
word_count: 193
---

# How to Change Site Logo on Hover in WordPress? (Show Full Logo on Hover)

## Key Takeaways

- Nexter Blocks includes the Site Logo block, allowing users to change the site logo on hover in WordPress.
- Users can select Double from the Logo Normal/Dual section to add two different logos for normal and hover states.
- The Nexter Builder can be used for creating templates that incorporate the Site Logo block.

Do you want to change the logo when hovering on your WordPress website? If you have two logo variations, changing the logo on hover can add some interactivity to your website. 

With the Site Logo block from the Nexter Blocks, you can easily change the site logo on hover in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Site Logo block,* [click here](https://nexterwp.com/docs/add-site-logo-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-site-logo/)

To do this, add the Site Logo block to the template and follow the steps -

> *Note:* *To create the template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)*.*

1. Select **Double** from the **Logo Normal/Dual** section.

Now, you'll see two sections to add two different logos.

![](https://nexterwp.com/wp-content/uploads/2024/11/site-logo-logo-double-hover.gif)

2. After selecting the appropriate image type from the** Logo Type** section, select the normal logo image from the **Upload Image**/** Svg **section.

Set the appropriate logo size.

3. Then select the hover logo image from the **Upload Hover Image**/**Svg **section and set the appropriate logo size.

Now you’ll see a different logo on hover.

![](https://nexterwp.com/wp-content/uploads/2024/11/site-logo-logo-double-hover-demo.gif)

## Frequently Asked Questions

**Q: What if my hover logo doesn't change when I follow the steps?**
A: If your hover logo isn't changing, double-check that you've correctly selected both the normal and hover logo images in the Site Logo block settings. Ensure that the images are uploaded properly and that the logo sizes are set appropriately. Sometimes, caching issues can also prevent changes from appearing, so clear your browser cache and refresh the page.

**Q: What are the best practices for logo sizes when using the Site Logo block?**
A: When using the Site Logo block, it's best to use images that are optimized for web display. Aim for a logo size that maintains clarity without being overly large, typically around 200-300 pixels wide for standard logos. This ensures quick loading times while keeping your logo visually appealing. Always check how it appears on different devices to ensure responsiveness.

**Q: What happens if I only upload one logo instead of two?**
A: If you only upload one logo, the hover effect will not function as intended. The Site Logo block requires both a normal logo and a hover logo to display the change on hover. Without the hover logo, the site will simply show the normal logo without any interactivity.