Jump to content

How can I create this line with CSS?

Recommended Posts

1) How can I create this 'line / frame' in css?
I know how to create a horizontal line and two vertical one, but i cant't stitch those together to recreate the graphic.

2 how can i make this sticky on top of the page? So it hangs above the primary navigation. ( and make it sticky on every page when scrolling?



Link to comment
  • Replies 10
  • Views 1.6k
  • Created
  • Last Reply

Use a code block and insert

<div class="bar"></div>

Add CSS (you may have to adjust size and location)

.bar {
  border: 3px solid black;
  width: 100%;
  height: 30px;
  border-bottom: none;
  position: fixed;
  background: transparent;
  top: 0px;
  left: 0px;


Link to comment


This topic is now archived and is closed to further replies.

  • 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.