Header-nav-item-folder:nth-child(4)" appears in the CSS. If your folder is the 3rd menu item for example, change the 4 to a 3. ![]() Header-nav-item-folder:nth-child(4)" to match whatever position your menu folder is. Go to SETTINGS → ADVANCED → CODE INJECTION and copy and paste the following code into the HEADER section. You can use as many columns as Squarespace will allow, but I recommend 3-4 so it doesn't get too cluttered. Click EDIT on this section and build out your mega menu how you want it to appear. Hover over the footer until you see the section for Footer Top Blocks. Go to any page on your website while logged in and scroll down to your footer. Step 2 - Creating a Mega Menu for Desktop In your main navigation, create a folder and insert the links that your mega menu should display on mobile. ![]() Since there isn't room on a mobile screen for a mega menu, we'll need this menu as a fallback. Step 1 - Creating the Mobile Fallback Menuįirst, we're going to build out the menu as it'll appear on mobile. If you're using a different template, you WILL need to modify the code slightly to the classes that your template uses. Please note: These instructions will work for any template in the Brine family. Go to DESIGN → SITE STYLES and look for AJAX LOADING and disable it by unchecking the box beside it. 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!īefore we begin, if your template has Ajax Loading.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |