Buy me a coffee

Click a Dropdown Menu Title > Show a Custom Content

#1. First, you create a Page in Not Linked with Name/URL

  • Custom Content – /custom-content

click-a-dropdown-menu-title-show-a-custom-content-08-min

and design layout for this page

Here I added a List Section (with some CSS code to make the style beautiful)

click-a-dropdown-menu-title-show-a-custom-content-01-min

#2. Install this plugin

The plugin will give you some code to add to the Code Injection Header and footer, like this.

add-a-section-to-top-of-blog-posts-use-not-linked-page-03-min

add-a-section-to-top-of-blog-posts-use-not-linked-page-04-min

#3. Use this code to Custom CSS box

/* @tuanphan */
.wm-load-container {
  display: none;
}
.show-hide ~ #siteWrapper a.header-nav-folder-title:after {
    transform: rotate(180deg);
    display: inline-block;
}
.show-hide {
    display: block !important;
}
  a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}

click-a-dropdown-menu-title-show-a-custom-content-02-min

#4. Use this code to Code Injection – Header, under #2 code

<div data-wm-plugin="load" data-target="/custom-content"></div>

click-a-dropdown-menu-title-show-a-custom-content-03-min

#5. Use this code to Code Injection – Footer, under #2 code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('a.header-nav-folder-title[href="/locations"]').click(function(){
    	$('.wm-load-container').toggleClass('show-hide');
    });
});
</script>

click-a-dropdown-menu-title-show-a-custom-content-04-min

#6. Note

/locations in the code

 

click-a-dropdown-menu-title-show-a-custom-content-05-min

is Dropdown Menu Title Link

click-a-dropdown-menu-title-show-a-custom-content-06-min

#7. Result

When clicking the Locations Dropdown Title, custom content will appear. You can use this to create a mega menu.

 

click-a-dropdown-menu-title-show-a-custom-content-07-min

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder