My website is www.rosstheexplorer.com.
I love the look of my site when the browser is 1302px wide or being viewed on a mobile device.
Although between 600px - 1302px the menu overlaps the header which is really frustrating.
This is my header.php
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Penscratch
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( 'A|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<div >
<div class="header">
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
</div>
</div>
<div >
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'penscratch' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
</div>
<div >
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
</header><!-- #masthead -->
<div id="content" class="site-content">
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
</a>
<?php endif; // End header image check. ?>
</div>
This is my additional CSS
@media screen and (min-width: 661px) {
.mobile-header-img {
display: none;
}
}
@media screen and (max-width: 660px) {
.header-img {
display: none;
}
}
*.header img {
max-width: none;
width: 100%;
}
@media screen and (min-width: 75em)
{
.site {
max-width: 1153px;
margin: -50px auto;
padding: 54px 108px;
}
}
@media screen and (min-width: 800px) {
.menu li li a {
font-size: 0.8em;
border: 1px rgb(56, 57, 59)
}
}
@media screen and (max-width: 799px) {
.menu li a {
font-size: 1.2em;
color: black;
border: 3px rgb(56, 57, 59);
}
}
@media screen and (max-width: 799px) {
.menu ul li {
border-bottom: 1px solid lightgrey;
}
}
@media screen and (max-width: 799px) {
.main-navigation li:hover > a
{color: grey}
}
@media screen and (max-width: 799px) {
.menu li li a {
font-size: 0.8em;
border: 3px rgb(56, 57, 59);
color: grey;
}
}
.main-navigation {
margin-top: 437px;
}
@media screen and (min-width: 800px) {
.main-navigation {
padding-top: 0px;
background-color: rgb(56, 57, 59) ;
font-size: 1.5125em;
}
}
@media screen and (min-width: 800px) {
.main-navigation ul ul
{
font-size: 0.8em;
background-color: rgb(56, 57, 59) ;
border: 1px rgb(56, 57, 59) ;
}
}
@media screen and (max-width: 799px) {
.main-navigation {
margin-bottom: -20px;
}
}
.site-header {
border-bottom: 0px solid #eee;
}
What I Have Tried
Does someone have a simpler solution?
There are three issues:
Your class body.custom-background tag has the background-image
property and there is an image loaded from there that sits behind the header images you want to use. In essence, you're loading two images where you should be loading one. to fix that we
need to reset it using
body.custom-background {
background-image: none;
}
I quote RoToRa's answer here as it is more elequant that I can ever hope to be.
Images in HTML are inline elements and are by default placed on the font base line, so what you are seeing is probably the space for the descenders. The usual way around this is either setting them to
display: blockorvertical-align: bottom.
To fix that we need to use the @media rule with your specific cutoff point since applying the display property to the image by itself will lead to both images being loaded at the same time. So we use the following to address that:
@media screen and (min-width: 661px) {
img.header-img {
display: block;
}
}
Your nav-menu has a white border on top and it doesn't have its margins reset. To fix that we reset both by using the following:
@media screen and (min-width: 800px) {
.main-navigation {
margin: 0 auto;
border-top: none;
}
}
Now we try put it all together at the bottom of your CSS sheet and see what happens
body.custom-background {
background-image: none;
}
@media screen and (min-width: 800px)
{
.main-navigation {
margin: 0 auto;
border-top: none;
}
}
@media screen and (min-width: 661px) {
img.header-img {
display: block;
}
}</div>