[Resolved] Mobile Menu Blocking Content

Home Forums Support Mobile Menu Blocking Content

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #284324
    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
    #284344
    Leo
    Staff
    Customer Support

    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.

    #284388
    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;
    }
    #284392
    Tom
    Lead Developer
    Lead Developer
    #285402
    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.)

    #285405
    Leo
    Staff
    Customer Support

    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.

    #285414
    Martin

    That was it. Thanks!

    #285415
    Leo
    Staff
    Customer Support

    Glad we could help 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.