Center Navigation Bar
-
Hello,
I’ve been trying to center the navigation and give it a width of 1200px, just as the Header Banner. (I want it to be right above the green line and make it just as wide) But whatever I do, all it does is cutting the Navigation bar into two rows, as if some hidden content on the right side is blocking the space.
This is what it looks like at the moment:
https://www.bilderhoster.net/27843/7j8myvwr.jpg.htmlAnd this is my main-navigation code:
.main-navigation { text-align: center; float: right; clear: right; margin: 16px 0 0 0; margin: 1rem 0 0 0; } .main-navigation h1 { font-size: 32px; font-size: 2rem; line-height: 1.25; } .nav-menu { font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size: 18px; font-size: 1.125rem; line-height: 0.3; text-transform: uppercase; } .main-navigation ul { list-style: none; margin: 0; padding: 0; } .main-navigation li { float: left; position: relative; margin: 0; } /* Padding around each top level menu option */ .nav-menu > li a { padding: 12px; padding: .75rem } .main-navigation ul ul li { margin: 0; } .main-navigation ul ul a { padding: 8px 12px; /* Padding around each dropdown menu option */ padding: .5rem .75rem; } .main-navigation a { display: block; text-decoration: none; color: #6ca83e; /* Nav bar link color */ } .main-navigation a:visited { color: #6ca83e; /* Nav bar link visted color */ } .main-navigation a:hover { color: #376216; /* Nav bar link hover color */ } .main-navigation ul ul { display: none; position: absolute; left: 0; z-index: 99999; line-height: 1.7; background-color: #6ca83e; /* Nav bar dropdown background color */ } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation ul ul a { color: #fff; /* Nav bar dropdown link color */ width: 14em; /* Nav bar dropdown width */ } .main-navigation ul ul a:visited { color: #fff; /* Nav bar dropdown link visited color */ } .main-navigation ul ul li { } .main-navigation ul ul :hover > a { color: #376216; /* Nav bar dropdown level 2 link color on level 3 hover */ background-color: #344860; /* Nav bar dropdown link background color on hover */ } .main-navigation li:hover > a { color: #376216; /* Nav bar link color on hover */ } .main-navigation ul ul a:hover { color: #fff; /* Nav bar dropdown link color on hover */ } .main-navigation ul li:hover > ul { display: block; } .main-navigation li.current_page_item a, .main-navigation li.current-menu-item a { } .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current_page_parent > a { color: #376216; /* Nav bar link color for current menu item or ancestor */ } .main-navigation ul ul li.current-menu-item > a, .main-navigation ul ul li.current-menu-ancestor > a { color: #376216; /* Nav bar dropdown link color for current menu item */ } .main-navigation ul .divider { border-bottom: 1px solid #aaa; height: 0; line-height: 0.0625; overflow: hidden; } .main-navigation ul li.dropdown-header a, .main-navigation ul li.current-menu-item ul .dropdown-header a { color: #aaa; /* Nav bar dropdown header color */ background-color: #3a3a3a; /* Nav bar dropdown header background color */ }
Best wishes,
Alex
Viewing 9 replies - 1 through 9 (of 9 total)
Viewing 9 replies - 1 through 9 (of 9 total)
- The topic ‘Center Navigation Bar’ is closed to new replies.