Jump to content

Can I add a thin border across the width of a site?

Recommended Posts

Site URL: https://pockimals.com

Is there a way to add a thin border across the width of a site? I'd like to use a piece of striped art under the menu bar of each page on my site, but I cannot figure out how to keep it a static height and still have it stretch the full width of the site. When I add the art into its own section, I either get too much white, or the stripe is too tall. When I've tried to use code to shorten the section to the height I want, the whole section disappears. 

The site is public now.

I would also like to control how tall it is on mobile, so it doesn't get too tiny.




Striped line Home.png

Striped Line Shop.png

Striped line footer- too tall.png

Edited by AnaDavisDesign
Link to comment

@derricksrandomviews Interesting. This solution is a bit different than what I had been thinking...

I have a piece of artwork (the striped border) that I'd like to have it stretch across the entire website and maintain its relative height. Ideally, I'd like to create a smaller piece of this same artwork for mobile that does the same. Does that make sense? 

In the first image I posted, the height is correct, but the art doesn't stretch across the whole site. In the second example, the artwork does stretch across the whole site, but I can't control how tall it is (too much of the stripe is overwhelming to look at).

Link to comment

That was another thought, to use an image as opposed to code to create the stripe. The image idea can work but it would need to be targeted to your site blocks that is why the site password is neeed. Coders do a Chrome inspection, break out the block code and  id and then write additional code to do what you want. So you need to put the images where you want them, provide the password and I am certain some good coders here will fix it with code that will allow easy adjustment of the image height and width. 

Edited by derricksrandomviews
Link to comment

The site is public now.

Yes, I was trying to do exactly what you describe, but I am just not skilled enough to get it quite right. 🙂 I was able to adjust the height on sections, but it was causing the stripe to disappear completely when I put in the height I thought I wanted.

Thank you!

Edited by AnaDavisDesign
Link to comment

Open the following image in a new tab/window and save the image to your computer. It is a cropped version of your thin stripe image.


Add the following to Design > Custom CSS.

body:not( .sqs-jacquard ) .header:after  {

  background-image: url('[enter image url here]');
  background-repeat: repeat-x;
  content: '';
  display: block;
  height: 15px;

Select the "[enter image url here]" text in the Custom CSS field and hit backspace or delete key.


Scroll down until you see MANAGE CUSTOM FILES button and click it.


Click on Add images or fonts.


Navigate your OS's file selection interface and select the file you downloaded earlier and then click on the newly added file.


The CSS should now look something like the following.


Click on SAVE.


Go into Full Preview and reload your site. Or try viewing in an incognito window.

Hopefully you should now have a thin stripe across the width of your site header. If not try increasing the vertical spacing for the header a bit. Then try viewing again. This effect won't show up in Preview.

I'm not 100% sure this will work as I had some odd issues along the way developing it.


But it's worth a shot eh? 🙂

Let us know how it goes.


Edited by creedon
fix some broken images

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...

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.