--- title: "How to Change Site Logo on Hover in Elementor? (Show Full Logo on Hover)" url: https://theplusaddons.com/docs/change-site-logo-on-hover-in-elementor/ date: 2023-10-27 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "Swapping the logo when someone hovers over it is a small touch that makes a header feel alive — useful when you have two versions of your mark, such as..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Change-Site-Logo-on-Hover-in-Elementor_-1024x536.jpg word_count: 1281 --- # How to Change Site Logo on Hover in Elementor? (Show Full Logo on Hover) ## - The Site Logo widget in The Plus Addons for Elementor Pro switches between two images on hover when Logo is set to Double, with no custom CSS required. - Logo Type controls the available fields: Image shows Image Logo and Hover Logo Image, while SVG shows Only Svg Logo and Hover Svg Logo. - Logo Max Width and Hover Logo Max Width are separate controls, and both start at 100 px with a range up to 1000 px. - The Site Logo widget does not read the logo from Appearance > Customize > Site Identity, so leaving Image Logo empty renders nothing at all. Swapping the logo when someone hovers over it is a small touch that makes a header feel alive — useful when you have two versions of your mark, such as an icon and the full wordmark. The **Site Logo** widget from The Plus Addons for Elementor can do this on its own. Set **Logo** to **Double**, give it two images, and it switches between them on hover with no CSS of your own. *To check the complete feature overview documentation of The Plus Addons for Elementor Site Logo widget, [click here](https://theplusaddons.com/docs/site-logo-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** — **Site Logo** is a Pro-only widget. It does not exist in the free The Plus Addons for Elementor plugin, so there is no free version of it to fall back on.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active, alongside The Plus Addons for Elementor Pro.- **Widget to enable:** **Site Logo**, under **The Plus Addons > Widgets**. Search for **Site Logo** and turn the toggle on.- **Where to put it:** a header or footer template, built with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro's Theme Builder. The widget renders on an ordinary page too, but a header is where a logo belongs.- **An image in your media library.** The widget does **not** read the logo from **Appearance > Customize > Site Identity**. If you do not pick an image inside the widget, nothing is shown at all.- **Two logo images** in your media library — the normal one and the one to show on hover. https://www.youtube.com/watch?v=kfX5sSR8XYI ## Set up the hover logo - Edit your header template with Elementor and select the **Site Logo** widget, or drag a new one in.- In the **Content** section, set **Logo** to **Double**. A second set of controls appears below for the hover logo.- Set **Logo Type** to **Image** or **SVG**. This decides which pair of controls you get: **Image Logo** and **Hover Logo Image**, or **Only Svg Logo** and **Hover Svg Logo**. You never see both pairs at once.- Choose the normal logo in **Image Logo** and set **Logo Max Width**. It starts at **100 px**.- Choose the hover logo in **Hover Logo Image** and set **Hover Logo Max Width**, which also starts at **100 px**. Leave this image empty and nothing will happen on hover. ![With Logo set to Double, a second control Hover Logo Image appears for the logo shown on hover.](https://theplusaddons.com/wp-content/uploads/2026/09/sitelogo-double.webp) Save, open the page on the front end and hover over the logo. The second image takes the place of the first. ![On hover the header swaps to the second logo.](https://theplusaddons.com/wp-content/uploads/2026/09/sitelogo-result-hover.webp) ![The site logo changing to a second image on hover on the front end](https://theplusaddons.com/wp-content/uploads/2023/10/site-logo-on-hover-demo.gif) ## Settings | Setting | What it does | Default | | ------- | ------------ | ------- | | **Logo** | **Double** is the one you need here: it shows two logo images and switches them on hover. **Normal** shows a single image. | Normal | | **Logo Type** | Image or SVG. It decides whether you get **Image Logo** and **Hover Logo Image**, or **Only Svg Logo** and **Hover Svg Logo**. | Image | | **Image Logo** | The logo shown at rest. | Empty | | **Logo Max Width** | Maximum width of the resting logo, per device. Range 0 to 1000. | 100 px | | **Hover Logo Image** | The logo shown on hover. Only appears while **Logo** is **Double**. | Empty | | **Hover Logo Max Width** | Maximum width of the hover logo, per device. Range 0 to 1000. | 100 px | ## How It Behaves Measured on the front end, before and during hover: - **At rest only the normal logo is visible.** The hover logo is in the page but hidden and fully transparent.- **On hover they trade places.** The normal logo is hidden and the hover logo becomes visible at full opacity, at the width you set.- **The swap is handled by the widget.** The wrapper only gains the hover class when a hover image is actually set, so you do not need any custom CSS.- **The two images are sized separately.** **Logo Max Width** and **Hover Logo Max Width** are independent, so a taller or wider hover version can be brought back into line. ## Where the logo image comes from **The logo is only ever the image you pick inside the widget.** The Site Logo widget does not read the logo set in **Appearance > Customize > Site Identity**, and it has no fallback of its own. With **Image Logo** left empty the widget outputs an empty, zero-width container: no image, no placeholder, no site name, nothing at all. This was checked twice, including on a site that had a logo configured in Site Identity — it still rendered nothing. In a flex header row that empty container is an invisible item you cannot see or click. ## Limitations - **Double with an empty Hover Logo Image does nothing.** The widget renders a single logo and hovering changes nothing at all — the page is identical at rest and on hover. There is no warning in the editor, so if hover seems dead, this is the first thing to check.- **There is no Site Identity fallback.** The widget ignores the logo set in **Appearance > Customize > Site Identity**. Leave **Image Logo** empty and it renders an empty, zero-width container instead of an image or a placeholder.- **The logo starts small.** **Logo Max Width** defaults to **100 px**, which is narrower than most logo files. If your logo looks tiny, this is why; raise it, the slider runs to 1000 px.- **Hover is a mouse thing.** On a touch screen there is no hover state, so visitors on phones and tablets only ever see the resting logo.- **You cannot combine hover with the sticky logo.** **Sticky Logo** is only offered while **Logo** is set to **Normal**, so a header cannot do both from this widget.- **There is no Style tab.** The panel has **Content**, **Extra Options**, **Need Help?** and Elementor's **Advanced** tab, and nothing else. Any spacing, border or background has to come from the Advanced tab.- **You cannot edit the alt text or the link title.** Both are set to your site name automatically, not to the image's own alt text and not to anything you can type in the widget.- **There is no transition control.** The widget gives you the two images and the swap, and nothing to tune the timing or easing of it. ## Not verified So you know exactly what has and has not been checked: - **The SVG path.** **Logo Type = SVG** and the **Only Svg Logo** controls were read in the plugin source only. No SVG logo was rendered and tested, so nothing about how SVG behaves is claimed here beyond the control's own instruction to choose an .svg file from the media library.- **Touch devices.** The swap was measured with a mouse hover on a desktop viewport only.- **Tablet and mobile.** **Logo Max Width**, **Hover Logo Max Width** and **Alignment** are responsive controls, but only the desktop value was measured. No tablet or mobile viewport was tested.- **Image Resolution other than Full.** Only the default **Full** was used.- **The header template flow.** Everything was measured with the widget in an ordinary page container, which is what the sticky behaviour actually keys off. Building the header in Nexter Builder or Elementor Pro's Theme Builder was not reproduced. ## Troubleshooting ### Nothing happens when I hover **Hover Logo Image** is empty. With **Logo** set to **Double** but no hover image chosen, the widget renders one logo and the hover state does nothing. Pick the second image and save. ### I cannot find the Hover Logo Image control It only exists while **Logo** is set to **Double** and **Logo Type** is **Image**. With **Logo Type** on **SVG** the control is called **Hover Svg Logo** instead. ### The hover logo is the wrong size It has its own slider. Set **Hover Logo Max Width**, not **Logo Max Width** — both start at **100 px**. ### No logo shows at all, hover or not **Image Logo** is empty. The widget does not fall back to the logo in **Appearance > Customize > Site Identity**; it renders nothing. ## Related Docs - [Site Logo Widget Settings Overview](https://theplusaddons.com/docs/site-logo-widget-settings-overview/)- [How to Change Logo in Sticky Header on Scroll in Elementor](https://theplusaddons.com/docs/change-logo-in-sticky-header-on-scroll-in-elementor/) ## Frequently Asked Questions **Q: What do I need before I can change the site logo on hover in Elementor?** A: The setup depends on the Pro-only Site Logo widget from The Plus Addons for Elementor, plus Elementor free and The Plus Addons for Elementor Pro being installed and active. You also need two logo images in your media library, because the hover effect swaps between a normal image and a second hover image. The widget does not pull from Appearance > Customize > Site Identity, so the logo has to be chosen inside the widget itself. **Q: Why does nothing happen when I hover over the logo?** A: The usual cause is an empty Hover Logo Image field while Logo is set to Double. In that state, the widget only has one image to show, so hovering changes nothing. The swap only works when both the resting logo and the hover logo are set. A useful check is to confirm that the hover image is actually selected before testing on the front end. **Q: Can I use the site logo from WordPress Site Identity for this hover effect?** A: The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH does not read the logo from Appearance > Customize > Site Identity for this widget. The Site Logo widget only uses the image you pick inside the widget, and it has no fallback of its own. If Image Logo is left empty, it renders an empty zero-width container instead of showing a site identity logo or placeholder. **Q: What is the best way to size the normal and hover logos separately?** A: Use Logo Max Width for the resting logo and Hover Logo Max Width for the hover version, because they are independent controls. Both start at 100 px, which is often smaller than a real header logo, so a tiny-looking mark usually means the default width is still in place. Keeping them separate matters when one version is wider or taller than the other and needs its own adjustment. **Q: Does this hover logo work on phones and tablets?** A: Hover is a mouse-only behavior here, so touch screens do not get a hover state. On phones and tablets, visitors only see the resting logo because there is no pointer hover to trigger the swap. That makes this effect best suited to desktop headers where a mouse can actually pass over the logo area. **Q: Can I use sticky logo and hover logo together in the same header?** A: The widget does not combine those two behaviors in one setup. Sticky Logo is only available when Logo is set to Normal, while the hover swap requires Logo to be Double. That means you have to choose between a sticky-logo behavior and a double-logo hover swap in this widget rather than stacking both on one header.