--- 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-09-13 lang: en author: "Aditya Sharma" description: "A hover logo lets a small icon expand into your full logo, or a mono logo turn into full colour, when visitors point at it. The free Site Logo block..." 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: 390 --- # How to Change Site Logo on Hover in WordPress? (Show Full Logo on Hover) ## Key Takeaways - Nexter Blocks Site Logo block uses Double mode to swap a normal logo for a hover logo, and it works in the free edition and with Nexter Blocks Pro. - Site Logo setup requires two logo files, the normal logo and the hover logo, with both image sizes set to Full so wide logos are not cut off by the default Thumbnail crop. - Hover behavior keeps the same Logo URL Type link for both logos, while touch screens normally show only the normal logo because they have no hover. A hover logo lets a small icon expand into your full logo, or a mono logo turn into full colour, when visitors point at it. The free Site Logo block in Nexter Blocks does this with its **Double** mode. *For every Site Logo setting in one place, see the [Site Logo block guide](https://nexterwp.com/docs/add-site-logo-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-site-logo/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Site Logo, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Two logo files:** the normal logo and the hover logo, ideally the same height. ## Steps - Open your header template or page and add the **Site Logo** block. - In the **Site Logo** panel, select **Double** under **Logo Normal/Dual**. ![The Site Logo panel with Double selected and the hover logo fields](https://nexterwp.com/wp-content/uploads/2026/09/site-logo-layout-double.webp) - Choose **Image** or **SVG** under **Logo Type**, upload the normal logo and set **Image Size** to **Full**. - Upload the second logo in **Upload Hover Image** (or **Upload Hover SVG**) and set **Hover Image Size** to **Full**. - Set **Logo Max Width** and **Hover Logo Max Width**, and optionally a **Hover Transition** time in seconds. - Save, then hover over the logo on your site. ![Selecting Double and uploading a normal and a hover logo in the Site Logo block](https://nexterwp.com/wp-content/uploads/2024/11/site-logo-logo-double-hover.gif) ## Hover Settings | Setting | What it does | Default | | ------- | ------------ | ------- | | Logo Normal/Dual | **Double** turns on the hover logo | Normal | | Upload Hover Image / Upload Hover SVG | The logo shown on hover | Placeholder image | | Hover Image Size | Which image size WordPress serves for the hover logo | Thumbnail | | Hover Logo Max Width | Width of the hover logo, per device | 100px | | Hover Transition | How long the swap takes, in seconds | 0.3 seconds | ## How It Behaves - Before hover, only the normal logo is visible. While the pointer is over it, the hover logo takes its place.- Both logos use the same link from **Logo URL Type**.- Touch screens have no hover, so phone visitors normally see only the normal logo. ![A site header where the logo changes to a second version on hover](https://nexterwp.com/wp-content/uploads/2024/11/site-logo-logo-double-hover-demo.gif) ## Limitations - **Both image sizes default to Thumbnail**, a 150×150 crop. Set both to Full so wide logos are not cut off.- The help text says “Dual”, but the option is labelled **Double**.- Sticky Logo is meant for Normal mode. Use one or the other. ## Troubleshooting ### Nothing changes on hover Check that **Double** is selected and a file is set in **Upload Hover Image**. Without one, the placeholder image is used. ### The hover logo is a different size Match **Hover Logo Max Width** to **Logo Max Width**, and use logo files of the same height. ## Related Docs - [Site Logo block: all settings](https://nexterwp.com/docs/add-site-logo-in-wordpress/)- [Change the logo in a sticky header on scroll](https://nexterwp.com/docs/change-logo-in-sticky-header-on-scroll-in-wordpress/)- [Create a header template in WordPress](https://nexterwp.com/docs/create-header-template-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before setting up a hover logo in WordPress?** A: The setup needs the free Site Logo block in Nexter Blocks, with the block enabled under Nexter > Blocks in your WordPress dashboard. You also need two logo files: the normal logo and the hover logo, and the page recommends keeping them the same height. That matters because mismatched artwork is the fastest way to get a jumpy swap or a cropped result, especially if WordPress serves a thumbnail crop by default. **Q: How do I make my site logo change on hover in WordPress?** A: The hover swap is handled by the Site Logo block in Nexter Blocks using Double mode. Set the normal logo first, then add a second file in Upload Hover Image or Upload Hover SVG, and save the header or page. The key detail is that both logos use the same link from Logo URL Type, so the hover effect changes the image without changing where the logo sends visitors. **Q: Why does my hover logo not change when I point at it?** A: The most common cause is that Double is not selected or no file was added in Upload Hover Image. In that case, the placeholder image stays in place instead of swapping to your hover logo. The page also notes that touch screens have no hover, so phone visitors normally only see the normal logo even when everything is configured correctly. **Q: Why is my hover logo getting cropped or cut off?** A: Both image sizes default to Thumbnail, which is a 150×150 crop, so wide logos can get clipped if you leave the defaults alone. Setting both Image Size and Hover Image Size to Full avoids that crop and keeps the full artwork visible. This matters most for logos with long wordmarks or mono-to-full-colour swaps where width matters more than a square thumbnail. **Q: What is the best way to keep the normal and hover logos the same size?** A: Match Hover Logo Max Width to Logo Max Width and use logo files with the same height. That keeps the swap visually stable instead of making one version feel larger or smaller on hover. The page also gives Hover Transition as an optional timing control in seconds, with 0.3 seconds as the default, so size consistency plus a short transition gives the cleanest result. **Q: Does this hover logo setup work on mobile devices?** A: Touch screens do not have hover, so phone visitors normally see only the normal logo. That makes this feature best for desktop-style pointer interactions rather than mobile behavior. If you need a different logo treatment for scrolling headers instead of hover states, Nexter also has [Change the logo in a sticky header on scroll](https://nexterwp.com/docs/change-logo-in-sticky-header-on-scroll-in-wordpress/), which solves a different problem.