Center Menu (Thematic Child)
-
I was able to center my logo in the header, but don’t know how to go about centering the navigation menu. Here’s my code:
/* Menu
————————————————————– */
#access {float:center; width: 100%; margin:10px 0px 0 0; clear:none; line-height:22px; z-index:98; overflow:visible;}
#access .skip-link {display:none;}.menu {float:center;}
.menu ul {margin:0;padding:0;}
.menu ul li {display:inline;float:center;}
.menu ul li a {padding:0 12px 0 12px;margin:0;font-size:12px;line-height:22px;letter-spacing:0.025em;font-weight:400;}
.menu ul li ul li a {padding:1px 8px 0;height:21px;font-size:11px;letter-spacing:0;font-weight:400;}
.menu ul li ul li a:before {content:”— “;}
.menu ul li a[title=”Home”] {top:1px;font-family: “Garamond”, “Hoefler Text”, Times New Roman, Times, serif;font-style:italic;font-size:13.5px}.sf-menu, .sf-menu *{margin:0; padding:0; list-style:none}
.sf-menu{line-height:1.0}
.sf-menu ul{position:absolute; top:-999em; width:10em;}
.sf-menu ul li{width:100%}
.sf-menu li:hover{visibility:inherit;}
.sf-menu li{float:left; position:relative}
.sf-menu a{display:block; position:relative}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul{left:0; top:2.5em;z-index:99}
.sf-menu ul {border-width:0 0 0 1px; border-style:dotted;}
.sf-menu ul a {border-width:0; border-style:dotted;}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul{top:-999em}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul{left:10em;top:0}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul{top:-999em}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul{left:10em;top:0}.sf-menu{float:left}
.menu a{text-decoration:none; display: block;}
.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active {outline:0;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul{top:21px;left:8px;}
.sf-menu li.sfHover ul li ul,
.sf-menu li.sfHover ul li ul li ul{top:0;}
.sf-menu ul ul{ margin-top:0}
.sf-menu ul a:hover{color:#FFF;background-color:#000;}/* Navigation
————————————————————– */
.navigation .meta-nav {}
.nav-previous {padding:0 8px; float:left; width:40%;text-align:left}
.nav-next {padding:0 8px; float:right; width:40%; text-align:right}#nav-above {width:1000px;height:0px;margin:0 -100px;padding:0;display:inline-block;position:fixed;top:45%;z-index:1;font-size:88px;line-height:22px;font-family: Courier New, Courier, monospace, sans-serif;}
#nav-above a {line-height:22px;height:22px;display:inline;}
#nav-above .nav-previous {padding:0 8px; float:left; width:50px;height:22px;line-height:22px;}
#nav-above .nav-next {padding:0 8px; float:right; width:50px; text-align:right;height:22px}#nav-below {width:800px;margin:66px 0 88px;clear:both;float:none;display:table;}
#nav-below h3 {font-size:32px;line-height:44px;padding:0 8px;}
#nav-below h3 a,/* Single Page Navigation */
.single #nav-below {padding-top:66px;}
.single #nav-below .nav-previous {padding:0 8px; margin-top:22px; float:left; width:272px;}
.single #nav-below .nav-next {padding:0 8px; margin-top:22px; float:right; width:272px; text-align:left}
.single #nav-below .nav-excerpt {margin-top:0;}
.single #nav-below .nav-excerpt p {margin: 0;padding:0;font-size:11px;letter-spacing:0.025em;line-height:22px;}
.single #nav-below a {font-weight:600;}
.single #nav-below h3 a {font-weight:400;}Any help would be great!
-
Is “center” a valid value for the “float” property?
Hmm.. not sure. And not sure which “float” to change? (.menu, .sf-menu li, etc.)
The topic ‘Center Menu (Thematic Child)’ is closed to new replies.