Jump to content

Anchor Link to Dropdown Menu in Header

Recommended Posts

Hey all,

First, you'll need a password to see the site right now: Teckton1

https://teckton.squarespace.com/

I am working on a client's site that has a dropdown menu in the header to display categories of products. On the homepage there is a section about their products with a button that shows "view products." There is not one product page since they needed to be set up each like separate portfolios, thus the dropdown.

When it is clicked, I want it to anchor back up to the top of the page AND open up the dropdown menu. So far I can only get it to anchor back up to the top. (Desktop view only)

The tricky part is on mobile view it needs to open up the collapsed header options rather than open the dropdown menu - this I have gotten to work successfully.

This code also generates the button mentioned above. It was adjusted to look like the other buttons on the site.

I've pasted the code I have currently in the site below. Any advice?

Disclaimer: I am not a coder. I have used ai to assist in writing code snippets for the very little coding I do need until I find a coder to collaborate with. I know very very little, and I am absolutely open for guidance and direction.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll to Top and Open Product Dropdown</title>
<style>
/* Center text inside the button */
#yui_3_17_2_1_1708440256551_17927 .sqs-html-content {
  text-align: center;
  line-height: 2em; /* Match the height of the button */
  vertical-align: middle;
}

/* Set button dimensions and remove outline */
#yui_3_17_2_1_1708440256551_17927 {
  font-size: 1.4em;
  padding: 0.8em; /* Keep padding as it was */
  height: 2em; /* Set the height to 2 grid units */
  outline: 0px;
}
</style>
</head>
<body>

<!-- Your existing button -->
<a class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" onclick="return false;" style="cursor: text;" id="yui_3_17_2_1_1708440256551_17927">
    <div id="yui_3_17_2_1_1708440256551_17575" class="sqs-dd-invalid-handle yui3-widget sqs-html">
        <div id="yui_3_17_2_1_1708440256551_17577" class="sqs-html-content">View Products</div>
    </div>
</a>

<script>
document.addEventListener("DOMContentLoaded", function() {
  var existingButton = document.getElementById('yui_3_17_2_1_1708440256551_17927');
  var productDropdownLink = document.querySelector('#header > div.header-announcement-bar-wrapper > div.header-inner.container--fluid.header-mobile-layout-logo-left-nav-right.header-layout-nav-right > div.header-display-desktop > div.header-title-nav-wrapper > div.header-nav > div > nav > div.header-nav-item.header-nav-item--folder > div');
  var menuToggleButton = document.querySelector('.header-burger-btn');

  // Scroll to top and open product dropdown (for desktop)
  existingButton.addEventListener('click', function() {
    // Scroll to the top of the page
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });

    // Open product dropdown (for desktop)
    if (!isMobileDevice()) {
      if (productDropdownLink) {
        productDropdownLink.click();
      }
    }
  });

  // Open collapsed header menu (for mobile)
  existingButton.addEventListener('click', function() {
    // Open the collapsed header menu (for mobile)
    if (isMobileDevice()) {
      if (menuToggleButton) {
        menuToggleButton.click();
      }
    }
  });

  // Function to check if the device is a mobile device
  function isMobileDevice() {
    return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
  }
});
</script>

</body>
</html>

Edited by KatieVetter
Adding Link.
Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

5 minutes ago, KatieVetter said:

On the homepage there is a section about their products with a button that shows "view products." There is not one product page since they needed to be set up each like separate portfolios

Have you considered creating a "/products" page that only contains tiles, one for each of the portfolios, Red Oak, Walnut, Hickory and so on? Your View Products button could then link directly to this page, allowing them to choose one of the different store pages, instead of using the dropdown?

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

I did consider that, but it interfered with the flow of the site in a way I didn't love. I thought it was too many pages within a page, given that each product line has a few sub categories as well. Lots of pages, lots of clicks... Does that make sense?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.