Squarespace Tutorials - Creating a Mega Menu

Подписаться 1,5 тыс.

Просмотров 10 тыс.

50% 1

If you've ever wanted to create a Squarespace mega menu but been disappointed when you found out that you can't, this mega menu tutorial is for you!
Want written instructions instead?
www.adlyticmarketing.com/blog...
Note: These instructions will work for any template in the Brine family. If you're using a different template, you WILL need to modify the code slightly to the classes that your template uses.
Additional Note: If your template has Ajax Loading. We need to disable that first. Go to DESIGN → SITE STYLES and look for AJAX LOADING and disable it by unchecking the box beside it.
________________________________________________
Ready to start your own Squarespace website? Use the following link + promo code ADLYTIC10 for 10% off your subscription price!
squarespace.syuh.net/yt
________________________________________________
If you want to take our full Squarespace 7 course where we talk about everything Squarespace, head on over to our website. Use the link below and get the course for only $25
www.adlyticmarketing.com/cour...
________________________________________________
Do you want to join a community to receive FREE Squarespace help? Check out our Facebook group at
/ squarespacehelp

Опубликовано:

7 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

@user-ic7fm2lf6b Год назад

Hello, thank you for this tutorial ! Is it possible to have 2 mega menu ? If yes how since we have to put the number of the position on the menu. Thank you for your help

@spencermarshy 3 года назад

Hi, ive added this script to my site. Looks great thank you. However, when I hover over where the mega menu drops to (without hovering over the navigation option) the mega menu appears. This becomes obviously causes navigation issues. Can you help please?

@thompsonthecenter5969 3 года назад

Cheers! Thanks for your awesome tutorial. I do have one more question indeed...How do I set the font to lowercase so that only the Title is in uppercase? And do you have any idea so far, how to provide multiple mega menus? Best and thanks, Cheers

@AdlyticMarketing 3 года назад

Hey, so you can right-click the text and click INSPECT ELEMENT and it'll give you the class name that you have to target. You can also try going to DESIGN > SITE STYLES and clicking your MENU to see if you have MENU styles available for changing font styles. Multiple mega menus would require you to use different sections of the footer or to build out the menu with code blocks. It's much more complicated so I don't believe I'll be creating a video on that right now. We are coming up with a plugin to make things easier but it'll take several months to get it ready and tested for different use cases.

@opaapa4180 4 года назад

Hey, how are you? How can I do this on the 7.1 version?

@AdlyticMarketing 4 года назад

Hey Deni, it's the same process for 7.1 except the code has to be modified to the new classes. I'll create a new video but it won't be out anytime soon because of the COVID situation.

@thebusybee-megan 4 года назад

This was SO helpful - thank you! Do you by chance know how to make the menu appear by clicking the link in the navigation, rather than just hovering over it?

@AdlyticMarketing 4 года назад

Hey, you'd have to remove the code that makes it appear on hover from the CSS I provided, and then use JQuery to set up a click event to modify the CSS instead. I haven't provided that option since when a visitor clicks a link, they usually expect it to go somewhere rather than open a menu. Here's a great start to modify the code: www.w3schools.com/jquery/css_css.asp

@MissMegaBug 2 года назад

Hi there! Thank you so much for this tutorial, it was outstanding! I added the code to my website last year and for some reason the mega menu is now no longer displaying; it's visible in my footer. Are you aware of a fix? I use Squarespace 5. Thank you!

@AdlyticMarketing 2 года назад

Hey! Unfortunately, we don't test our code with Squarespace 5 because it's a very very old version of Squarespace. We usually only do 7 and 7.1, sorry!

@naijawheel694 4 года назад

Please can you make a video on how to add Google Adsense verification code on squarespace websites thank you

@GeenaMatuson 4 года назад

This is great, thank you! Just a few questions: (1) Does this allow for summary blocks, so that I could feature latest blog posts (and thumbnail preview images per post) in the mega menu via summary blocks? (2) Does this still work if I'm using code to have a "sticky navigation" bar? (3) Are you still able to have any content in your footer that is not part of this menu?

@AdlyticMarketing 4 года назад

Hey Geena, if your template has 3 different footer locations (top, middle, bottom), then this only uses 1 location, so you can use the other 2 as normal. This will work with sticky navigations. Summary blocks will also work, you just may have to use a little bit of CSS to style them to look as you want.

@GeenaMatuson 4 года назад

@@AdlyticMarketing Thank you!!

@progress7011 3 года назад

Hi @Adlytic Marketing, great video, thank you so much! Everything is working great for me on the home page of my site, but the Mega Menu doesn't function properly on other pages. It doesn't hold properly on hover and when it does appear it is behind the other page content - pictures, headings etc. I have tried z-index and visibility: hidden/visible and nothing seems to make a difference, I'm not highly experienced with CSS and it's got me stumped. Any suggestions?

@AdlyticMarketing 3 года назад

Hey! Do you have a link to the website I can take a look at?

@progress7011 3 года назад

So in fact just now I have figured out somewhat of a fix! By using - position: relative instead of - position: fixed The menu does hold a bit too much now when hovering over the header but in any case it is better than before. Thank you again for your great work Adlytic Marketing :)

@damienjamet 3 года назад

You mention in the video that there's a specific code for non-Brine templates. Where do we find it, and how do we know if our template is supported? I use FIVE Thx

@AdlyticMarketing 3 года назад

Hey, the code doesn't exist currently, it's something that you would need to write by modifying what I have so far.

@spencermarshy 3 года назад

Hi, I appear to have fixed that. however, now when I hover over the mega menu navigation option and then move down over the mega menu... when I move so far down the mega menu disappears... so it doesn't work as a navigation menu.

@AdlyticMarketing 3 года назад

Hey Spencer, you have to modify the "top" css code so that the menu sits just below your menu. It's different for almost every site so that definitely has to be adjusted manually.