You're trying to change the link target for your logo, but the anchor (<a>
) tag is not properly wrapping the SVG, causing the logo to be unclickable or linked incorrectly.
1. Locate the Logo Element in the Webflow Designer
- Open your Webflow project and go to the Designer.
- In the Navigator panel, find the element that contains your logo (usually in the Navbar component).
- Look for a div or image containing the SVG and an anchor (
Link Block
) either above or below it.
2. Ensure the Logo is Inside a Link Block
- If the SVG is not inside a Link Block, you’ll need to add one.
- Drag a Link Block (from the Add panel) into your desired logo container area.
- Move the SVG or image element inside the Link Block, making sure the SVG is nested directly within it. Do not place the anchor tag outside the image.
3. Set the Link Destination
- Select the Link Block wrapping the SVG.
- In the Element Settings panel (D key), under Link Settings, choose where the link should go:
- Page – select an internal page like “Home.”
- URL – for external destinations.
- Section – for scrolling to a section ID on the page.
4. Check for Styling Issues
- If the logo appears misaligned after wrapping it in a Link Block:
- Inspect the styles on the Link Block to ensure it's not interfering with positioning.
- Make sure the Link Block’s display is set appropriately (often inline-block or flex) to match your layout.
5. Publish and Test
- Publish your site and open the homepage.
- Click the logo to verify it now links correctly to the desired destination.
Summary
To fix the logo link, wrap the SVG or image in a Link Block, place it correctly in your layout, and set the appropriate destination in the Element Settings panel. Avoid placing the anchor below the image—ensure it's the direct wrapper.