Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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

Go to solution Solved by tuanphan,


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.

Edited by PMDesigner
Initial Revision
Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 1

@PMDesigner Remove the code

#header {
   position: fixed;

and add this CSS to Home > Design > Custom CSS

#header {
   position: fixed;
   left: 0;
   right: 0;

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...