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.

Please tell me what your Ipad resolution is, I am testing with Chrome’s Ipad settings under dev tools and it seems to work fine for both regular Ipad and Ipad Pro.

I have a similar question to the discussion above. I’d like to change the width of when my mobile menu is displayed. Where do I do that, and what do I need to change?

Thank you!

	#menu 			{ display: none; }
	#mobile_menu #menu 	{ display: block; }
	#mobile_menu_toggler{ display: block; }	

As you can see in the media queries they are currently activated below
(max-width: 1017px)

If you want add them to the higher screen resolution as well:
@media only screen and (min-width: 1018px) and (max-width: 1280px) {

and experiment further.

I appreciate the clarification.

I’m still struggling with min and max widths based on my grid-responsive.css file. I don’t understand what numbers I need to change to make sure my mobile menu looks good at multiple widths. Please assist!

Can you first explain what exactly you are trying to achieve?