Jump to content

Offset Floating Header Bar

Recommended Posts

Site URL: https://dharmicliving.squarespace.com/

Hello! I am having issues with trying to create an offset floating navigation bar. I am using the below code which works perfectly on all pages except for the homepage, which is an index page. I want the offset margin to be present on all sides but currently the homepage is not viewing properly on the right hand side - see screenshot. Please help and thank you! pw : Dharma

// Floating Header Bar //
header {
  margin: 25px;
}

I am also using this code to create the background colour for the navigation...

.Header {
   background-color: #f0efed !important;
}

Screen Shot 2022-10-02 at 2.51.41 pm.png

Link to comment

@earthwindflowermoon, you've added a margin, but the width of the header is still the same so it floated off the page, this Custom CSS should fix it by reducing the width of the header by double the margin:

.Header--bottom.Header--overlay {
  width: calc(100vw - 50px);
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
On 10/3/2022 at 3:54 PM, Ziggy said:

@earthwindflowermoon, you've added a margin, but the width of the header is still the same so it floated off the page, this Custom CSS should fix it by reducing the width of the header by double the margin:

.Header--bottom.Header--overlay {
  width: calc(100vw - 50px);
}

 

In Custom CSS, you will need to add some ~ " character to make calc work

.Header--bottom.Header--overlay {
  width: calc(~"100% - 50px");
}

and I think 100% will be better

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.