I am trying to align the menu that I have centrally, but the attempts I made were frustrated and my knowledge in css
is little, I tried to make it change here:
#topNav ul.nav>li.mega-menu { position: unset; }
The css code is this:
/** Menu **************************************************************** **/ #topBar { display:block; position:relative; background-color:#fff; min-height:30px; z-index:11; } body.boxed #topBar { -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #topNav a.logo { padding:30px 0; display:block; text-align:center; border-bottom: 1px solid #eee; z-index:10; } #topNav a.logo.onepage { display:inline-block; height:50px; overflow:hidden; margin-top:3px; } #topBar a.social { width:24px; height:24px; line-height:26px; font-size:16px; } #topNav { display:block; left:0; right:0; top:0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background:#fff; position:relative; z-index:10; -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); -o-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); } #topNav .nav-pills>li>a, #topNav .nav-pills>li>a:hover, #topNav .nav-pills>li>a:focus, #topNav .nav-pills>li.active>a, #topNav .nav-pills>li.active>a:hover, #topNav .nav-pills>li.active>a:focus { background-color:transparent; } #topNav div.navbar-collapse { padding:0; } #topNav ul.nav>li { color:#666; border-left:#eee 1px solid; text-align:center; position:relative; margin:0; } #topNav ul.nav>li:last-child { border-right:#eee 1px solid; } #topNav ul.nav>li:hover>a:before, #topNav ul.nav>li.active>a:before { content:' '; background-color: #EF4539; height: 2px; width: 100%; left: 0; top: -3px; position: absolute; } #topNav ul.nav { border-right:#eee 1px solid; } #topNav ul.nav>li a { color:#000000; padding: 15px 25px; position: relative; text-decoration: none; font-size:14px; line-height:14px; display:block; font-weight:300; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } #topNav ul.nav>li>a>span { display:block; font-size:12px; color:#ccc; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } #topNav ul.nav>li:hover a { color:#333; } #topNav ul.nav>li:hover a>span { color:#888; } /* submenu */ #topNav ul.dropdown-menu li.divider { margin:-1px 0 0 0; padding:0; border:0; border-bottom:rgba(0,0,0,0.2) 1px solid; } #topNav .nav li:hover>ul.dropdown-menu { padding:0; display:block; z-index:100; } #topNav ul.dropdown-menu { text-align:left; margin-top:0; box-shadow:none; border:#eee 1px solid; border-top:0; list-style:none; background-color:#fff; box-shadow:rgba(0,0,0,0.2) 0 6px 12px; min-width:200px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #topNav ul.dropdown-menu li { position:relative; } #topNav ul.dropdown-menu>li a { margin:0; padding:10px 15px; font-weight:400; color:#555; font-size:13px; border-bottom:rgba(0,0,0,0.1) 1px solid; } #topNav ul.dropdown-menu>li a i.fa { margin-right:4px; } #topNav ul.dropdown-menu a.dropdown-toggle:after { content: "\f105"; font-family: FontAwesome; position: absolute; font-size: 15px; right: 10px; top: 9px; color:#999; } #topNav .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #eaeaea; margin-top: 5px; margin-right: -10px; } #topNav .dropdown-submenu li:hover> a:after { color:#fff !important; } #topNav ul.dropdown-menu li:last-child>a { border-bottom:0; border-bottom:0; } .dropdown-menu>li:hover>a, .dropdown-menu>li:focus>a { color:#fff !important; background-color:#333; } /* sub-submenu */ #topNav ul.dropdown-menu>li:hover > ul.dropdown-menu { display:block; position:absolute; left:100%; top:0; padding:0; margin:0; border-top:0 !important; border-bottom:0 !important; border-right:0 !important; border:#eaeaea 1px solid; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /* search */ #topNav form.search { float:right; max-width:180px; margin:12px 8px 0 0; padding:0; } #topNav form.search { position:relative; } #topNav form.search input { padding:6px 26px 6px 6px; height:auto; width:100%; font-size:13px; position:relative; z-index:0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #topNav form.search button { position:absolute; top:10px; right:10px; color:#ccc; z-index:1; } /* mobile */ #topNav button.btn-mobile { display:none; } #topNav button.btn-mobile { color:#fff; display: none; background:#333; padding:6px 10px; margin-top:10px; margin-bottom:3px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #topNav button.btn-mobile i { padding:0; margin:0; font-size:21px; } /** Mega Menu **************************************************************** **/ #topNav ul.nav>li.mega-menu { position:inherit; } #topNav ul.nav>li.mega-menu p { margin:0; padding:10px 10px 0 10px; font-size:13px; } #topNav ul.nav>li.mega-menu div.row { width:100%; } #topNav ul.nav>li.mega-menu div { display:table; } #topNav ul.nav>li.mega-menu div div { border-left:#eee 1px solid; margin-left:-1px; display: table-cell; vertical-align:top; float:none; } #topNav ul.nav>li.mega-menu div div:first-child { border-left:0; } #topNav ul.nav>li.mega-menu>ul { width:100%; background-color:transparent; border:none; box-shadow:none; } #topNav ul.nav>li.mega-menu>ul.dropdown-menu>li { margin:0 15px; padding:15px; background-color:#fff; border: #eee 1px solid; box-shadow: rgba(0,0,0,0.2) 0 6px 12px; } #topNav ul.nav>li.mega-menu>ul ul { margin:0 !important; padding:0 !important; list-style:none; } #topNav ul.nav>li.mega-menu h3 { font-size:18px; line-height:18px; margin:10px 10px 20px 10px; padding:0; } #topNav ul.nav>li.mega-menu>ul li>a { border-bottom:0; padding: 6px 10px; } #topNav ul.nav>li.mega-menu>ul li.active>a, #topNav ul.nav>li.mega-menu>ul li:hover>a { color:#fff; background-color:#333; } #topNav ul.nav>li.mega-menu>ul li.divider { border:0; border:rgba(0,0,0,0.01) 1px solid; margin:10px 0; } /** Secondary Main Menu Top Bar / Shop Cart **************************************************************** **/ #barMain { float:right; margin-top:6px; font-size:12px; } #barMain .nav>li>a { padding:5px 10px; } #barMain .nav>li>a:hover, #barMain .nav>li>a:focus { background-color:rgba(0,0,0,0.03); } /* cart */ #barMain .nav>li.quick-cart { background-color:#F8F8F8; margin-left:10px; } #topBar.styleBackgroundColor .nav>li.quick-cart { background-color:rgba(0,0,0,0.1) !important; } #topBar.styleBackgroundColor .nav>li.quick-cart.open>a { color:#000; } #topBar.styleBackgroundColor .nav>li.quick-cart p { color:#000; } #barMain .nav>li.quick-cart>.dropdown-menu { border:0; margin:0; background-color:#F0F0F0; width:185px; } #barMain .nav>li.quick-cart .quick-cart-content { padding:10px 10px 0 10px; } #barMain .nav>li.quick-cart p { margin:0; padding:10px 10px 0 10px; font-size:13px; } #barMain .nav>li.quick-cart a.quick-cart-item { clear: both; display: block; padding: 10px 8px; font-size: 13px; line-height: 16px; min-height: 60px; text-decoration: none; border-bottom: rgba(0,0,0,0.1) 1px solid; background: rgba(0,0,0,0.05); } #barMain .nav>li.quick-cart a.quick-cart-item, #barMain .nav>li.quick-cart a.quick-cart-item a { color:#999 !important; } #barMain .nav>li.quick-cart a.quick-cart-item:hover { background: rgba(0,0,0,0.08); } #barMain .nav>li.quick-cart .cart-footer { margin-top:10px; } /** Responsive Top Nav **************************************************************** **/ @media only screen and (max-width: 990px) { .navbar-collapse { max-height:100%; } #topNav .container { padding:0; margin:0; } #topNav button.btn-mobile { display:block; float:right; margin-right:15px; } #topNav form.search { float:left; margin-top:6px; margin-left:15px; } #topNav nav.nav-main { background-color:#fff; } #topNav div.nav-main-collapse, #topNav div.nav-main-collapse.in { width: 100%; margin:50px 0 0 0; } #topNav div.nav-main-collapse { float: none; overflow-x:hidden; } #topNav div.nav-main-collapse.collapse { display: none !important; } #topNav div.nav-main-collapse.in { display: block !important; } #topNav div.nav-main-collapse { position: relative; } #topMain>li>a>span { display:none !important; } #topMain li { display:block !important; float:none; text-align:left; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #topMain>li>a { text-align:left; border:0; border-bottom:rgba(0,0,0,0.1) 1px solid; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #topMain>li:hover, #topMain>li:hover>a { border-top:0 !important; } #topNav ul.nav>li>a:after { content: "\f107"; font-family: FontAwesome; position: absolute; font-size: 14px; right: 20px; top: 15px; color:#999; } /* submenu */ #topMain ul.dropdown-menu { position: static; clear: both; float: none; display: none !important; border-left:0 !important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #topNav nav.nav-main li.resp-active > ul.dropdown-menu { display: block !important; margin-left:30px; margin-right:30px; padding:20px 0; border-right:0; } #topNav nav.nav-main li.resp-active > ul.dropdown-menu li { border-left:0; } #topNav ul.nav>li:hover>a:before, #topNav ul.nav>li.active>a:before { background-color:transparent; } #topNav ul.dropdown-menu>li:hover > ul.dropdown-menu { position:static; } /* mega menu */ #topNav ul.nav>li.mega-menu>ul.dropdown-menu>li { padding:0; margin:0 30px 0 0; border:0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #topNav ul.nav>li.mega-menu h3 { margin-left:8px; } #topNav ul.nav>li.mega-menu>ul li>a { border-bottom: rgba(0,0,0,0.1) 1px solid; } #topNav ul.nav>li.mega-menu div, #topNav ul.nav>li.mega-menu div div { border:0; margin-bottom:30px; display:block; width:100%; } #topNav ul.nav>li.mega-menu div div:last-child { margin-bottom:0; } } @media only screen and (max-width: 479px) { #topNav form.search { margin-left:4px; } #topNav button.btn-mobile { margin-right:4px; } #topBar a.logo { display:block; text-align:center; margin:6px 0; float:none; } .hide_mobile { display:none; } }
The page with the menu can be seen here: