How to edit navigation bar in squarespace / easy setup & design tutorial for your Squarespace menu

[@cycle9241]

WOW. A great new way to customize our header. I love this! Becca, you rocked it out again with your walk-through in this video. 👏🏼 And this weekend, I will definitely have fun playing with the customizations of the Header edits. Ciao 😄

[@HostArchiveScavengersRadio]

it's obvious that the details you gave were... LIFE SAVING!!!! YES! THANK YOU! You're very detailed! PLEASE KEEP THAT UP I FELT LIKE A BABY! "come on Dink you can do it. One step then two .. " thank you seriously you just made my day. 😊 It was the details. Step by step that did it.!

[@InsideTheSquare]

I'm so glad you like my style!! 🥰 I'm making the videos I wish I had when I started using Squarespace oh so long ago 😉

[@HostArchiveScavengersRadio]

@@InsideTheSquare and don't you dare STOP. Or I'm going to Wix! 😂

[@davekorns]

Becca rules! There was one thing I couldn't figure out in this new header editing interface ... and sure enough it was because I hadn't watched this video yet. I always learn something from your videos.

[@InsideTheSquare]

Thank you for your comment - I'm so glad this new video helped! 🥰

[@charliedcho]

So detailed and answered a question I've been searching for. Thank you so much!

[@InsideTheSquare]

Awesome - glad it was helpful!

[@raeroshow]

Amazing tutorial, as always. It's baffling to me that they didn't add Design editing for mobile nav fonts. That's been a gaping hole in the Sqsp workflow forever! Crazy that it's all up to Custom CSS for something needed on every site!

[@InsideTheSquare]

I totally agree - and thanks for a tutorial video idea!! I have a tutorial video on creating a custom font for your menu (insidethesquare.co/squarespace-tutorials/mobile-menu-font) but not one about changing the style of a font that is already there... stay tuned! ;)

[@bluzh76]

I feel like they just changed how the navigation settings are managed, the features are the same. Maybe the border is new? For the mobile looks a bit better now. You vid always good 😊 thank you.

[@MaryJoCadiz]

This was great thank you! Very informative and you made it to understand! Is there a way to have a add a subtle pattern behind everything (logo, icons etc.) in the header?

[@InsideTheSquare]

Thank you - I'm so glad you enjoyed this tutorial! There are two ways to achieve this background effect you're describing. You can add a background to the first page section and then make the opacity of your header 0% (in the design tab) or you can use code! Check out this tutorial for the code option: insidethesquare.co/squarespace-tutorials/header-background-image

[@cesarhawke9978]

It's amazing, this plus already nice design editing of forms . Squarespace getting better 😊

[@InsideTheSquare]

I think so too - I love that they are always working to make their program better 🥰

[@BettinaCalmon]

Hello, I would like to have my menu on the left of the screen, under my logo. The only options I've been seeing are on the top of the page, but not as a column. Do you know if that's even possible?

[@InsideTheSquare]

Oooh that is tricky in version 7.1 because the menu lives inside the header container. We'd have to use code to pull it out of the container and stick it to part of the browser window, then adjust the page to accommodate responsively. I don't have a code fix for that yet but I like the idea, so I'll add this to my tutorial to do list! Stay tuned 🙌

[@FLEAMARKETRESCUE]

I have a shop page and under the categories on the mobile version, you're only able to see THREE of the categories and have to scroll to the side to see the rest. People don't know this is a scrolling menu for the categories. Is there anyway to change the menu to be maybe a drop down menu or make it to be able to see the full list of categories without having to scroll to the side? If you could give me some advice...I would really appreciate it! Thanks so much!

[@InsideTheSquare]

Interesting question! I don't have a code to alter that layout, but someone in the forum might. forum.squarespace.com

[@aracelialto]

Hi new squarespace user here and you have great content! I'm trying to move the header to have it as a side/vertical menu. Any suggestions, is it possible?

[@InsideTheSquare]

That's a great question! I don't have a tutorial for that yeet but it is very high on my to do list. There are a few hacks out there that don't cut it in terms of folders or longer links, and they definitely don't work well with elements like carts and buttons, but my workaround does! Stay tuned :)

[@aaronpalaian9116]

Is there a way to edit the second folder within the menu overlay? I have the menu and I can adjust the link spacing which is great and it adjusts the top level menu page and the folder or dropdown within but can I adjust the spacing on just the most bottom level folder or dropdown?

[@InsideTheSquare]

That is such a great question! You can use padding and line height to adjust those links. I'd stay away from margin because that will reduce the clickable area. I don't have a tutorial for this just yet but stay tuned; it's officially on my to do list. 🙌

[@RosaNoreenDance]

This is amazing. Thank you!!

[@InsideTheSquare]

You're so welcome! :)

[@dalejrfanfreak]

This is really frustrating as I was hoping we’d get a ton of flexibility in how we build our header but instead they just made the interface a little better. Why can’t I make a pre-header where all my contact info can reside like I can do with the Brine template in SQ 7.0? I have more flexibility with old squarespace and Wordpress. 😢

[@InsideTheSquare]

It's definitely more of an interface update than a design one, but I do love some of our new design options. I do have a SUPER old but super helpful tutorial about adding a tagline to 7.1 that might help with your design needs! Here is a link for you: insidethesquare.co/squarespace-tutorials/tagline

[@aaronpalaian9116]

Thank you. Do you have CSS to split dropdown folders on mobile (overlay menu but the 2nd tier) into two columns neatly organized so that people don't have to scroll with long dropdown menus? Thanks

[@InsideTheSquare]

That's a great question! I don't have a tutorial on this yet, but you should be able to create two columns with this code: .header-nav-folder-content {column-count: 2} There are other things we can do like move the folder over and adjust the spacing, but I hope that code is a good start for your project!

[@saq80]

is there anyway I can customize this header, i want menu first then logo then again more navigation and then button

[@InsideTheSquare]

Great \ design idea! I cover basic layouts at the 4:25 minute mark but if you want to create a split header, check out this tutorial: kzbin.info/www/bejne/maS0kn14Z857aM0

[@saq80]

@@InsideTheSquare thankyou that was exactly what i was looking for.

[@BradWieland]

Great info as always, Becca! @insideTheSquare - I manage several brands within one website. Is it possible to have different headers for each brand? What I'm doing now is creating a faux-header with a standard section and then duplicating it to other pertinent pages (...and hiding the actual header on those pages). Obviously, I have to build each of these faux-headers manually. Is there a better way?

[@InsideTheSquare]

Great question - and intersting workaround - i like it! The only thing I would do differently is to save your faux header section so you can easily add it to new pages. You have an unlimited number of saved sections so use them as often as you need to! :)

[@BradWieland]

@@InsideTheSquare ..Yes, I've been doing that too; should have mentioned it! I love the ability to save and reuse sections...Thanks, Becca!

[@alexauldsmith]

Thanks for the video! This feature update has basically ruined a bunch of my pages as I would have hidden pages (for distinct projects) which I had removed the header from. However now the header has reappeared and none of the codes work to remove it anymore. Is there an option to remove the header from specific pages or have they done away with that? Thanks

[@InsideTheSquare]

That is super strange - there were no code updates with this ch add age so something else happened to your site 😬 I’d recommend posting in the forum to see if any other Squarespacers had a similar bug & fixed it. Best of luck!!

[@veerakorhonen3052]

Hey do you know how to get different site header colours to every page?

[@InsideTheSquare]

Intersting question! You can use a code to change the header background color and install it on individual pages. This tutorial can help: insidethesquare.co/singlepage

[@deejayleo510]

What version of Squarespace is this? My 7.0 - Brine family (Nueva template) has none of these options.

[@InsideTheSquare]

This is version 7.1 that was released in 2020. I don’t think Squarespace is making any feature updates to older versions but you can find out more at support.squarespace.com

[@fruitloops7995]

Can you add a different nav on a different page?

[@InsideTheSquare]

Uh, kinda! You can always toggle off the nav and create your own using a page section. Check out this tutorial for more info: insidethesquare.co/squarespace-tutorials/advanced-landing-page

[@crazy_hardcore_gaming]

Is this functionality disabled for the free trial?

[@InsideTheSquare]

Not that I'm aware of! If you can't edit your website header, I would reach out to support ASAP. 😳 support.squarespace.com

[@colinkulowcreative]

I wish Square Space would allow for 2 navigation bars at he top of the page and Search in the header. Functionality that sites have had since the 90s.

[@InsideTheSquare]

It would be nice 😅

[@Kempiet]

None of this is actually available, it just says edit site header, is this full availability only selected in the site styles

[@InsideTheSquare]

Sounds like you’re using version 7.0; an older version of Squarespace. 7.1 was released in 2020, and when you’re ready to upgrade, you should come back to this video to learn more about your site header design options!

[@melaniejumaga]

I was thinking to move my website to showit now i will keep squarespace

[@InsideTheSquare]

Awesome - i'm so happy that you've found a good solution for your site, and taht it's Squarespace 🙌 I have a ton of free tutorial content that can help you get started at tutorials.squarespace.com

[@JakeThompson]

😀😀👍👍👍