Mobile Menu break point

I was looking at my site on multiple devices and noticed that the menu drops below the logo on an Ipad landscape view.

How to I change the menu to mobile (hamburger menu) for this screen size?

I was playing with the padding of menu items and logo size per other posts but i couldn’t get it working.

Here’s the URL: http://www.amplifiedresults.com

Here’s the css I tried:

@media only screen and (max-width: 1280px) and (min-width: 480px){
#menu > ul > li > a {
padding-left: 7px;
padding-right: 7px;
}
}

@media only screen and (max-width: 1280px) and (min-width: 480px){
.logo_img {
width: 200px!important;
}
}

The problem still existed using that css.