Jump to content

Create a break in the header border bottom line

Recommended Posts

Site URL: https://www.wildsouls.gr/en/

Hello! I am trying to recreate a favourite website for a Squarespace course I am on. I am trying to recreate their header, nav, logo and line situation. I have set the nav links, logo and cart all to the bottom of the header so that the image banner below shows through. I then coded in a border-bottom line. I want to create a break in the middle of this line so that it looks like the original site. Can anyone help me with the CSS code needed to do this? Or have I gone about this task in the wrong way altogether?

This is the code I have added so far to style the header and logo. I have included images of what I have and what I am trying to achieve (logo in the middle of the line).

.Header-inner, .Header-inner--bottom,
.Mobile-bar--inner {
    	border-bottom: 1.5px solid #222;
  		padding: 10px
}

.Header-branding-logo {
  margin-bottom: -120px;
  
}

 

Screenshot 2021-11-24 at 11.08.42.png

Screenshot 2021-11-24 at 11.09.05.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

1 hour ago, KaelaT said:

Site URL: https://www.wildsouls.gr/en/

Hello! I am trying to recreate a favourite website for a Squarespace course I am on. I am trying to recreate their header, nav, logo and line situation. I have set the nav links, logo and cart all to the bottom of the header so that the image banner below shows through. I then coded in a border-bottom line. I want to create a break in the middle of this line so that it looks like the original site. Can anyone help me with the CSS code needed to do this? Or have I gone about this task in the wrong way altogether?

This is the code I have added so far to style the header and logo. I have included images of what I have and what I am trying to achieve (logo in the middle of the line).

.Header-inner, .Header-inner--bottom,
.Mobile-bar--inner {
    	border-bottom: 1.5px solid #222;
  		padding: 10px
}

.Header-branding-logo {
  margin-bottom: -120px;
  
}

 

Screenshot 2021-11-24 at 11.08.42.png

Screenshot 2021-11-24 at 11.09.05.png

Do you mean making the line cross over the logo?

image.thumb.png.835cd7e6a51887756b6f4560516630f9.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 hours ago, bangank36 said:

Do you mean making the line cross over the logo?

image.thumb.png.835cd7e6a51887756b6f4560516630f9.png

Hey @bangank36! I meant that I do not want the line to cross over the logo. When I look at the original site via the URL above, the line doesn't cross over the logo. But I see in your screenshot it does cross over! 

Is there a way to adjust the line so it appears as it is in my screenshot below?

Thanks! 🙂

Screenshot 2021-11-24 at 15.48.32.png

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.