css - How to center a navigation bar in Weebly site -
update 3/12/14: decided switch theme has centered nav bar , logo. transferred on other custom css elements old theme, such fonts, colors, , button style. here link site: http://www.ccard3.com/
i trying change site's layout left-logo , right-navigation layout logo on top , navigation below (both centered). have tried center logo , nav, , won't center of them. know how this? here css code header , navigation:
/* header --------------------------------------------------------------------------------*/ #nav-wrap .container, #nav-wrap .container table { border-collapse: collapse; border-spacing: 0; width:960px; } #wsite-title { font-family: 'helveticaneue-thin',helvetica-light,arial,sans-serif; font-weight:300; font-size:16px; color:#333; line-height:28px; float:left; transition: color 1s; -moz-transition: color 1s; -webkit-transition: color 1s; -o-transition: color 1s; } #wsite-title:hover { color:#333; } #header { border-collapse: collapse; border-spacing: 0; text-align:right; height:20px; width:100%; } #header, #header table { border-collapse: collapse; border-spacing: 0; } #header td { vertical-align: middle; text-align: left; } #header-right { border-spacing:0; padding:0; padding-top:20px; } #header-right table { float:right; width:1px; } #header-right td { padding: 0 0 0 0; } /* navigation --------------------------------------------------------------------------------*/ #nav-wrap .container { clear: both; overflow: hidden; position: relative; margin-bottom:20px; } #nav-wrap .container table, #nav-wrap .container table tr, #nav-wrap .container table tr td, #nav-wrap .container table tbody { vertical-align:bottom; } td#nav { float:right; } #navigation { line-height: 1; float: right; } #navigation ul { display: inline; list-style: none; float: right; max-width:700px; height:44px; overflow:hidden; margin-bottom:-1px; } #navigation li { display: inline-block; position: relative; list-style: none; margin-left:6px; } #navigation ul li { display: block; color: #777; text-decoration: none; padding: 18px 0px 8px; margin:0 0 0 7px; border: 0; outline: 0; list-style-type: none; float: left; font:16px 'helveticaneue-light',helvetica-light,arial,sans-serif; text-transform:none; font-weight:300; text-align:center; } #navigation ul li#active a{ color:#000; } #navigation ul li a:hover { color: #333; } /* navigation submenu's --------------------------------------------------------------------------------*/ #wsite-menus .wsite-menu { position:relative; margin-top:11px; } #wsite-menus .wsite-menu li ul:after { content: ""; width: 0px; height: 0px; border-style: none; border-width: 0 0px 0px 0px; border-color: transparent transparent transparent transparent; position:absolute; top:-6px; left:16px; } #wsite-menus .wsite-menu:after { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0 0px 0px 0px; border-color: transparent transparent #000 transparent; position:absolute; top:-6px; left:16px; } #wsite-menus .wsite-menu li:first-child { -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; } #wsite-menus .wsite-menu li:last-child { -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } #wsite-menus .wsite-menu li { background:rgba(360,360,360,0.8); font-family: 'helveticaneue-light',helvetica-light,arial,sans-serif; font-size:14px; color:#777; border:0; border-bottom:none; } #wsite-menus .wsite-menu li a:hover { color:#333; background-color:rgba(360,360,360,0.8); border:0px solid #078ef0; border-radius:0px; padding:5px 5px; }
have tried
margin-left: auto; margin-right: auto; display: table; margin: 0 auto; it nice jsfiddle better diagnose issue. anyways try 3 options.
Comments
Post a Comment