How can I fix the issue where clicking on the 'contact' anchor link in the footer menu highlights the contact box in a blue line in Webflow?

Published on
September 22, 2023

To fix the issue where clicking on the 'contact' anchor link in the footer menu highlights the contact box in a blue line in Webflow, you can use custom code or the built-in Webflow interactions. Here's a step-by-step guide on both methods:

1. Using Custom Code:

  • First, make sure you have a custom code embed available on your Webflow project. You can add this to your project by going to Dashboard > Project Settings > Custom Code, and then adding the code to the Footer section.
  • Identify the class or ID of the element you want to scroll to when the 'contact' anchor link is clicked.
  • Open the custom code embed and write JavaScript code to override the default anchor scrolling behavior. You can use the scrollTo() method to scroll smoothly to the target element.
  • Here's an example of the JavaScript code you can use:
document.addEventListener('DOMContentLoaded', function () {  var contactLink = document.querySelector('.footer-menu-item.contact'); // Replace '.footer-menu-item.contact' with the appropriate CSS class or ID of your 'contact' anchor link  contactLink.addEventListener('click', function (e) {    e.preventDefault(); // Prevent the default anchor link behavior    var contactBox = document.querySelector('.contact-box'); // Replace '.contact-box' with the appropriate CSS class or ID of your contact box element    contactBox.scrollIntoView({ behavior: 'smooth' }); // Scroll smoothly to the contact box  });});

2. Using Webflow Interactions:

  • Open your Webflow project in the Designer.
  • Select the 'contact' anchor link in the footer menu and go to the Interactions panel.
  • Click on the '+' icon to create a new interaction and select 'Scroll into View' as the trigger.
  • Choose the contact box element as the target element to scroll into view.
  • Customize any additional animation or transition settings as desired.
  • Preview your site and test the 'contact' anchor link to see if the issue is resolved.

By following either of these methods, you should be able to fix the issue where clicking on the 'contact' anchor link in the footer menu highlights the contact box in a blue line in Webflow.

Additional Questions:

  1. How can I override the default anchor scrolling behavior in Webflow?
  2. Can I add custom code to my Webflow project to modify the anchor link behavior?
  3. How do I create smooth scrolling to a specific element in Webflow using interactions?