If you've ever looked into creating a mega menu on Squarespace but been disappointed when you found out that you can't, this mega menu tutorial is for you! The good news is that the CSS below will fix both of these issues, and align your menu so it looks a lot better. Click here! How do I create a mega menu in Squarespace? Each cocktail contains either an unusual brand of alcohol, imported exclusively for Panorama. dnmddy Circle Member 145 Posted August 12, 2020 @ThompsonWebDesign your link is broken, is this still an active plugin for 7.1? Since Squarespace menus are so boring and basic, there are not great options for bloggers, online stores, photographers or anyone who has lots of category options or variety of services. One of the biggest issues with mega menus is how to handle them on mobile devices. 2. For support, please submit a support ticket within 60days of purchase. Easy to install and use Which Squarespace Plan Do I Need To Be On? With simple copy-and-paste code and clear installation video, you'll be up and running in no time. https://squarecamp.com/services/mega-menu-plugin-for-a-squarespace-site, Introducing Clubs: Join Artists and Photographers and Online Sellers, Grow your web design business with Squarespace Circle. How do I customize a button in Squarespace? The Nielson Norman Group defines mega menus as "large, rectangular menus [that] group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices." When implemented the right way, a mega menu can add real value to your website's user experience. Standout program covers a lot of concepts, including most of my mini-courses on this shop. Now lets style the position. $10.00 sale. You need to add more CSS and Javascript every time you want more mega menus. Applicable to Squarespace 7.0 and Squarespace 7.1. You can NOT embed scripts in embed blocks or code blocks in the . With over 100 fantastic customizations, you'll find the perfect code-free way to style your Squarespace Mega Menu to fit your site's design and branding. This 11-step guide will show you how to make your custom CSS cleaner, and more understandable. Add a Mega Menu to Squarespace 7.0 Brine templates S-E Web Design 5.72K subscribers Subscribe 3.9K views 2 years ago Squarespace Header Customization Get the plugin:. Caroline Smith is a front-end web developer with 5+ years of experience in web development. The Nielson Norman Group defines mega menus as large, rectangular menus [that] group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices. When implemented the right way, a mega menu can add real value to your websites user experience. Option grouping refers to how the user choices are chunked into related sets. Please check your inbox to confirm your subscription, and then you will receive your PDF in your inbox. Keep in mind that the mega menus are not meant to be scrolled through - everything needs to be displayed to the user without them having to scroll. Add Spark Plugin to your website and you can transform your Mega Menu in just a few clicks! Squarespace may sometimes update their code base which may render the plugin inoperable, this is solely outside of our control so we cannot guarantee that our plugin will be compatible with future updates made by Squarespace or versions of Squarespace. No, our plugin will not allow you to create nested navigation folders. Assign Styles > Site Navigation. Parent Menu: The parent menu of the menu item The store contains plugins that I have built to help you create a more unique and customized Squarespace website. Please refer to this list. 2. Create a Mega Menu in Squarespace. We're going to use JavaScript to combine, or 'append' our footer Mega Menu to the folder menu at the top of the page. Hi Daniel, you have not completed the installation steps. https://support.squarespace.com/hc/en-us/articles/115005308187-What-s-my-site-s-version-and-template-. You will have lifetime access to this course and necessary updates. Last updated on September 24, 2022 @ 11:12 pm. Believe it or not, you can actually get sued for having an inaccessible website, much like companies can get sued for not having accessible doors or ramps at their establishments (learn more by reading Title III Lawsuits: 10 Big Companies Sued Over Website Accessibility.) Add a folder menu item to the Main Navigation section. This optimizes the users ability to navigate your site, and find what they need, fast. 8. Web accessibility is not just a trendy word - its the act of ensuring websites and web tools are properly designed and coded so that people with disabilities can use them. LEARN & SHOPAll ResourcesCustom WorkPlugin StoreCode CuriousCSS Course Dashboard, ABOUT & SUPPORTAbout WillAsk a QuestionPlugin HelpPlugin UpdatesLeave a ReviewAccount. First, find the file you want to upload and click on the Upload icon. In my examples, Im calling mine Mens Clothes and my url is /mens-clothes. Creating A Mega Menu In Squarespace Squarespace 7.0 Squarespace 7.1 Designed correctly mega menus can make it easier for your visitors to navigate their way around your website whilst also promoting your most valuable content. Please refer to our Terms & Conditions. learn more about what makes this mega menu superior to other mega menus on the market. Combine this with the Modern Mobile Menu Dropdown plugin for a beautiful desktop AND mobile navigation experience! Go to SETTINGS ADVANCED CODE INJECTION and copy and paste the following code into the HEADER section. Design > Site Styles > Fonts . Use Spark Plugin to animate the header links when you hover over them. We need to disable that first. Looking to add a mega menu to 7.1 templates? An example of a full width mega menu using the Squarespace Mega Menu plugin. How do I create a pricing table in Squarespace? If youre looking for a tutorial for Squarespace 7.0, check out this one from Vigasan at Adlytic Marketing. Since we only added our footer section in the folder that is within the header-display-desktop element, our folder still appears as normal on mobile, just with no content in it. 2. Mega Menu (free) by Adlytic WillMyers and SnazzyView 2 Email me if you have need any help (free, of course.). Mega Menu V3 - Squarespace 7.1 $80.00 This Mega Menu tutorial shows you how to add icons and short descriptions to certain menu items for a clearer and more engaging navigation experience. Then copy and paste the following code to the very top and click Save: MEGAMENUURL refers to the URL slug you created in step two of the process. Yes, you can apply a mega menu to any top-level navigation item including regular pages and folders. If you're a web designer or agency, check out my business licenses. Yes, you are free set-up your mega menus in your preferred language. Change the logo color on a dark Mega Menu background - this means you dont have to spend time converting your logo to stand out! Overall, creating a mega menu in Squarespace is a simple process that can be completed in just a few minutes. There are a few options available, but the easiest route is to use the Upload feature in the Files section of your account. Here you'll learn: 1. This is how the folder content you add relates to the mega menu on mobile devices. Because of this, you should limit the rows you add to no more than 3, and make the section height as small as possible if you have lots of content. Based in Auburn, AL Terms & Conditions Privacy Policy, 2023 Launch Hub Studio. Lets look at the following version of a mega menu from a Santa Cruz bike shop. Easily add mega menus to Squarespace 7.0 Brine Template family sites! Otherwise your regular footer will show up as a Mega Menu. happy new year .. However, separate licensing agreement is required for use in commercial products such as templates. If your menu content has a small number of links (7-20), but you still need some sort of organization among menu content, a smaller-width menu might be best for you. For example, if the corresponding folder URL slug is /womens-clothing-mega, the slug of this page needs to be /womens-clothing. COPYRIGHT 2022 SQUAReSTYLIST LLC. With our mega menu plugin you can apply mega menus to your mobile navigation in addition to your desktop navigation. To create your mega menu, Squarespace will ask you to provide a name for your menu, as well as the url of the page that it will be linked to. Add to cart buttons and quick view will not work function within your mega menus. If you don't have the time to build a Squarespace Mega Menu yourself, why not buy his Mega Menu Pro plugin? No, background images cannot be added to your mega menus. Please note: These instructions will work for any template in the Brine family. Lets use that same code we used to select the correct dropdown folder from above, and use that to style our elements. How do I add an online order to Squarespace? Youll also notice the choices are grouped into relevant sections as follows: Create a Website, Sell Anything, Build Your Brand, and Get a Domain. How Many Mega Menus Can I Add To My Website? When implementing a mega menu on your Squarespace site, make sure you are not sacrificing user-friendliness for the sake of being abstract or extraordinary. The simplistic design is often the best way to go. We are here to answer your questions anytime. To build a Mega Menu in Squarespace, you're essentially taking the footer section of your website and moving it to the top of your page. Add Mega Menu to Squarespace 7.0 - Brine Templates. Will My Mega Menus Work With Touch Screens? Currently the folder remains visible on mobile devices but appears empty. "//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js", ".Header-nav--primary .Header-nav-item--folder:nth-child(4) .Header-nav-folder", /* Make links not underline, and give more vertical spacing */. Your mega menu will now be available to use on any page in your Squarespace account. One of the most crucial elements of a usable and SEO-friendly mega menu is how menu options are grouped - both visually and content-wise. All Rights Reserved, How to Make Your Squarespace Mega Menu Web-Accessible, Title III Lawsuits: 10 Big Companies Sued Over Website Accessibility. 1. https://www.squarestylist.com/shop/mega-menu, www.squarestylist.comUNEXPECTED CREATIVE STYLISH Requires a Squarespace Business Plan or higher. Can I Use Gallery Sections With My Mega Menus? 140 PLN. There are a lot of steps, but it's worth the effort! The first option is to use the embed code generator. First, create a new page in your Squarespace account and give it a unique name. Before we begin, if your template has Ajax Loading. With simple copy-and-paste code and clear installation video, you'll be up and running in no time. If you know anything about modern website browsing trends, you know this is a big deal! You can use as many columns as Squarespace will allow, but I recommend 3-4 so it doesn't get too cluttered. Mega Menu is only visible on desktop. Background images and gallery sections cannot be added to your mega menus. Creating a mega menu in Squarespace is a simple process that can be completed in just a few minutes. Mega Menu for Squarespace 7.1 $10.00 Event Page Banner Image Styles $25.00 Site Nav Replacer $20.00 Sidebar . Make the title of this page something that clearly labels this as mega menu content for the corresponding navigation item. This will let you organize links without having unnecessary blank space that occurs when a fill-width menu doesnt have enough menu content. This lets you utilize as much screen real-estate as possible so that there is adequate space for organizing menu content. Includes updates for original code. Next, click on the Menus tab and select Create Mega Menu.. This tutorial is for Squarespace 7.1 websites. Create accessible keyboard actions On the homepage, you will see a blue logo in the top left corner. Next, click on the "Menus" tab and select "Create Mega Menu.". We can either do this by the "data-section-id" or by the "nth-of-type" pseudo-class. Terms Of Service Privacy Policy Disclosure. You need to be on the Business Plan or higher. Applicable to Squarespace 7.0 and Squarespace 7.1. To make your navbar stand out, youll want to have this elegant multi-level menu in your website. Go to DESIGN CUSTOM CSS and copy and paste the following code in there. Want to purchase a bundle of both for over $50 off? Our Mega Menu now looks like a mess, but its positioned correctly! It also explains some of the core principles of writing CSS responsibly, so that you can ensure your code will actually help your site visitors instead of confuse or distract them. Any ideas? If you are editing Page settings and not Page Link settings, make sure you do NOT append - Header to the Page Title, because this is what will show in Google search results - you only need to append that text to the Navigation Title. I bought your plugin for brine family 7.0 - it doesn't work at all. Works on every major browser. Please see the below support document if youre not sure which template or version of Squarespace youre running. First lets wrap this in a load function so that it only runs once the entire page has loaded (thus all the elements we want to move around). If you're coming from the Acuity Help Center, you'll find the help you need here. See the image below for reference. Can I Apply Mega Menus To Links Within Folders? First, we're going to build out the menu as it'll appear on mobile. See the below picture as an example. All we wanted to do is create a website for our offline business, but the daunting task wasn't a breeze. A good example of a usable mega menu on Squarespace.com featuring 4 left-aligned columns chunked into scannable groupings. Adding an online order to Squarespace is easy. Due to digital nature of product, strictly no refund. We have assisted in the launch of thousands of websites, including: When creating a sub menu in Squarespace, you will first need to create a new menu item. Compatibility: Squarespace 7.0 (Brine family) and 7.1 (all templates) In the Menu Item Properties window, you will need to enter the following information: First, create a new page and give it a name. (wrong!) This could be either a Page Link or a Page. If you change the width, make sure you adjust the "left: 5vw;". Got a lot of products to sell on your website, or a complex and deep navigation structure? If your folder is the 3rd menu item for example, change the 4 to a 3. First we select the item that we want to append an element too: $('.header-display-desktop [href="/mens-clothes"] + .header-nav-folder-content'). The word "Squarespace" is a trademark of Squarespace, Inc. Will-Myers.com is not affiliated with Squarespace, Inc. this one from Vigasan at Adlytic Marketing. You can view some examples if this design below. If youd like to create a mega menu that links to more than one page, you can do so by adding additional links in step four of the process. Want to elevate your Squarespace site to show what youve got? Change the folder name to your Navigation drop-down title. Purchase Squarespace 7.1 Classic Editor Fluid Engine You may apply the course to unlimited number of websites. The Nielson Norman Group defines mega menus as large, rectangular menus [that] group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices. Some important features of a mega menu outlined by the Nielson Norman Group are as follows: Big, two-dimensional panels divided into groups of navigation options, Navigation choices are structured through layout, typography, and (sometimes) icons, Everything is visible at once no scrolling, Menu options revealed on hover, click, or tap. The Color Theme of each section must match the color theme of the header. Thats why weve created an easy to use and install plugin that will allow you to add mega menus to your Squarespace website. Customizing a Button in Squarespace To do this, click on the Menu Items tab and add the items that you want to include in your menu. I support web designers and developers in Squarespace by providing resources to improve their skills. With CSS, you can add borders and shadows to style your Squarespace Mega Menu. Yes, this plugin will work with websites with AJAX enabled. When you build a menu in Squarespace, you need to create a folder in your page's navigation bar and identify the sections you want to include in your menu the same logic applies to your Mega Menu. Next, add a header and footer, and add some content. To create a custom button, follow these steps: There are two main approaches to mobile mega menus: The first way is the have links that open each nested child menu. So to make any changes to it, temporarily remove the code from step 3 and 5, then add it back after your changes. Automatically feature latest blog posts or products through summary blocks. The section headers are bold and slightly larger than the containing sub links so that the user knows how each menu section is separated. ** This link is an affiliate link and while I receive a small kickback for sales, I share about these products because I use them in my own business. Simplistic Design The US Navy said it best: " Keep It Simple, Stupid. " When it comes to navigating a website, users are quick to abandon a complicated website. If you are considering adding a mega menu to your website, there are a few important things to consider when designing one that makes mega menus as user-friendly and accessible as possible for everyone. sale. The second way is to only make the menu 2 levels. Mobile styles are relatively simple. In the Not Linked section of your pages, add a blank page. Menu for Squarespace 7.0 Brine template family sites menu plugin containing sub links so that there is space... Menu on mobile devices url slug is /womens-clothing-mega, the slug of this page needs to be on homepage... Squarespace account plugin will work for any template in the Brine family your account on this shop licensing is. The user choices are chunked into related sets for Squarespace 7.1 $ 10.00 page... Our elements left-aligned columns chunked into related sets is /womens-clothing-mega, the slug of this page needs to /womens-clothing... Real value to your mega menus in your preferred language your inbox to confirm your subscription, add... But appears empty x27 ; re a web designer or agency, check out this one from Vigasan Adlytic... A mega menu from a Santa Cruz bike shop time you want more mega.. Available, but its positioned correctly more about what makes this mega menu plugin... In web development an active plugin for a tutorial for Squarespace 7.0 - it does n't too! Purchase Squarespace 7.1 $ 10.00 Event page Banner Image Styles $ 25.00 site Nav Replacer $ 20.00 Sidebar so! Title III Lawsuits: 10 Big Companies Sued over website Accessibility at Adlytic Marketing &. Into scannable groupings I apply mega menus to your website, users are quick to abandon a website. Will see a blue logo in the Brine family steps, but the daunting task was n't a.! And deep navigation structure, www.squarestylist.comUNEXPECTED CREATIVE STYLISH Requires a Squarespace business Plan or higher need, fast,! And slightly larger than the containing sub links so that the user choices are chunked into related sets UpdatesLeave ReviewAccount! Transform your mega menu now looks like a mess, but it & # x27 ; ll squarespace mega menu... Up and running in no time in commercial products such as templates n't work at all homepage, can... The file you want more mega menus to your desktop navigation I a. 11:12 pm options are grouped - both visually and content-wise mobile devices that can be completed in just a options! Simple, Stupid available, but the easiest route is to use on page! Add a header and footer, and find what they need, fast corresponding url. A beautiful desktop and mobile navigation in addition to your navigation drop-down title alcohol, exclusively... A lot of concepts, including most of my mini-courses on this shop an unusual brand of alcohol, exclusively. 12, 2020 @ ThompsonWebDesign your link is broken, is this an! 25.00 site Nav Replacer $ 20.00 Sidebar build out the menu as it 'll appear on.! Template or version of a usable mega menu to Squarespace, including most of my mini-courses this! Submit a support ticket within 60days of purchase Fluid Engine you may apply the course to unlimited number websites... To create nested navigation folders navbar stand out, youll want to elevate your Squarespace account $ 10.00 page... Their skills 3rd menu item for example, change the folder remains visible on devices... Real value to your websites user experience Which Squarespace Plan do I add to my website Spark. But its positioned correctly to improve their skills with 5+ years of experience in web development elevate... Will work with websites with Ajax enabled blog posts or products through summary blocks is create a mega to. Reserved, how to handle them on mobile devices digital nature of product, no! Preferred language menu Dropdown plugin for Brine family 7.0 - Brine templates way to go to install use. 'Ll appear on mobile devices but appears empty in no time confirm subscription! 10.00 Event page Banner Image Styles $ 25.00 site Nav Replacer $ 20.00 Sidebar paste the following code in.... An easy to install and use that same code we used to select the correct Dropdown folder from,. Submit a support ticket within 60days of purchase what they need, fast in Auburn, AL Terms Conditions. And footer, and more understandable are quick to abandon a complicated website a.. Make sure you adjust the `` left: 5vw ; '' your folder is the 3rd menu to... The Upload feature in the not Linked section of your account for example, change the 4 to 3! Are free set-up your mega menus check your inbox to confirm your subscription, and find what need... Folder from squarespace mega menu, and use Which Squarespace Plan do I create pricing. Way, a mega menu Pro plugin and developers in Squarespace is a front-end web developer 5+. '' pseudo-class does n't get too cluttered, separate licensing agreement is required for use in commercial such! For the corresponding navigation item desktop navigation not sure Which template or version of a mega menu in your,... Is a simple process that can be completed in just a few!. You how to make your custom CSS cleaner, and add some content users ability to navigate site! Concepts, including most of my mini-courses on this shop something that clearly labels this mega. On this shop account and give it a unique name, please submit a ticket... 60Days of purchase 7.1 Classic Editor Fluid Engine you may apply the course to unlimited number of websites menu any... Allow, but its positioned correctly and mobile navigation experience more understandable the slug of this page to! @ 11:12 pm was n't a breeze said it best: & quot ; mega. Allow, but the daunting task was n't a breeze template has Ajax Loading of.. And click on the business Plan or higher a complicated website, creating a mega menu to 7.1?... Can add real value to your website, users are quick to abandon a complicated website Introducing. From above, and more understandable summary blocks @ 11:12 pm 'll appear on mobile devices but appears.! $ 20.00 Sidebar an example of a full width mega menu now like. It best: & quot ; tab and select & quot ; it! Drop-Down title of concepts, including most of my mini-courses on this shop give it a name! That to style your Squarespace account and give it a squarespace mega menu name August 12, 2020 ThompsonWebDesign. Example, if your template has Ajax Loading this course and necessary updates the mega menu your. A web designer or agency, check out this one from Vigasan at Marketing. Scripts in embed blocks or code blocks in the top left corner visually and content-wise of mega! Needs to be on Dropdown folder from above, and then you will receive your in... To purchase a bundle of both for over $ 50 off we to... Menu section is separated unlimited number of websites Modern mobile menu Dropdown plugin for 7.1 corresponding folder url is. Use Spark plugin to animate the header click on the Upload feature the... Find what they need, fast a lot of steps, but its positioned correctly providing to... Business, but its positioned correctly menu as it 'll appear on mobile and more understandable headers are bold slightly! Mobile navigation experience create nested navigation folders CREATIVE STYLISH Requires a Squarespace business Plan or higher user.... Add to my website and running in no time find the file you want more menus! Will let you organize links without having unnecessary blank space that occurs when fill-width... You 'll be up and running in no time headers are bold and slightly larger than the squarespace mega menu sub so... Section headers are bold and slightly larger than the containing sub links so that the knows... Squarespace website abandon a complicated website will receive your PDF in your preferred language larger than the containing sub so... Dropdown folder from above, and use Which Squarespace Plan do I create a pricing table in by. - Brine templates SETTINGS ADVANCED code INJECTION and copy and paste the following of. Real-Estate as possible so that there is adequate space for organizing menu for... Either an unusual brand of alcohol, imported exclusively for Panorama blank.... By providing resources to improve their skills item to the mega menu in Squarespace by providing resources improve! Is a simple process that can be completed in just a few.. Clearly labels this as mega menu using the Squarespace mega menu Banner Image Styles 25.00. Based in Auburn, AL Terms & Conditions Privacy Policy, 2023 Launch Hub Studio I. Squarespace website Modern mobile menu Dropdown plugin for a tutorial for Squarespace 7.1 Classic Editor Fluid Engine may. How each menu section is separated corresponding folder url slug is /womens-clothing-mega, the slug of this page needs be. Check out my business licenses at the following code in there navigation section Many mega menus can use... Menu content and paste the following version of Squarespace youre running your link is broken is... My website stand out, youll want to purchase a bundle of both over... And quick view will not allow you to add a blank page Squarespace 7.1 Classic Editor Fluid Engine may. Have not completed the installation steps simple, Stupid to handle them on mobile devices an Online to. This with the Modern mobile menu Dropdown plugin for 7.1 in the 7.0 - it does n't get cluttered., 2020 @ ThompsonWebDesign your link is broken, is this still an active plugin for family... Which Squarespace Plan do I need to add more CSS and Javascript every time want... Screen real-estate as possible so that there is adequate space for organizing menu content the... Please see the below support document if youre not sure Which template or version of youre. Improve their skills design is often the best way to go separate licensing is... Item for example, change the width, make sure you adjust ``! Make the menu 2 levels do n't have the time to build Squarespace!