How do I center my header/menu ?

  • 1
  • Question
  • Updated 5 years ago
  • Answered
I have been playing with the CSS and I just cant figure it out.
Its not working out so well for me.
Here is what im playing with, sorry if it is very long.
Thank you for your help.
Oh one other thing, if I can center the Header, I would love to have the Menu directly center bellow the header.

#header #spacer_thingy {

height:5px;

width:100%;

}

/* Header > Logo */

#logo {

float: left;

}

#logo h1, #logo h2 {

float: left;

padding: 0 0 0 20px;

}

#logo h2 {

padding-left: .25em;

}

#logo a {

text-decoration: none;

color: #FFFFFF;

}

/* Header > Menu */

#menu {

float: right;

}

#menu ul {

margin: 0;

padding: 15px 100px 0 0;

list-style: none;

}

#menu li {

display: inline;

}

#menu a {

display: block;

float: left;

padding: 0 20px;

text-decoration: none;

font-size: 1em;

font-weight: bold;

color: #FFFFFF;

}

#menu a:hover {

text-decoration: underline;

}

#menu .selected a {

}
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like

Posted 5 years ago

  • 1
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Kevin,

Which template are you using?
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like
Hello Crystal,

I'm using Midnighalley.
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like
hmmm even trying to tweak it a little it seems as tho my site doesnt like this very much.Was hoping there was an easy button for this one, most everything I have adjusted myself was easy to find or theorycraft with.
This however, not so much.

Thank you very much for trying tho, if you find out more I would greatly appriciate the help. Again thank you.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hi Kevin,

I realized what I posted before is dependent on page width. I was just working on it now to try to code it so it auto centers. It is still a work in progress but here is what I have so far:

#logo {
position:absolute;
top:0px; margin-left:-150px; left:50%
}

#menu {
position:absolute;
top:25px; margin-left: -170px; left:50%
}
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hi Kevin,

The code now appears to work in all screen widths. The" margin-left" number is dependent on the number of characters in the line. The greater the number of characters, the greater the negative number to make it auto center. For example if you menu names are short -170px may work. If your menu names are long, -250px would be better.
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like
Ah nice, getting there for sure.
Im using a test site as well, pretty much a duplicate of my main.
Now it seems that the center is pretty much bang on with a few adjustments, but now the menu is always sitting in behind the header.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hi Kevin,

The menu can be moved lower by changing the top:25px. That is the width of the top margin. For example top:35px would be lower on the screen then 25px.
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like
Perfect, thank you so very much for your time Crystal ^_^