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

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

Question

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

Share this post


Link to post

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;
}





Share this post


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