Create a Mega Menu in Squarespace 7.1

Подписаться 7 тыс.

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

50% 1

Get the plugin: schwartz-edmisten.com/shop/sq...
Create a Mega Menu in Squarespace 7.1 - In this video I show you how to easily create a mega menu in Squarespace 7.1 with my new mega menu plugin!
Sign up for my free Squarespace CSS for beginners eCourse:
schwartz-edmisten.com/learn-c...
Learn to create custom layouts in Squarespace!
schwartz-edmisten.com/custom-...
My goal is to help you create more custom Squarespace websites so that you can charge more for your services.
If you need help designing, updating, or implementing custom code on your Squarespace website, please reach out to me:
schwartz-edmisten.com/contact
If my content has helped you out I would really appreciate a small donation to allow me to keep making tutorials:
schwartz-edmisten.com/donate
Music: / justin-kolas

Хобби

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

7 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

This is the coolest menu I have seen yet! Thanks for the easy detailed instructions.

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

Great lesson Mate.. Thank Goodness someone is actually developing Real-World functionality to v7.1

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

Thanks John! I am really excited about this one!

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

Thank you so much this video was so helpful! Great video!

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

You are welcome, I am glad it was helpful!

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

Thanks Mate, appreciate your video heaps!

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

I'm really glad to hear it Mark, you are welcome!

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

Cool plugin, thanks!! As a CSS beginner I'm wondering if there's a way to adapt the code so that I only get the mega menu for 1 specific page? I still would like the rest of my pages to have normal drop down menus... thanks so much for any help!

@theartofconsciousness-2615 2 года назад

Perfect Thanku

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

I am glad you enjoyed it!

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

hi, Do you have a demo to try before i buy - i need this feature on 7.1 and the price is right, but just want to test it first, thanks!

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

Neat plug-in! I wish the video had shown how the menu behaves on mobile and tablet.

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

It will look the same on tablet as desktop, just smaller. The mobile menu will be the same as normal. You can add any links that you want to show on mobile to the folder. So going off of the blog example, you could add links to the blog categories to the folder and they will show on mobile.

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

Just what I was looking for, amazing plugin!! Just wanted to know, how can I make the mega menu close to the menu tabs

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

Thank you Yaser! The mega menu is automatically positioned relative to the bottom of the header. So if you want to move it up (closer to the menu items) you can increase the "bottom" attribute in the css from 1px to say 10px

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

Great Tutorial! Can you get a fullscreen mega menu after clicking a link on the navbar and then close it as if it's a pop-up window?

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

For that, I would instead use the "light box anything" plug-in from sqspsthemes. That sounds like exactly what it was made for

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

Oh i love this! I'm looking to use a mega menu within my Member's Only area in 7.1, which doesn't have the capability to add folders to. Before I purchase your code, would there be a workaround for that to make it work within the Member's Only area? I want to be able to show each subsection of my course within the mega menu.

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

Yes this plugin works with member areas. The setup is just a bit different for those pages, but video instructions are included for setting up member area mega menus.

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

Thank you for this tutorial! This is a really cool feature. I was wondering if it's possible to activate the "mega menu" from a button or image? Whereby clicking the button or image, the mega menu would pop-up?

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

With this plug-in, the mega menu only appears when you hover over a navigation item. Unfortunately it is not possible to activate it from a button click.

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

@@SEWebDesign Thanks for the quick reply!

@karacocreative 6 месяцев назад

Great video! How would this work if I wanted this to dropdown from the hamburger menu set on desktop? Could I assign it to one menu item which displays as a hamburger and have all the other pages unlinked?

@SEWebDesign 6 месяцев назад

This one doesn’t work with a hamburger menu like you are looking for, but if you purchase it and send me an email I can help you customize it to do that. Note that it will still only apply to desktop, not on mobile.

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

Does the mega menu work on mobile?

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

Amazing tutorial and video. However I’m wondering if you can help me... I have followed exactly what you have done however when I return to the homepage and hover over ‘About’ instead of the mega menu popping up. It just offers ‘About’ like a drop down menu.

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

Hi There, If you have purchased the plugin and need assistance, please send me an email through my website's contact page and I can help!

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

Any idea how to change the "Getting Started" button to a custom image? We're having a brand promotion and want to feature that logo in the menu. Is that possible?

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

You could hide the button text and set the background of the button to be the image with CSS. You can send me an email via my website if you would like to hire me for this

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

I'm doing web design for a client who needs this. Do you have any simple demos or examples of other sites using your plugin?

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

I just followed up to your email!

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

Amazing! Thanks for sharing! Please, Is it compatible with Mobile? If yes how can we set the mobile up?

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

It does not directly affect the mobile view, but there are things you can do to make the mobile experience better. For tips on setting up the mobile view, watch the 7.0 mega menu video on my channel. It is the same for 7.1. The mobile info starts at 18:00 or 19:00 minutes into the video.

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

@@SEWebDesign Amazing! Thanks a million

@michaelb.hardiephotography2776 3 года назад

This is sweet!!! What’s it look like and how does it act on mobile?

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

It only applies to desktop so the mobile menu remains the same

@michaelb.hardiephotography2776 3 года назад

Ok thanks

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

Can the plugin create a 3 column drop-down?

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

The menu appears as one section below the header, but you can put as many columns as you need inside of it. It can't create nested dropdowns if that is what you mean. Like I hover over an item and get a dropdown, and then hover over an item in that dropdown and get another dropdown, etc.

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

Hi, this code works perfectly, well done. How do deal with the mobile menu?

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

For the mobile menu each mega menu is a folder and you put each page that you link to in the mega menu inside of the folder.

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

@@SEWebDesign Ah ok I see. I realise now that was a silly question. Thanks.

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

@@georgebyrne5821 no that is a good question! I get that question alot about whether it applies to mobile or not!

@kainoaliu 7 месяцев назад

Hi there, I was wondering, is there a way to add a delay to the link for web accessibility?

@SEWebDesign 7 месяцев назад

Can you elaborate on what you mean by delay?

@kainoaliu 7 месяцев назад

@@SEWebDesign Hi again! I was wondering if there was a way to delay the menu from opening when you hover over the link? I know most mega menus open immediately once a user hovers over the nav link, but I was wondering if there was a way to add an extra delay within the code so that the user will need to hover closer to a 1 or 1.2 seconds. It helps with accidental hovering of the mouse and helps with accessibility needs. Also, is the menu accessible through keyboard shortcuts? Thank you so much for you help! I really appreciate it!

@SEWebDesign 7 месяцев назад

@@kainoaliu yes, some custom CSS could be added to delay the hover. There is also an open on click option. It is not keyboard accessible.

@newshapes.studio 2 месяца назад

Is it possible to do this as a sidebar pop out menu rather than full screen? Thank you!

@SEWebDesign 2 месяца назад

Like a hamburger menu on desktop that triggers a slide out? I actually have a different plugin for that in my shop! Take a look and let me know if that is not what you are looking for. If you can email me examples I could code you a custom solution as well

@newshapes.studio 2 месяца назад

@@SEWebDesign I'd want to style it more like a page ideally, like your regular mega menu, as opposed to just showing the mobile menu on desktop (which seems to be the case with your hamburger plugin?)

@SEWebDesign 2 месяца назад

@@newshapes.studio yeah then in that case it would need to be custom. Feel free to send me an email through my website’s hire an expert form! If you can provide any examples that would be great

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

will this work on the Squarespace 7.0 version?

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

No this is specifically for 7.1. If you need something similar for 7.0 please send me an email

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

Hey! I think I have followed every step you mentioned, but I still not able to have the mega menu shown when I hover, it only shows the page name of my folder. Is that a template issue? Thanks for the tutorial anyway!

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

Did you purchase and install the plugin code and CSS? Make sure you purchased the 7.1 version of the plugin if you have a 7.1 site.

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

@@SEWebDesign Hi thanks for your reply! I still in the free trial I think. So I will need to subscribe to Squarespace to have access to this feature? Or is it an optional installation needed to be purchase first? Thanks!

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

@@minshihuang1309 you don't need to be subscribed to squarespace but it is a plugin that has to be purchased. So the mega menu won't show up unless you buy the plugin

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

@@SEWebDesign Oh I see! I just saw the purchase link under the video. Thanks!

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

Amazing tutorial :) But I tried it on Bedford Template but it didn't work. :(

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

Hi Vishal, this version of the mega menu only works on Squarespace 7.1 templates. My 7.0 mega menu plugin only works on templates in the Brine family as it is the most popular. I highly recommend Brine!