How to make this my Header?

Site URL: https://bear-flute-m8he.squarespace.com

I like this header design how the logo overlays part of the image.  However, I did this with CSS and it is actually covering up the real header until I scroll.  How can I combine the header (with the links) and the overlay of the logo over the cover pic?

pw: smalltownstrings

On 10/4/2021 at 2:28 AM, sts101 said:

Site URL: https://bear-flute-m8he.squarespace.com

I like this header design how the logo overlays part of the image.  However, I did this with CSS and it is actually covering up the real header until I scroll.  How can I combine the header (with the links) and the overlay of the logo over the cover pic?

pw: smalltownstrings

You can try in Home > Design > Custom Css

[data-header-style="theme"].header.black, [data-header-style="dynamic"].header.black {
    background-color: transparent;
}

#header .header-announcement-bar-wrapper::before {
 content:'';
  width: 100%;
  height: 80%;
  background:#000;
  position: absolute;
  top:0;
  left:0;
}

Support me by pressing 👍 if this useful for you

Here is my result

This is awesome!  My new problem is trying to split the header links on either side of the logo.  Can you help with that?

@bangank36

@sts101 Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(function() {
   $(".header-display-desktop .header-nav-item:nth-child(n+3)") .prependTo (".header-actions--right");
});
</script>
<style>
  .header-actions.header-actions--right .header-nav-item a {
    color: white;
    margin-left: 1.5vw;
}
</style>

@tuanphan  That kind of works, but the logo is no longer centered and the links are wrapping strangely.

On 10/9/2021 at 7:36 PM, sts101 said:

@tuanphan  That kind of works, but the logo is no longer centered and the links are wrapping strangely.

 

Hi,

Can you remove the code? I will check it again

@tuanphan  Thank you!  I have removed the code.

On 10/10/2021 at 11:31 PM, sts101 said:

@tuanphan  Thank you!  I have removed the code.

 

Add above code

next, remove this code from Custom CSS

.header-nav-item:nth-of-type(3) {
    margin-right: 340px !important;
}

Next, add this to Custom CSS

Quote

.header-nav {
    position: relative !important;
}

@tuanphan  This is working MUCH better!  Thank you so much!  I still have a couple of issues though.  The first menu item on the left seems to be crowded to the edge.  How can I move it over to the right just a little?  Also, when I click on the Bio menu item, the left side menu disappears.

Thank you!

On 10/20/2021 at 6:30 AM, sts101 said:

@tuanphan  This is working MUCH better!  Thank you so much!  I still have a couple of issues though.  The first menu item on the left seems to be crowded to the edge.  How can I move it over to the right just a little?  Also, when I click on the Bio menu item, the left side menu disappears.

Thank you!

Add to Design > Custom CSS

nav.header-nav-list {
    padding-left: 3vw;
}
body:not(.header--menu-open) .header-nav-wrapper a {
    color: white !important;
}