iPad Menu – Not Displaying

Sounds like you’re modifying the theme’s stylesheet? You don’t want to do that, your change will be erased when the theme updates.

If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://ww.wp.xz.cn/plugins/custom-css-manager-plugin

Then use its “CSS Code” section of the dashboard to hold your CSS modifications:

Alternatively use your Child Theme style.css file to hold your CSS modifications:

@media screen and (min-width: 480px) and (max-width: 768px) {

    .themonic-nav ul.nav-menu,
    .themonic-nav div.nav-menu > ul,
    .themonic-nav li a,
    .themonic-nav li {
         display: inline-block !important;
    }

    .themonic-nav ul.nav-menu,
	.themonic-nav div.nav-menu > ul {
	background:none repeat scroll 0 0 #F3F3F3;
		border-bottom: 5px solid #16A1E7;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}

    .themonic-nav ul {
		margin: 0;
		text-indent: 0;
	}
	.themonic-nav li a,
	.themonic-nav li {
		display: inline-block;
		text-decoration: none;
	}
	.themonic-nav li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		padding: 0 20px;
		text-transform: uppercase;
		white-space: nowrap;
		transition: .3s ease 0s;
	}
	.themonic-nav li a:hover {
		color: #fff;
	}
	.themonic-nav li {
		position: relative;
	}

	.themonic-nav li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.themonic-nav li ul ul {
		top: 0;
		left: 100%;
	}
	.themonic-nav ul li:hover > ul {
		border-left: 0;
		display: block;
	}
	.themonic-nav li ul li a {
		background: #EFEFEF;
		border-bottom: 1px solid #F9F9F9;
		display: block;
		font-size: 11px;
		line-height: 2.181818182;
		padding: 8px 10px;
		width: 160px;
		white-space: normal;
	}

	.themonic-nav li ul li a:hover {
		background: #e9e9e9;
		color: #444;
	}

	.themonic-nav .current-menu-item > a,
	.themonic-nav .current-menu-ancestor > a,
	.themonic-nav .current_page_item > a,
	.themonic-nav .current_page_ancestor > a {
		    background: none repeat scroll 0 0 #16A1E7;
			color: #FFFFFF;
			font-weight: bold;
	}

        .js .selectnav {
            display: none;
        }

}

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Yes drop it in Jetpack’s custom css option http://jetpack.me/support/custom-css/