[Solved] trying to center header title and navigation

[drotar]

been fighting with this for a couple of hours and am no closer to solving my problem. i am rebuilding a website

http://www.drotardesign.com/test/index.html

and i am trying to center the titleTop (JOHN BEHRING | DIRECTOR and the buttons beneath it but to no avail.

i’ve tried using the display: inline-block but again to no avail. another set of eyes might just be the ticket. thanks for taking the time and any suggestions you might have. much appreciated.

drotar

the CSS i am using right now is:

.titleTop {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(245,207,0,.50);
}

` .block-title {
margin-top: 0em;/JOHN BEHRING TITLE NAME FROM TOP/
font-size: 1.875em;
line-height: 1.2em;
text-align: center;
white-space: nowrap;
font-family: ‘BeaufortRegular’;
letter-spacing: .0em;
font-weight: 100;
color: #d01e45;
text-shadow: 1px 1px 1px #000;
background-color: rgba(245,207,0,.50);

}

header {
position: fixed;
height: 50px;
background-color: rgba(255,255,255,.70);
}

/*THIS CONTROLS DROTAR NAVIGATION BUTTONS TOP*/

header nav {
/position: static;/
position: absolute;
margin-top: 0px; /CONTROLS HEIGHT OF BUTTONS FROM TOP OF PAGE/
width: auto;
left: auto;
/margin-left: 50px;
width: auto;
left: auto;/
}

header nav ul {
text-align: center;
width: auto;
/left: -120px; *//CONTROLS BUTTONS FROM THE LEFT SIDE*/
}

header nav li {
margin-left: 0;
width: auto;
border-bottom: 0;
}
`

[timbarden]

Hi,

Remove the width: 144px; from your header h1.

:)

[timbarden]

Oh, and remove the position: absolute from header nav to center the menu.

[Paulie_D]

If you are absolutely determined to have the nav at position:absolute then all you have to do is make it 100% wide.

@media only screen and (min-width: 769px)
header nav {
  position: absolute;
  margin-top: 0px;
  width: 100%;
}

The ul is 100% wide by default and has text-align:center so the li will center automatically.

[drotar]

GENTLEMEN,
thank you for your insight. the width: 100% fixed it. also, the removal of width also worked like a charm. you guys ROCK! thank you again.

[Author]

Posts