Jump to content

Bedford Template: How do I make my header navigation have a max width and still stay centered?

Recommended Posts

I got half the problem down, at first I just wanted to make my header have a max width of 1600px;

I inserted this code into custom CSS

#header {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 max-width: 1600px;
 background: #fff;
 margin-left: auto;
 margin-right: auto;

This is pretty great, It makes my header only stretch out so far with width.

However It presented me with quite a peculiar problem that I do not think happens normally, I think it is an issue from squarespace, it shifts the header to the left most edge, even though margin: auto. Upon playing with it in the inspector I found that changing the left value to anything over zero centered the header. I can attach a video of that if you would like to see, but i'm just wondering if anyone has run into this bug before and knows how to fix it.

Here is the url of my site, zoom out on the page and you will see the header float to the left.

Link to comment
  • Replies 2
  • Views 774
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • 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.