Menu icon Foundation
2 issues drop down menu and icon

<body>
    <div class="topcontainer">
        <nav class="top-bar" data-topbar>
          <ul class="title-area">
            <li class="name">
              
              <h1><a href="#"><img class="logo" src="img/omegalogogood.png"></a></h1>
            </li>
            <li class="toggle-topbar menu-icon">
              <a href="#">Menu</a>
            </li>
          </ul>

          <section class="top-bar-section">
         
            <ul class="right">
              <li><a href="#pricing">About us</a></li>
              <li><a href="#">Contact us</a></li>
              
                <li class="has-dropdown">
                  <a href="#">Services</a>
                  <ul class="dropdown">
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">Print Media</a></li>
                    <!-- <li class="active"><a href="#">Active link in dropdown</a></li> -->
                  </ul>
                </li>
            </ul>
          </section>
        </nav>    
            

         

So my site is www.omegadesignla.com and the problem i am having is :
1.that the drop down menu will show 3 options on a phone device when it should only show the 2. It should not list the 'services' option along with the other 2.

2. I am having a problem with the menu hamburger icon showing up on phone devices. It was working before then something changed I think it was when i added @media at the bottom of my css. And now it wont show up unless i use the overrided that is commented out. The problem with the over ride is that it shows up a little too far to the right, but it could work if there isnt another easy fix. Ill post the css below.

body{
    margin-top: 0px;


}

.omega-design{
	color: white;
	font-size: 1.5rem;
	font-family: "Fjalla One", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.la{
	/*color: #BF5FFF;*/
	color: magenta;
}
.top-bar-section ul li > a{
	font-size: 1.25rem;
}

.container1{
	position: relative;
	top:-1.875rem;
}
/*.test{
	height:230px;
}*/
header{
	margin-top: 45px;
	background-image: url('../img/Skyline.png');
}
.topcontainer{
	/*background: linear-gradient(to bottom, yellow, magenta);*/
	background-color: gold;
	height: 40rem; /*645px*/
	overflow: hidden;
}
h2{color:purple;}


div, .center-text, .panel{
	margin-bottom: 0px;
}

i {
	font-size: 80px;
	color: magenta;
}





}
.text-center h2{

}
.text-center h3{
	color: red;
	text-shadow: black 0px 0px 2px
}

.orbit-bullets{
	margin-bottom: 5px;
}
/*.orbit-container{
	height: 200px;
}*/
/*.orbit-slides-container{
	height:312px;
}*/
/*.fi-target{
	color:gold;
}*/
.image { 
   /*position: relative; 
   width: 100%; /* for IE 6 */
   /*float: left;*/
}
/*.container1{
margin-top: 300px;
}*/

/*.imgtxt { 
   position: absolute; 
   top: 100px; 
   left: 400px; 
   width: 100%; 
   color:white;
}*/

.top-bar {
overflow: visible;
height: 3.75rem;
line-height: 2.813rem;
position: relative;
background: #333333;
margin-bottom: 0; 
}

.top-bar-section{
font-size: 1.25rem;
}
/*.greyarea{
	height:300px;
	text-align: center;
	width: 100%;
	color:blue;
	background: #ececec;
	margin-top: 0px;
}*/
.logo{
	width: 20%;
}
/*.logotag{
	font-size: 1.5rem;
}*/
@media only screen and (max-device-width: 480px) {

	/*.top-bar .toggle-topbar.menu-icon a:after {
    box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
}
.top-bar .toggle-topbar.menu-icon a {
    color: #FFFFFF;
    height: 34px;
    line-height: 33px;
    padding: 0 25px 0 0;
    position: relative;
}*/
        .top-bar {
overflow: hidden;

}
.topcontainer{
	/*background: linear-gradient(to bottom, yellow, magenta);*/
	background-color: gold;
	height: 62rem; /*645px*/
}

.logo{
	width: 50%;
}
      
  header{
	margin-top: 45px;
	background-image: none;
		}

      }


            

         

menu-icon nav top-bar

<body>
    <div class="topcontainer">
        <nav class="top-bar" data-topbar>
          <ul class="title-area">
            <li class="name">
              
              <h1><a href="#"><img class="logo" src="img/omegalogogood.png"></a></h1>
            </li>
            <li class="toggle-topbar menu-icon">
              <a href="#">Menu</a>
            </li>
          </ul>

          <section class="top-bar-section">
         
            <ul class="right">
              <li><a href="#pricing">About us</a></li>
              <li><a href="#">Contact us</a></li>
              
                <li class="has-dropdown">
                  <a href="#">Services</a>
                  <ul class="dropdown">
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">Print Media</a></li>
                    <!-- <li class="active"><a href="#">Active link in dropdown</a></li> -->
                  </ul>
                </li>
            </ul>
          </section>
        </nav>    
            

         

So my site is www.omegadesignla.com and the problem i am having is :
1.that the drop down menu will show 3 options on a phone device when it should only show the 2. It should not list the 'services' option along with the other 2.

2. I am having a problem with the menu hamburger icon showing up on phone devices. It was working before then something changed I think it was when i added @media at the bottom of my css. And now it wont show up unless i use the overrided that is commented out. The problem with the over ride is that it shows up a little too far to the right, but it could work if there isnt another easy fix. Ill post the css below.

body{
    margin-top: 0px;


}

.omega-design{
	color: white;
	font-size: 1.5rem;
	font-family: "Fjalla One", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.la{
	/*color: #BF5FFF;*/
	color: magenta;
}
.top-bar-section ul li > a{
	font-size: 1.25rem;
}

.container1{
	position: relative;
	top:-1.875rem;
}
/*.test{
	height:230px;
}*/
header{
	margin-top: 45px;
	background-image: url('../img/Skyline.png');
}
.topcontainer{
	/*background: linear-gradient(to bottom, yellow, magenta);*/
	background-color: gold;
	height: 40rem; /*645px*/
	overflow: hidden;
}
h2{color:purple;}


div, .center-text, .panel{
	margin-bottom: 0px;
}

i {
	font-size: 80px;
	color: magenta;
}





}
.text-center h2{

}
.text-center h3{
	color: red;
	text-shadow: black 0px 0px 2px
}

.orbit-bullets{
	margin-bottom: 5px;
}
/*.orbit-container{
	height: 200px;
}*/
/*.orbit-slides-container{
	height:312px;
}*/
/*.fi-target{
	color:gold;
}*/
.image { 
   /*position: relative; 
   width: 100%; /* for IE 6 */
   /*float: left;*/
}
/*.container1{
margin-top: 300px;
}*/

/*.imgtxt { 
   position: absolute; 
   top: 100px; 
   left: 400px; 
   width: 100%; 
   color:white;
}*/

.top-bar {
overflow: visible;
height: 3.75rem;
line-height: 2.813rem;
position: relative;
background: #333333;
margin-bottom: 0; 
}

.top-bar-section{
font-size: 1.25rem;
}
/*.greyarea{
	height:300px;
	text-align: center;
	width: 100%;
	color:blue;
	background: #ececec;
	margin-top: 0px;
}*/
.logo{
	width: 20%;
}
/*.logotag{
	font-size: 1.5rem;
}*/
@media only screen and (max-device-width: 480px) {

	/*.top-bar .toggle-topbar.menu-icon a:after {
    box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
}
.top-bar .toggle-topbar.menu-icon a {
    color: #FFFFFF;
    height: 34px;
    line-height: 33px;
    padding: 0 25px 0 0;
    position: relative;
}*/
        .top-bar {
overflow: hidden;

}
.topcontainer{
	/*background: linear-gradient(to bottom, yellow, magenta);*/
	background-color: gold;
	height: 62rem; /*645px*/
}

.logo{
	width: 50%;
}
      
  header{
	margin-top: 45px;
	background-image: none;
		}

      }