html - How can I align this menu to be center? -
i have site:
code html:
<div class="content-menu"> <div class="navbar navbar-inverse bs-docs-nav" role="banner"> <div class="navbar-header"> <button class="navbar-toggle" data-target=".bs-navbar-collapse" data-toggle="collapse" type="button"><span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <div class="logo-mobile"> <a href="#"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-mobile.png"></a> <ul class="lang-top navbar-right"> <li> <a href="#">en</a> </li> <li> <a href="#">fr</a> </li> </ul> </div> </div> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <div class="menu-menu-1-container"> <ul class="nav navbar-nav" id="menu-menu-1"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22" id="menu-item-22"> <a href="http://dg-design.ch/bagel/?page_id=4" title="home">home</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27" id="menu-item-27"> <a href="http://dg-design.ch/bagel/?page_id=10" title="news">news</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65" id="menu-item-65"> <a href="http://dg-design.ch/bagel/?page_id=63" title="events">events</a> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71" id="menu-item-71"> <a href="http://www.smood.ch/en/156_bagel-house-caf%c3%a9" target="_blank" title="delivery">delivery</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23" id="menu-item-23"> <a href="http://dg-design.ch/bagel/?page_id=6" title="about us">about us</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25" id="menu-item-25"> <a href="http://dg-design.ch/bagel/?page_id=12" title="contact">contact</a> </li> </ul> </div> <ul class="lang-top navbar-right"> <li><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-menu.png"></li> <li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li> <li class="icon"> <a href="#">menu</a> </li> <li class="icon"> <a href="#">en</a> </li> <li class="icon"> <a href="#">fr</a> </li> <li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li> <li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li> <li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li> </ul> </nav> </div> </div> code css:
.wrapper .content .content-menu { /* width: 91%; */ /*background: #5b626a;*/ position: absolute; z-index:9999; /* left: 4%; */ margin: 0 auto; left: 0; top: 0; right: 0; } i tried put above code "text align: center" unfortunately not work. can tell me please why not work?
what must change items aligned in center on resolution?
try this:
html
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <div class="menu-menu-1-container"> <ul class="nav navbar-nav" id="menu-menu-1"></ul> <ul class="lang-top navbar-right"></ul> </div> </nav> css
collapse navbar-collapse bs-navbar-collapse{ margin: 0px auto; width: 1500px; } 

Comments
Post a Comment