Mobile Menu Blocking Content

[Martin]

You helped me edit the CSS of my site to adjust the mobile header, but I realized the menu bar at the top is covering up the content on mobile so you can never see the top of the page.

Is there a way to tell all pages to have some padding at the top when the site is in mobile orientation?

Here’s the site: https://www.iwantoverflow.com/blog/

PS: Let me know if any change has been made in new updates such that the top bar with menu and logo can be the same from initial load to the sticky menu when scrolling. (Right now there is no logo when the page first loads, then the logo shows up when scrolling.)

Thanks!

GeneratePress 1.3.44

GP Premium 1.2.94

[Leo]

Hi Martin,

Try this CSS to see if it fixes the content overlap problem:

@media (max-width: 768px) {
    a.screen-reader-text.skip-link {
        position: relative !important;
    }
}

Make sure you add CSS using this method here: https://docs.generatepress.com/article/adding-css/#simple-css

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Martin]

That didn’t change anything.

Here’s the custom CSS that’s already there, just in case this helps:

.column-container {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	padding-bottom: 0;
}

.inner-container {
	width: 55%;
	margin: auto;
	text-align: center;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 91%;
}

.gform_wrapper .ginput_complex .ginput_right {
	float: none !important;
	width: 100% !important;
}

.gform_wrapper .ginput_complex .ginput_left {
	float: none !important;
	width: 100% !important;
}

boxhighlight {
	background: rgba(0,0,0,0.5);
	padding: 5px 10px;
}

.main-navigation .site-logo {
	float: left;
	line-height: 77px;
/* Adjust this to your menu item height */
	margin-right: 1.5em;
}

h4 {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: .67em;
}

.hero {
	position: relative;
	background-color: #607D8B;
	height: 0 !important;
	width: 100% !important;
}

.hero:after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 0;
	height: 0;
	border-top: solid 35px #607D8B;
	border-left: solid 35px transparent;
	border-right: solid 35px transparent;
}

li {
	margin-bottom: 10pt;
}

.tinytext {
	font-size: smaller;
	color: #CFD8DC;
}

@media (max-width: 768px) {
	.site-header {
		display: none;
	}
	
	.navigation-clone {
		-webkit-transform: translateY(0) !important;
		-ms-transform: translateY(0) !important;
		transform: translateY(0) !important;
		z-index: 500 !important;
	}
	
	body {
		padding-top: 0;
	/* change to height of menu */
	}
}

div #my-text {
	max-width: 960px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	text-shadow: 1px 1px #607d8b;
}

/* Accordion Styles */
.accordion {
	border-bottom: 1px solid #dbdbdb;
	margin-bottom: 20px;
}

.accordion-title {
	border-top: 1px solid #dbdbdb;
	margin: 0;
	padding: 20px 0;
	cursor: pointer;
}

.accordion-title:hover {
}

.accordion-title:first-child {
	border: none;
}

.accordion-title.open {
	cursor: default;
}

.accordion-content {
	padding-bottom: 20px;
}

[Tom]

Have you tried using the mobile header option?: https://docs.generatepress.com/article/mobile-header/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Martin]

Thanks that works! The only remaining issue is that the menu and logo aren’t lined up? in mobile view. It’s like the logo has too much top padding, but I’m not sure where to adjust that. Any idea what I can do?

PS: Congrats on the little one by the way! (I’m assuming that’s your child in the photo.)

[Leo]

Try this CSS:

@media (max-width: 768px) {
    .mobile-header-navigation .mobile-header-logo {
        padding-top: 0;
    }
    .mobile-header-logo .mobile-header-navigation .menu-toggle,
    .mobile-header-logo .mobile-header-navigation .mobile-bar-items {
        padding-top: 10px;
    }
}

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Martin]

That was it. Thanks!

[Leo]

Glad we could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts