html - Center ul submenus under parent li -
i've been looking around fix wasn't able find one. i'm helping out wordpress based site , introduced bootstrap , added custom css menu too. issue i'm not able center sub-menus under parent li, thing left on site.
html
<nav id="main_navbar_container"class="navbar navbar-default "> <div class="container"> <div class="row"> <!-- brand , toggle grouped better mobile display --> <div id="main_logo_container" class="navbar-header"> <!--main logo container--> <div="container"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="brand_name_header" class="navbar-brand" href='http://localhost/wordpress/' title='firesafe' rel='home'> <div> <img src='http://localhost/wordpress/wp-content/uploads/2015/05/11092946_10205134271130262_699861793_n.png'width="100px"> </div><!-- site-logo --> </a> </div><!--main logo container--> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul id="primary_menu"class="nav navbar-nav"> <div class="menu-home-screen-menu-container"><ul id="menu-home-screen-menu" class="menu"><li id="menu-item-126" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-126"><a href="http://localhost/wordpress/about-us/">about us</a></li> <li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="http://localhost/wordpress/recomendations/">recommendations</a></li> <li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-125"><a href="http://localhost/wordpress/gallery/">gallery</a></li> <li id="menu-item-346" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-346"><a href="http://www.google.com">services</a> <ul class="sub-menu"> <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://localhost/wordpress/risk-assesment/">risk assesment</a></li> <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="http://localhost/wordpress/risk-management/">risk management</a></li> <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://localhost/wordpress/fire-training/">fire training</a></li> <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://localhost/wordpress/fire-drills/">fire drills</a></li> </ul> </li> <li id="menu-item-130" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-130"><a href="http://localhost/wordpress/fire-safety-equipment/">fire safety equipment</a> <ul class="sub-menu"> <li id="menu-item-131" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-131"><a href="http://localhost/wordpress/fire-blankets/">fire blankets</a></li> <li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a href="http://localhost/wordpress/fire-extinguishers/">fire extinguishers</a></li> <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135"><a href="http://localhost/wordpress/fire-alarms/">fire alarms</a></li> </ul> </li> <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://localhost/wordpress/faqs/">faqs</a></li> <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-20 current_page_item menu-item-33"><a href="http://localhost/wordpress/contact-us/">contact us</a></li> </ul></div> </ul> </div> </div> </div> </nav> css:
#main_navbar_container{ margin-bottom:0; background:white; } .navbar-collapse { text-align:center; } .navbar-nav { display:inline-block; float:none; } /* #brand_name_header{ float: left; padding: 15px; text-align: center; width: 100%; } #brand_name_header a{ float:none; }*/ #primary_menu a:visited, #primary_menu a:link, #primary_menu a:hover{ color:#ea474b; } #primary_menu{ display:block; float:right; } #primary_menu li{ list-style:none; float:left; padding:15px 5px; min-width:100px; position:relative; } #primary_menu li:last-of-type{ border-right: none; } #primary_menu a{ font-weight:600; height:100%; width:100%; } #primary_menu li:hover a{ color:#cf000f; text-decoration: none; } /*hover effect*/ #primary_menu ul li:hover{ background-color:rgba(253, 227, 167,1);; } #primary_menu ul li:hover ul{ display:block; position:absolute; z-index:1; background-color:white; margin:auto; width:200px; top:100%; } #primary_menu ul li:hover ul li{ float:left; width:100%; position:relative; } #primary_menu ul li:hover a{ color:#ea474b; } #primary_menu ul li:active{ background-color:black; } /*sub menu*/ .sub-menu{ display: none; } .sub-menu li:hover{ background-color:rgba(253, 227, 167,1); } @media (max-width: 1200px){ #primary_menu{ width:100%; margin:0; } #primary_menu li{ width:100%; margin:5px 0 0 0; } #primary_menu ul li:hover{ background:none; } #primary_menu ul li:hover a{ font-color:black; /*\color:rgb(207,0,15);*/ } #primary_menu ul li:hover ul{ position:initial; background-color:rgb(238,238,238); width:100%; padding:0; margin:0; } #primary_menu ul li:hover li:first-of-type{ border-top:1px solid rgb(238,238,238); } #primary_menu ul li:hover li:last-of-type{ border-bottom:1px solid rgb(238,238,238); } #primary_menu ul li:hover a:link, #primary_menu ul li:hover a:visited{ color:#ea474b; } #primary_menu li{ /*border-bottom:1px solid rgb(238, 238, 238);*/ } #menu-home-screen-menu{ margin-left:0; } } an example of may found at: fiddle
help appreciated.
thanks in advance, j
Comments
Post a Comment