Jump to content

Aligning Custom Tabs within Hero Section in Squarespace

Go to solution Solved by Lesum,

Recommended Posts

I'm working on a project in Squarespace and could use some technical guidance. I've added custom tabs to the hero section of my site, but I can't quite figure out what code are needed to get everything looking just right.

If anyone has experience with tweaking code to make sure tabs sit within a hero section, I'd greatly appreciate your help!

Figma file: https://www.figma.com/file/esQ7eOYWojMRyrZ1PfSQyO/web-design?type=design&node-id=0%3A1&mode=design&t=fEVqOPAdLIGWGl9V-1


Link to comment
  • Solution

@claudiaxinxi To get started, you can set up the header on Squarespace editor. Place the logo up top and align those navigation items at the bottom. To do this, just head to Edit Site Header > Desktop > Header Layout > Last option from the top.

Next, for those rectangular shapes next to the header, you can add a background image with some custom CSS.

For the table in the body section, you could use custom HTML & CSS. If you opt for an image of the table, it won't scale well on various screen sizes.

Custom coding the entire thing can be time consuming. Thanks!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.