Jump to content

How to make this my Header?

Recommended Posts

  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Here is my result

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.