Marius February 2016

How can I align this menu to be center?

I have this site:

link

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-        

Answers


silviagreen February 2016

Here is my solution:

put the ul into the div

        <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>

           <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"><im 


AmanS February 2016

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;
}

enter image description here


sanjay joon February 2016

Create one More Div under navbar tag fixed width & set the nav css according width class ex : -

<div class="content-menu">
<div class="navbar navbar-inverse bs-docs-nav" role="banner">
    <div class="width">
    <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/?pa 


FarZan Takhsha February 2016

Step 1) Open a div tag between wrapper and container. Step 2) Add css code to style tag.

HTML:

<div class="warpper" >
  <div class="middle">
    <div class="container ">
         YOUR MENU BLOCK
    </div>
  </div>
</div>

CSS:

.middle {
width: 75%;
position: absolute;
margin-left: -37%;
left: 50%;
}

Post Status

Asked in February 2016
Viewed 1,545 times
Voted 9
Answered 4 times

Search




Leave an answer