Menu to be included

Question

I want a menu to be included in my website after the menu   Alumni
http://sjvas.ac.in/
If include some another menu it comes down like this.
Here is my code:
<div id="Nav">
<div class="menu-button">Navigation</div>
    <nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="index.php">Home</a>
           <!--   <ul>
                <li> <a href="#content">Sub 1 Item 1</a></li>
                <li><a href="">Sub 1 Item 2</a></li>
                <li><a href="">Sub 1 Item 3</a></li>
                <li><a href="">Sub 1 Item 4</a></li>
              </ul> -->
            </li>
            <li><a href="">Profiles</a>
              <ul>
                <li><a href="Correspondent.php">Correspondent</a></li>
                <li><a href="Headmistress.php">Head Mistress</a>
                 <!-- <ul>
                    <li><a href="">Sub 2 Item 1</a></li>
                    <li><a href="">Sub 2 Item 2</a></li>
                    <li><a href="">Sub 2 Item 3</a></li>
                  </ul>-->
                </li>
                   <li><a href="Fac.php">Faculties</a></li>
                <!--<li><a href="">Sub 1 Item 3</a>
                  <ul>
                    <li><a href="">Sub 2 Item 1</a></li>
                    <li><a href="">Sub 2 Item 2</a>
                      <ul>
                        <li><a href="">Sub 3 Item 1</a></li>
                        <li><a href="">Sub 3 Item 2</a></li>
                        <li><a href="">Sub 3 Item 3</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>-->
              </ul>
            </li>
            <li><a href="Ves-Photogallery.php">Photo Gallery</a>
             <!-- <ul>
                <li><a href="">Sub 1 Item 1</a></li>
                <li><a href="">Sub 1 Item 2</a></li>
                <li><a href="">Sub 1 Item 3</a></li>
              </ul> -->
            </li>
            <li><a href="Alumni.php">Alumni</a>
             <!-- <ul>
                <li><a href="">Sub 1 Item 1</a></li>
                <li><a href="">Sub 1 Item 2</a></li>
                <li><a href="">Sub 1 Item 3</a></li>
              </ul> -->
            </li>
             <li><a href="http://sjvas.ac.in:2095/cpsess9811918436/3rdparty/roundcube/index.php">Mail</a>
             <!-- <ul>
                <li><a href="">Sub 1 Item 1</a></li>
                <li><a href="">Sub 1 Item 2</a></li>
                <li><a href="">Sub 1 Item 3</a></li>
              </ul> -->
            </li>
            <li><a href="Contact.php">Contact Us</a>
          <!--    <ul>
                <li><a href="">Sub 1 Item 1</a></li>
                <li><a href="">Sub 1 Item 2</a></li>
                <li><a href="">Sub 1 Item 3</a></li>
              </ul> -->
            </li>
          </ul>
    </nav>
  </div> <!-- End div id="Nav"  -->
My CSS:
http://pastebin.com/1Bmy40jA
Pls help me.What i have to do?

Answer 1

The problem is being cause by the width setting of your <li> here (near the bottom of the flexnav css)...
/* line 224, ../sass/flexnav.scss */
.oldie .flexnav li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
  background-color: #a6a6a2;
  width: 20%;
Since it is set to 20% (1/5th of 100%), only 5 menu items will fit across in one line. You have to change that percentage value to represent the new % that each menu item would need. If you are only adding one button, the % would be 16.66% if you add two it would go to 14.28% and so on.