Menu not displaying in mobile and hero image is not displaying correctly

HTML & CSS
1

Hi everyone,

I have a website. www.gdhinspect.com where everything displays all great as it’s supposed to, with the exception of 2 items both on a iPhone. 1. The mobile menu built with slick nav is not even showing, 2 the hero image is buried up in behind the header. I’ve tried setting a z-index and top padding to no avail. Help would be appreciated.

Best

2

Try removing the HTML page errors and the browser will have no need to guess your desired result.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.gdhinspect.com%2F

3

Wordpress is writing that automatically in the enque scripts here is the html

<link rel='stylesheet' id='load-fa-css'  href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css?ver=4.9.3' type='text/css' media='all' />
<link rel='stylesheet' id='greater-durham-home-inspections-bootstrap-css'  href='http://www.gdhinspect.com/wp-content/themes/greater-durham-home-inspections/css/bootstrap.min.css?ver=4.9.3' type='text/css' media='all' />
<link rel='stylesheet' id='greater-durham-home-inspections-style-css'  href='http://www.gdhinspect.com/wp-content/themes/greater-durham-home-inspections/style.css?ver=4.9.3' type='text/css' media='all' />
<script type='text/javascript' src='http://www.gdhinspect.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://www.gdhinspect.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://www.gdhinspect.com/wp-content/themes/greater-durham-home-inspections/js/bootstrap.js?ver=4.9.3'></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.slicknav/1.0.5/jquery.slicknav.min.js?ver=1.0.5'></script>
<script type='text/javascript' src='http://www.gdhinspect.com/wp-content/themes/greater-durham-home-inspections/js/extrastuff.js?ver=4.9.3'></script>

Here is the section of the enque calls in my functions file.

function greater_durham_home_inspections_scripts() {
	// load jquery if it isn't
	wp_enqueue_script( 'jquery' );
	wp_enqueue_style( 'greater-durham-home-inspections-bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', false );
	
	wp_enqueue_style( 'greater-durham-home-inspections-style', get_stylesheet_uri() );
	
	wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.js', true );
	wp_enqueue_script( 'slicknav', '//cdn.jsdelivr.net/jquery.slicknav/1.0.5/jquery.slicknav.min.js', array( 'jquery' ),'1.0.5',false);
	wp_enqueue_script( 'greater-durham-home-inspections-navigation', get_template_directory_uri() . '/js/extrastuff.js', true );
	

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
4

Most of those are pretty harmless, but number 10 (Stray end tag div. From line 155, column 2; to line 155, column 7) is a real issue and must be fixed.

5

The z-index of the menu button needs to be higher than the z-index of the fixed positioned menu which has a 999 z-index.

At width of 766px and smaller you add a fixed positioned menu which means that the content of the page slides under the menu to the top of the viewport because fixed positioned elements are removed from the flow. This is the problem with fixed positioned elements.

A quick fix is to add some padding to the top of the body when the fixed nav is visible to offset the height of the fixed nav.

Here are both fixes.

.slicknav_btn{z-index:1000;}

@media screen and (max-width:766px){
    body{padding-top:73px;}
}

I’ve called it a quick fix because its a magic number fix that relies on the header being a set height which may not be true if users zoom text or you add more content later. However as you only have 2 items in the header it may be good enough.

6

Seems to be getting much closer. It will display in iPhone when turned sideways just not vertical. the menu still does not appear. The hero image is all good to go now. Thanks for that fix

7

At 480px max-width you once again increase the z-index of the header to 9999. That means the menu now has to be 10000 to trump it.

e.g.

.slicknav_btn{z-index:10000;}

8

And that will do it! I dropped it down to 999 on the header. I knew it was something silly. Thanks so much for the help!

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.