Jump to content

Align Header items with content in Fluid Engine grid below

Recommended Posts

I am trying to get the logo and the navigation within my header to align with the content in the grid below.

As you can see I have a boxy style with my images and when the screen size is below 1200px this works perfectly but how can I get the header to be in this alignment when the screen size is above 1200px?
 

https://juliajeckell.squarespace.com/

Password: juliajeckell

 

Thank you in advance

Screenshot 2022-11-21 at 12.09.07.png

Screenshot 2022-11-21 at 12.09.17.png

Edited by kathrynnicoledesigns
typo
Link to comment
2 hours ago, kathrynnicoledesigns said:

I am trying to get the logo and the navigation within my header to align with the content in the grid below.

As you can see I have a boxy style with my images and when the screen size is below 1200px this works perfectly but how can I get the header to be in this alignment when the screen size is above 1200px?
 

https://juliajeckell.squarespace.com/

Password: juliajeckell

 

Thank you in advance

Screenshot 2022-11-21 at 12.09.07.png

Screenshot 2022-11-21 at 12.09.17.png

I check that it is fine now.

image.thumb.png.afad70077291613140515af56f9c712c.png

Have you figured it out?

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
25 minutes ago, kathrynnicoledesigns said:

No, I want the header to align with the edges as per the 1st image, not the 2nd.

Is it what you mean?

image.thumb.png.ac274774497b690cca9c836d5aa8ef27.png

Try adding to Home > Design > Custom Css

#collection-63790d581ee9237d631fabfc .header .header-announcement-bar-wrapper {
  box-sizing: border-box;
  width: calc(min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2)));
  margin: 0 auto;
  padding-left:0;
  padding-right:0;
}

Hope it makes sense

Support me by pressing 👍  or marking as solution if this useful for you

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
20 minutes ago, Beyondspace said:

Is it what you mean?

image.thumb.png.ac274774497b690cca9c836d5aa8ef27.png

Try adding to Home > Design > Custom Css

#collection-63790d581ee9237d631fabfc .header .header-announcement-bar-wrapper {
  box-sizing: border-box;
  width: calc(min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2)));
  margin: 0 auto;
  padding-left:0;
  padding-right:0;
}

Hope it makes sense

Support me by pressing 👍  or marking as solution if this useful for you

That is what I mean but when I add this to the CSS I'm getting this error, "Operation on an invalid type". Any ideas what this means?

Link to comment
1 minute ago, kathrynnicoledesigns said:

That is what I mean but when I add this to the CSS I'm getting this error, "Operation on an invalid type". Any ideas what this means?

I have added this into the header though in a style tag and removed the id and this has worked

<style>

  .header .header-announcement-bar-wrapper {
  box-sizing: border-box;
  width: calc(min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2)));
  margin: 0 auto;
  padding-left:0;
  padding-right:0;
}
  
</style>

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.