Mobile Menu Container is not shown on iPad

  • Resolved huubkoch

    (@huubkoch1956)


    6 years, 11 months ago

    I am working on a WordPress Website with the Radcliffe theme.

    The navigation is transformed to a Mobile Menu Container on iPhone.
    But when on iPad the Mobile Menu Container is not shown when holding the device in horizontal position, then the navigation is crawling over the logo…
    When in vertical position the Mobile Menu Container shows up.

    How could I solve this problem best?

    • This topic was modified 6 years, 11 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter huubkoch

    (@huubkoch1956)

    To Extend my question…

    could it be that this is a problem caused by Safari on iPad?

    Anyway… also Chrome has the same problem on iPad…

    • This reply was modified 6 years, 11 months ago by huubkoch.
    • This reply was modified 6 years, 11 months ago by huubkoch.
    Thread Starter huubkoch

    (@huubkoch1956)

    Just got some help from a developer friend.

    The problem was in the style.css

    Media Queries have to be set to:

    /* -------------------------------------------------------------------------------- */
/*	13. Media Queries
/* -------------------------------------------------------------------------------- */

@media (min-height: 1100px) {
	
	.featured-media { max-height: none; }
		
}

@media (max-width: 1250px)	{

	/* nav-toggle */
	
	
	.nav-toggle { 
		display: block;
		padding: 12px 12px 10px; 
		border-radius: 3px;
		position: absolute;
		top: 50%;
		margin-top: -16px;
		right: 0;
	}
	
	.nav-toggle .bars {
		height: 10px;
		width: 15px;
		float: right;
		position: relative;
		margin-top: -1px;
	}
	
	.nav-toggle .bar {
		width: 15px;
		height: 2px;
		background: #767676;
		border-radius: 2px;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.nav-toggle .bar:nth-child(2) { top: 4px; }
	.nav-toggle .bar:nth-child(3) { top: 8px; }
	
	.nav-toggle p {
		font-size: 14px;
		line-height: 10px;
		font-weight: 700;
		text-transform: uppercase;
		text-align: right;
		color: #767676;
		float: left;
		margin-right: 8px;
		position: relative;
		top: -1px;
	}
	
	.nav-toggle .close { display: none; }
	
	.nav-toggle:hover { cursor: pointer; }
	
	.nav-toggle.active { background: #019EBD; } 
	.nav-toggle.active p { color: #fff; } 
	
	.nav-toggle.active .bar { background: #fff; }
	
	.nav-toggle.active .bar:nth-child(1),
	.nav-toggle.active .bar:nth-child(3) { top: 4px; }
	
	.nav-toggle.active .bar:nth-child(2) { opacity: 0; }
	
	.nav-toggle.active .bar:nth-child(1) {
		-webkit-transform: rotate(45deg); 
		-moz-transform: rotate(45deg);  
		-ms-transform: rotate(45deg); 
		-o-transform: rotate(45deg); 
		transform: rotate(45deg); 
	}
	
	.nav-toggle.active .bar:nth-child(3) { 
		-webkit-transform: rotate(-45deg); 
		-moz-transform: rotate(-45deg);  
		-ms-transform: rotate(-45deg); 
		-o-transform: rotate(-45deg); 
		transform: rotate(-45deg); 
	}

	/* mobile menu */
	
	
	.main-menu { display: none; }
	
	.mobile-menu { background: #EEE; }
	
	.mobile-menu a {
		display: block;
		padding: 25px 8%;
		font-weight: 600;
		color: #666;
	}
	
	.mobile-menu a:hover { 
		background: #CA2017; 
		color: #fff;
	}
	
	.mobile-menu ul a { padding-left: 12%; }
	.mobile-menu ul ul a { padding-left: 16%; }
	.mobile-menu ul ul ul a { padding-left: 20%; }
	.mobile-menu ul ul ul ul a { padding-left: 24%; }
	.mobile-menu ul ul ul ul ul a { padding-left: 28%; }
	
	/* mobile search form */
	
	.mobile-search-form {
		background: #eee;
		border-top: 1px solid #ddd;
		position: relative;
	}
	
	.mobile-search-form #s {
		display: block;
		width: 100%;
		max-width: 84%;
		margin: 0 auto;
		background: none;
		border: none;
		padding: 25px 60px 25px 0;
		font-family: 'Open Sans', sans-serif;
		font-size: 1em;
		font-weight: 400;
		color: #666;
	}
	
	.mobile-search-form #s:focus { outline: none; }
	
	.mobile-search-form .search-button {
		width: 40px;
		height: 40px;
		background: url(images/icons/1x/spyglass-d.png) no-repeat center;
		background-size: 20px auto;
		position: absolute;
		right: 8%;
		top: 50%;
		margin-top: -20px;
		-webkit-appearance: none;
		padding: 0;
		border: none;
		text-indent: -9999px;
		opacity: 0.5;
	}	
	
	.mobile-search-form .search-button:hover {
		cursor: pointer;
		opacity: 1;
	}

}
@media (max-width: 1200px) {
	
	body { font-size: 18px; }
		
}

@media (max-width: 1020px) {
	
	
	.post-content .alignnone {
		max-width: 100%;
		margin: 0 auto;
	}
	
	.post-content a.alignnone { width: auto; }
	
	.post-content .alignright,
	.post-content .alignleft { max-width: 45%; }
	
	.post-content .alignright { margin-right: 0; }
	.post-content .alignleft { margin-left: 0; }
	
	.post-content .wp-caption { margin-bottom: 1em; }
	
	
}

@media (max-width: 1000px) {
	
	/* header */
	
	.header { padding: 30px 0; }
	
	.blog-title { 
		font-size: 32px;
		margin-top: 5px;
		margin-right: 105px;
	}
	
	.blog-logo {
		display: block; 
		position: static;
		left: inherit;
		top: inherit;
		float: left;
		margin-top: 0;
	}
	
	.blog-logo img {
		height: 60px;
		width: auto;
	}

	
	
}

@media (max-width: 900px) {
		
	/* main content */
	
	.post-header { padding: 75px 0; }
	
	.posts .post-header { padding: 50px 0; }
	
	.post-meta-top { margin-bottom: 20px; }
	
	.post-title { font-size: 2.5em; }
	
	/* paginations */
	
	.archive-nav a { 
		padding: 50px;
		font-size: 1.1em;
	}
	
	/* footer */
	
	.footer .column-3 { display: none; }
	
	.footer .one-third { width: 47.5%; margin-left: 5%; }
	
	.footer .one-third:first-child { margin-left: 0; }
	
	
}

@media (max-width: 600px) {

	body { font-size: 16px; }
	
	/* structure */
	
	.section { padding: 50px 0; }
	.medium-padding { padding: 40px 0; }
	.light-padding { padding: 25px 0; }
	.small-padding { padding: 20px 0; }
	
	.section-inner { max-width: 88%; }

	/* header */
	
	.header { padding: 25px 0; }
	
	.blog-title { font-size: 24px; letter-spacing: 0; }
	
	.blog-logo img { height: 40px; }
	
	/* navigation */
	
	.nav-toggle span { color: #666; }
	
	.mobile-menu a { padding: 20px 0 20px 6%; }
	
	.mobile-menu ul a { padding-left: 11%; }
	.mobile-menu ul ul a { padding-left: 16%; }
	.mobile-menu ul ul ul a { padding-left: 21%; }
	.mobile-menu ul ul ul ul a { padding-left: 26%; }
	.mobile-menu ul ul ul ul ul a { padding-left: 31%; }
	
	.mobile-search-form #s { 
		padding: 20px 60px 20px 0; 
		max-width: 88%;
	}
	
	/* main content */
	
	.post-header { padding: 40px 0; }
	.posts .post-header { padding: 30px 0; }
	
	.post-meta-top { 
		margin-bottom: 12px;
		font-size: 0.85em;
		letter-spacing: 0;
	}
	
	.post-meta-top .sep { margin: 0 4px; }
	
	.post-title { font-size: 2.25em; }
	
	a.post-header .post-title { text-shadow: 1px 1px 0 rgba(0,0,0,0.1); }
	
	/* single post */
	
	.single .post,
	.error404 .post,
	.page .single.post { padding-bottom: 50px; }
	
	.post-meta { margin-top: 50px; }
		
	.post-meta .meta-block {
		width: 100%;
		float: none;
		margin: 0;
	}
	
	.post-meta .meta-block + .meta-block { margin-top: 40px; }
	
	.post-author .avatar { max-width: 80px; }
	.post-author-container { min-height: 80px; }
	.post-author-inner { margin-left: 100px; }
	
	/* post-content */
	
	.post-content p,
	.post-content blockquote,
	.post-content ul,
	.post-content ol,
	.post-content li,
	.post-content address,
	.post-content dl,
	.post-content .wp-caption,
	.post-content pre {
		line-height: 150%;
	}
	
	.post-content li { margin-bottom: 0.5em; }
	
	.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
		margin: 35px 0 18px;
	}
	
	.post-content h1 { font-size: 1.5em; }
	.post-content h2 { font-size: 1.35em; }
	.post-content h3 { font-size: 1.2em; }
	.post-content h4 { font-size: 1.1em; }
	.post-content h5 { font-size: 0.9em; }
	.post-content h6 { font-size: 0.75em; margin-bottom: 10px; }
	
	.post-content h1+h1, .post-content h1+h2, .post-content h1+h3, .post-content h1+h4, .post-content h1+h5, .post-content h1+h6,
	.post-content h2+h1, .post-content h2+h2, .post-content h2+h3, .post-content h2+h4, .post-content h2+h5, .post-content h2+h6,
	.post-content h3+h1, .post-content h3+h2, .post-content h3+h3, .post-content h3+h4, .post-content h3+h5, .post-content h3+h6,
	.post-content h4+h1, .post-content h4+h2, .post-content h4+h3, .post-content h4+h4, .post-content h4+h5, .post-content h4+h6,
	.post-content h5+h1, .post-content h5+h2, .post-content h5+h3, .post-content h5+h4, .post-content h5+h5, .post-content h5+h6,
	.post-content h6+h1, .post-content h6+h2, .post-content h6+h3, .post-content h6+h4, .post-content h6+h5, .post-content h6+h6 {
		margin-top: 20px;
	}
	
	.post-content blockquote:before,
	.post-content blockquote:after { margin: 25px auto; }
	
	.post-content blockquote p { font-size: 1em; }
	
	.post-content blockquote cite { margin-top: 20px; }
	
	.post-content .alignleft,
	.post-content .alignright {
		display: block;
		max-width: none;
		float: none;
		margin-right: auto;
		margin-left: auto;
	}
	
	.post-content .alignleft a,
	.post-content .alignleft img,
	.post-content .alignright a,
	.post-content .alignright img {
		display: block;
		margin: 0 auto;
	}
		
	/* comments */
	
	.comments-title-container { 
		padding-bottom: 15px;
		margin-bottom: 30px; 
	}
	
	.comments-nav-below {
		padding-top: 15px;
		margin-top: 40px;
	}
	
	.add-comment-title { margin-top: 9px; }
	
	.comment-header span {
		display: block;
		margin: 7px 0 0 0;
	}
	
	li.comment { margin-top: 30px; }
	
	.comment .avatar { max-width: 60px; }
	
	.bypostauthor .by-post-author { top: -6px; left: -6px; }
	
	.comment-inner { 
		padding: 25px; 
		margin-left: 80px;
	}
	
	.comment-inner:after { top: 18px; }
	
	.comment-actions { font-size: 0.9em; }
	
	/* respond */
	
	.comments .comment-respond { margin-top: 30px; }
	.comments .comment-respond .logged-in-as { margin-bottom: 30px; }
	
	.comment-reply-title #cancel-comment-reply-link { font-size: 0.8rem; }
	
	.comment-respond .comment-reply-title { margin-bottom: 15px; }
	
	.comment-respond .logged-in-as,
	.comment-respond .comment-notes { 
		margin-bottom: 30px; 
		font-size: 0.9em; 
	}
	
	.comment-respond .third {
		width: 100%;
		margin: 0 0 12px 0;
		float: none;
	}
	
	.comment-respond input,
	.comment-respond textarea { 
		font-size: 1em; 
		padding: 12px 16px; 
	}
	
	.comment-respond .thirds { margin: 0; }
    
    .comment-form-comment + .thirds { margin-top: 12px; }
	
	.comment-respond textarea { height: 200px; }
	
	.comment-respond .form-allowed-tags { 
		margin-top: 15px; 
		font-size: 0.75em;
	}
	
	.comment-respond .form-submit { margin-top: 15px; }
	
	/* pagination */
	
	.archive-nav a { 
		padding: 30px 0; 
		font-size: 0.8em;
		font-weight: 700;
	}
	
	/* page & page templates */
	
	.archive-container { margin-top: 40px; }
	
	.archive-container a { padding: 14px 7px; }
	
	.archive-container a span {
		font-family: 'Open Sans', sans-serif;
		font-size: inherit;
		line-height: inherit;
		font-weight: 400;
		font-style: italic;
		text-transform: none;
		letter-spacing: 0;
		position: static;
		top: auto;
		right: auto;
		margin-top: 0;
	}
	
	.archive-container a span:before { content: " — "; }
	
	/* footer */
	
	.footer .one-third,
	.widget {
		display: block;
		width: 100%;
		float: none;
		margin: 40px 0 0 0;
	}
	
	.footer .one-third:first-child { margin-top: 0; }
	
	.widget-content li { padding-left: 18px; }
	
	/* credits */
	
	.credits { font-size: 1em; }
	
	.credits span { display: none; }

}

@media (max-width: 500px) {
	
	body { font-size: 15px; }
		
	/* main content */
	
	.post-meta-top { font-size: 0.8em; }
	
	.post-title { font-size: 2em; }
	
	.cat-tags div {
		width: 100%;
		margin: 0;
		margin-top: 30px;
		font-size: 1em;
	}
	
	.cat-tags div strong { margin-bottom: 5px; }
	
	.cat-tags div:first-child { margin-top: 0; }
	
	/* comments */
	
	.comment .avatar { display: none; }
	
	.comment-inner { margin-left: 0; }
	
	.comment-inner:after { content: none; }
	
	/* pagination */
	
	.archive-nav a { padding: 25px 0; }
	
}

@media (max-width: 350px) {

	/* header */
	
	.blog-logo img {
		height: 40px;
		width: auto;
	}
	
	/* single post */
	
	.post-author .avatar { max-width: 60px; }
	.post-author-inner { margin-left: 80px; }
	
	
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

	/* 2X images */

	.search-toggle-menu-item a.search-toggle,
	.search-toggle-menu-item a.search-toggle:hover,
	.search-form .search-button,
	.mobile-search-form .search-button { background-image: url(images/icons/2x/spyglass-d.png); }
	
	p.post-categories { background-image: url(images/icons/2x/folder-g.png); }
	p.post-tags { background-image: url(images/icons/2x/tag-g.png); }
	p.post-nav-prev { background-image: url(images/icons/2x/prev-g.png); }
	p.post-nav-next { background-image: url(images/icons/2x/next-g.png); }
	
	.author-links a.author-link-posts { background-image: url(images/icons/2x/archive-w.png); }
	.author-links a.author-link-website { background-image: url(images/icons/2x/home-w.png); }
	
	.bypostauthor .by-post-author { background-image: url(images/icons/2x/author-w.png); }
	
	
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Mobile Menu Container is not shown on iPad’ is closed to new replies.