How to edit navigation bar in squarespace / easy setup & design tutorial for your Squarespace menu
Вставка
- Опубліковано 14 гру 2024
- If you are brand new to #Squarespace start here → insidethesquar...
- -
❤️ Like this #squarespacetutorial ? Buy me a coffee to say thanks! ☕ buymeacoffee.c...
- -
In January 2024, Squarespace released a new way for us to edit the header of our website! This video is an overview of all the changes.
You can edit your website header from any page. Click Edit to hop into edit mode, and then hover over the header until you see edit site header.
When you click on that, you’ll see two new options.
On the right hand side of the screen it will say Add Elements. This is where you can toggle on or off these options: button, social media icons, cart, account, multiple languages.
All of these element options can be edited separately. Once you have it toggled on, and you’re still in edit mode, click on the element until it is outlined in blue. You’ll see a new button - a pencil icon. Click on that button to open the editor feature for that specific element.
To change the site title or logo, you can click on the title or logo in edit mode and you’ll see it outlined in blue. You’ll also see a new button - a pencil icon - that opens up the editing menu for your title and logo. Here you can change the title text or add an image. You can have one logo for the desktop version of your site and another one for mobile.
The second new option that you’ll see when you click Edit Site header is for the design of your header. This is where you can change the layout, moving the site title/logo area, links, and elements to different areas of the header.
Under the layout option you can adjust link spacing and element spacing, and you’ll see your new design options! We can now add a shadow and a border to your header.
You’ll also see the option to set a fixed header. This will keep the header at the top of the screen. You can also select the *scroll back* option which will show the header at the top of your website, but only when you start to scroll back up the page.
Next on your design tab, you’ll find the size option where you can adjust the height of the header, and the width option where you can have the header be full width or inset.
The last part of this design menu is the color tab. Here, you’ll find three settings: solid, gradient, and adaptive. Adaptive will change the colors of your website header to match the color theme assigned to the first page section on that specific page. The gradient option lets you blend two colors together and the solid option lets you pick solid colors for the header and the links in your website header.
Last but not least - let’s talk about mobile! When you click on the mobile preview of your site, you’ll see a new options for editing your website header.
Here you can edit the design, changing up the layout, and adding the same effects we have for the desktop version: shadow, border, and fixed position.
You’ll also see color options for the header of your website that match what we saw on the desktop version, but there is one more important option here for editing the mobile version of your Squarespace website.
When you see view menu, you can click on this option, and the edit design button will open up the navigation design menu where you can change the alignment of the links in your website to be left, center, or right, and you can change the spacing.
To change the color of your mobile menu - the background, the elements, and the links - you’ll need to pick one of your color themes. The colors you selected in your site styles menu will be applied to your mobile menu.
There is one final mobile option - the icon! To change the icon, click on the menu until it’s outlined in blue, just like the site title and elements were when we edited those. Click on the edit button that appears and you can change the icon itself and the thickness of the line.
🔗 Related Content 🔗
📺 My Squarespaace site: insidethesquar...
💌 Weekly Squarespace emails: insidethesquar...
🎙️ Squarespace podcast: insidethesquar...
❤️ Like this video? Buy me a coffee to say thanks: buymeacoffee.c...
🙋♀️ Need some help? Official Squarespace Support: support.square...
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → insidethesquar...
- -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
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 😄
So detailed and answered a question I've been searching for. Thank you so much!
Awesome - glad it was helpful!
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.!
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 😉
@@InsideTheSquare and don't you dare STOP. Or I'm going to Wix! 😂
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.
Thank you for your comment - I'm so glad this new video helped! 🥰
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.
It's amazing, this plus already nice design editing of forms . Squarespace getting better 😊
I think so too - I love that they are always working to make their program better 🥰
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!
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! ;)
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. 😢
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
This is amazing. Thank you!!
You're so welcome! :)
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?
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
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?
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 🙌
Can you add a different nav on a different page?
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
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!
Interesting question! I don't have a code to alter that layout, but someone in the forum might. forum.squarespace.com
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?
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 :)
Hey do you know how to get different site header colours to every page?
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
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?
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. 🙌
is there anyway I can customize this header, i want menu first then logo then again more navigation and then button
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: ua-cam.com/video/csQaJB2iH2k/v-deo.html
@@InsideTheSquare thankyou that was exactly what i was looking for.
Is this functionality disabled for the free trial?
Not that I'm aware of! If you can't edit your website header, I would reach out to support ASAP. 😳 support.squarespace.com
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?
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! :)
@@InsideTheSquare ..Yes, I've been doing that too; should have mentioned it! I love the ability to save and reuse sections...Thanks, Becca!
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
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!
What version of Squarespace is this? My 7.0 - Brine family (Nueva template) has none of these options.
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
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
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!!
None of this is actually available, it just says edit site header, is this full availability only selected in the site styles
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!
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.
It would be nice 😅
I was thinking to move my website to showit now i will keep squarespace
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
😀😀👍👍👍