How to Move Menu Below Header Image

Answering the specific question about moving the 2016 menu below the header image…

You can copy and paste the nav menu code block, to just after the header image code block. Basic instructions below.

If your child theme does not contain a header.php file, then copy the header.php file from the original twentysixteen folder, and paste it into your child theme folder.

Before you move any code, find these locations in the unmodified header.php file.

Line 44 should be:
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>

Line 73 should be:
<?php endif; ?>

Line 95 should be:
</header><!-- .site-header -->

Now select all of the code in lines 44 through 73 and cut.

Line 66 should now be the close of the header tag, Paste the code before:
</header><!-- .site-header -->

Disclaimers etc…
Don’t forget to test the new format on different devices, just because we can move elements around the page doesn’t mean we can’t break stuff too.

If the page layout goes south on you, deleting the header.php file from the child theme folder will return you to the the default header.

I followed your instructions. But all that happened for me was that the menu moved to the left (something I have tried to do for some hours) . I do not have a Header image, but a slider function code <?php if ( function_exists( ‘easingslider’ ) ) { easingslider( 45 ); } ?> inserted after line 22 so it would be line 23. What have I done wrong?

https://test.nygards.no/

This worked for me. This is the code for my header.php I have never used pastebin before so hopefully you can see this:

https://pastebin.com/CFj9upbS

I think this also needs to be added to the style.css (This is from https://wpbeaches.com/make-a-full-width-twenty-sixteen-header/ )

/* Make Twenty Sixteen full width header */

.site-inner {
	max-width: none;
}
.site-header {
  background-size: cover !important;
  min-height: 200px;
  margin-bottom: 0px;
}

.site-content,
.site-footer,
.site-header-main {
	max-width: 1320px;
	margin: 0 auto;
}

@media screen and (min-width: 44.375em) {
	.site {
	    margin: 0;
	}

	body:not(.custom-background-image):before, body:not(.custom-background-image):after {
		height: 0;
	}
}

/* END makes site header full-width */

Oh dear. The problem NOW is that the header is no longer responsive. Does anyone know how to fix that? My site is:
https://susangorris.com/

Hearing nothing, I am giving up on having a full-width, responsive header in 2016. If anyone else comes up with a solution, I would love to hear about it. I am thinking it is probably a media query fix, but I don’t know enough about media queries.

Hi Julie – I had a look at your site, the header is actually responsive, it’s just that the intention of the background image in 2016 is decorative and reduces to cover that space – so it will inevitably cut off content as it scales to cover that area – see https://themes.wpbeaches.com/twentysixteen/ and reduce the window down.

Your issue is that you have 1 image which contains both the text and image on opposite sides. My demo has it has a separate site title and description and a background image.

You can try using the contain value for the image, won’t be perfect but better than what you have…

.site-header {
    background-size: contain !important;
    min-height: 425px;
    margin-bottom: 20px;
}

@media only screen and (max-width: 600px) {
  .site-header {
    min-height: 0;
  }
}

Hi Neilgee,
Thanks so much for responding. I added the above code to the style.css and it did improve the desktop view. However, on my phone I cannot see the header at all and the mobile menu has stopped working.

So, maybe the moral of the story is that I should not try to have text in a background image in the header. I think you are suggesting that the centred image would work.

I will leave it as is until tomorrow and then I will revert to the standard 2016 header style. Unless there is another solution out there….