Create a break in the header border bottom line

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;
  
}

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;
  
}

 

Do you mean making the line cross over the logo?

3 hours ago, bangank36 said:

Do you mean making the line cross over the logo?

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! 🙂