Stylized Folder Dropdown Menu in Squarespace 7.1

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

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

50% 1

Stylized Folder Drop down Menu in Squarespace 7.1 - In this video I show you how to create a cool menu folder drop down effect that highlights the folder navigation items on hover and changes their color.
Get the CSS here:
schwartz-edmisten.com/blog/st...
Get my giant library of copy & paste CSS snippets for Squarespace:
schwartz-edmisten.com/css-too...
Learn to create custom layouts in Squarespace! Sign up below and have a limited opportunity to get $30 off the course:
schwartz-edmisten.com/custom-...
Sign up for my free Squarespace CSS for beginners eCourse:
schwartz-edmisten.com/learn-c...
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, you can hire me to do so through my contact page:
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

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

This was SOO helpful! I am launching a website soon and bootstrapping. The fact that the menu couldn't be easily customized in Squarespace drove me up the wall. Thank you!

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

Amazing! Thank you for including the CSS!

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

You are welcome!

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

I really appreciate that you explained how to find the specific class to use--that was super helpful!

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

I'm glad Madison! Thank you for taking the time to let me know!

@seangreenerdg Год назад

This video was excellent. Super easy to follow and very informative!

@SEWebDesign Год назад

Awesome to hear! I'm glad!

@ichanic 8 месяцев назад

Thanks so much for this video, it was exactly what I needed! Your directions were very clear to understand!

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

I'm so glad to hear it!

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

Very helpful video. Clearly described and very easy to follow.

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

Thank you Richard!

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

Nice! Thank you very much!! I used this to help me with my header that I was making only transparent on my blog pages. :)

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

Awesome Theresa!

@Alessandro-Colarossi 8 месяцев назад

Great job -- looks much better than the standard template.

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

Thank you Alessandro!

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

Awesome! Very helpful. Thank you.

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

I'm so glad!

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

Great video. Explained these concepts really well. Thanks!

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

Glad you enjoyed it! Thank you!

@PlanetAlexanderProjects 10 месяцев назад

Thanks! I first learnt CSS years ago in highschool but I never realised you could do classes within classes with styling. This has solved a number of CSS issues on my site

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

That is great to hear! I'm glad it was helpful!

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

Nice tutorial - thanks!

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

Thank you Anthony, I am glad you enjoyed it!

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

Thanks again for an amazing tutorial! Was very helpful. I was just wondering if there is a way to change the width of the drop menu box? I would also like to know if it would be possible to change only the width of ...let's say the About folder?

@savrah Год назад

Thank you. Liked and Subscribed.

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

Awesome, thank you!

@ludaronky4549 Год назад

Thank you !!!

@SEWebDesign Год назад

You are welcome!

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

This took me AGES to find a video in which someone could show me how to highlight the background of the dropdown and change the text. Thank you!!

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

You are welcome Michael, I'm glad it was helpful!

@ThaG128 Год назад

Thank you. It's only working for one of the dropdown menus (the padding) but the rest is working fine

@SEWebDesign Год назад

You can try adding !important tags whenever CSS isn't applying like you are expecting. You can also hire me to take a look through my website. But if you are happy with it as is then great!

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

Thank you, this was so helpful! Do you have plans to do a tutorial on how to change the background color when hovering over a non-folder header section? I loved adding the stylization to the drop-down folder menu, but I have a few sections on my header that are not drop-down and I would love to customize those as well.

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

I'm glad it was helpful! For non folder nav items, you can't really add a background color on hover, but you could change the font color on hover. You could try: #header nav a:hover { color: #colorhere; }

@marco-sosa 9 месяцев назад

Great tutorial! Can I add an effect to the drop down menu? like fading in and out?

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

thank u!

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

You are welcome Joan!

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

Hey, I have a comment for you! I almost didn't click on your video because the combination between your poster image and your logo made it look like it was an ad! So maybe it's time. to rethink that yellow logo. That's just my experience and thought I'd share it with you! Anyway, the video was super helpful! thanks so much.

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

Thank you for the feedback Milo!

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

Is there a way to change the drop-down text color this way? I know SS has color options for header styles, but I am trying to get the drop down text to be white while keeping the actual tabs black, and SS doesn't seem to allow me to do that.

@ShaunSheikh-em5bv Год назад

Great video - thanks for the css. Do you have a video to change the background color of the drop down before hovering over the drop down file/links?

@SEWebDesign Год назад

I don't have a specific video on that. My CSS Toolbox course has all the CSS for customizing dropdowns, or I do 1:1 calls for custom CSS help as well

@mvelentzas Год назад

Thank you for posting this! I'm wondering if it's possible to have the drop down menu start just below the header. Any suggestions on how to do this?

@SEWebDesign Год назад

I'm thinking of doing another dropdown customization video so I'll try and find a good way

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

Very helpful - is there a way to easily change the title navigation so it is uppercase or a different color from the dropdown?

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

I have responded to your email!

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

Is there a way to make a drop down box to where say they click a text that says a specific car such as "1968 Ford Fairlane 500" and once they click it, an image pops of that shows statistics of the car. Is that possible to do?

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

Unfortunately it is not possible to my knowledge

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

Thanks for sharing! I followed this tutorial and it worked great, but when I opened my site in a different browser, it wasn't working anymore. Any idea why that could be?

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

I am not sure why that would be. There isn't any CSS that we are adding that would need to be prefixed.

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

This is really helpful, thanks! Is there a way to do this in 7.0 as well? I tired this code but it didn't work in 7.0.

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

Squarespace 7.0 uses different classes so that is why it won't work. It could be adapted to 7.0 as well. You can hire me through my site for custom CSS support!

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

Thanks! If I have 2 folders in the navigation, how do I target only one of them and not both?

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

You will need to use the :nth-child() selector to select the specific navigation item. If you need help implementing it, you can hire me through my website. .header-nav .header-nav-item:nth-child(2) .header-nav-folder-content { padding: 0!important; .header-nav-folder-item { padding: .5em 1em!important; } .header-nav-folder-item:hover { background: @linkBGColor!important; a { color: @linkTextColor!important; } } }

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

Could you share the code you used in the video to make that happen? In the meantime, i will be trying out your free Squarespace CSS for beginners, since I know nothing about code! Thanks!

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

I have added the link to the blog post to the video description!

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

Thanks for this! I was wondering if you have any CSS tutorials to stylize the mobile menu in squarespace 7.1? The mobile menu/navigation that opens after clicking on the hamburger icon is very lackluster...thanks in advance!

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

I do in my course CSS Toolbox, but not currently on my RU-vid channel. I might release them in the future though

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

@@SEWebDesign where in your website is this course exactly? thanks in advance!

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

@@cinthiabrake2678 Here is the link! courses.schwartz-edmisten.com/courses/squarespace-css-toolbox

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

My home page has an image that goes all the way up and is the background of my header/menu. So when I have a drop down menu, having a big block of black or white just doesn't look great. Is there a way to adjust the gradient of the background of the drop down menu? I don't want it completely transparent, but I want it a lot softer.

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

If you target the folder element you can use css to change the background color to an rgba color where the last color listed is the opacity of the color. For example, white with 50% opacity would be: rgba(255,255,255, .5)

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

@@SEWebDesign Great tutorial! Thank you! I have a similar issue as Tasha. I'll give that a try. It sounds like it's not possible to change the background to a different color...or do you cover that in any of your courses?

@jennywilley3778 Год назад

Im going to do this to my website so thank you for sharing. I'm trying to figure out how to do this with in my contact page. I asked a few questions on my contact page and wanted my clients to be able to have the option to drop down to answer my posed question. Is this possible with Squarespace. thank you

@SEWebDesign Год назад

Yes, there is a dropdown field in the form block.

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

Thank you very much! It's very annoying, if you can't click on the main folder. Is there maybe a solution or a code to change that? Thank you for your response!

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

In my CSS Toolbox course for 7.1 I have some code to make folders clickable. Right now it's only available in my course

@maiphyuaung Год назад

Hi do you know how to make Mega Menu for so many categories in menu?

@SEWebDesign Год назад

Yes I have a video on my mega menu plugin on my channel!

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

Can you add the same highlight functionality to the mobile version of the menu?

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

There isn't really a hover state on mobile since there is no cursor on touch devices. So it doesn't really apply unless you are forcing the mobile menu on desktop. It could be done if needed, you would just have to target the correct mobile classes.

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

Is there a way to add a search bar to navigation bar

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

I will do some tests and make a tutorial about this as it will likely need to be a complex solution

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

Do you have a way to make the entire row clickable instead of just the text?

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

Not off the top of my hear, but you can send me an email for CSS customization

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

Have you ever had you custom css that was working perfectly before stop? I have the weirdest thing happening: css is all as it's broken. I move back to the editor and the css magically is back to normal. I leave the editor without making any changes... stopped again. Any insight? 🤔 I hate the menu without the changes I did following this video...

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

Yes, it means you have a syntax error that is breaking the CSS. I have a video on my channel about how to find the problem when that is happening.

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

Awesome! I'll try and find that! Thank you for the swift reply!