His menu bar is “glued” to the header no matter the size of the window…
If you compare his site to mine, you can see the difference:
The difference is that on your site, you’ve added this CSS rule to make the header image “responsive”:
#masthead.site-header {
background-size: 100%;
}
You’ll notice that the Natuur Spreekt site looks responsive only because the site uses actual text for the site title and description, the image still remains the same size when you make the browser narrow, it just gets cropped on the left and right. If you were to delete the rule that you added, and delete the rule you used to hide the site title, it would respond correctly just the same way. Of course, the site title then wouldn’t look as nice.
The problem is that the image is part of the header background instead of an element within the header itself. That is, the container can’t resize itself based on the background, it’s the background which resizes itself based on the header container.
The solution would be to take the image off of the image background and insert it as an img tag inside the header. That way, you can get the header to resize based on the image. Here are the steps:
1) Create a child theme (which you’ve already done).
2) Copy header.php from the parent folder into your child theme folder if you have not already done so.
3) Change these lines in header.php, from this:
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
To this:
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img id="header-image" src="https://www.accademiavivaldi.ch/wp-content/uploads/2013/10/header7.jpg" alt="Header image" />
</a>
What I did was to take out the lines with the h1 and h2 tags that display the site title and site description (since you aren’t using them anyway) and replaced them with an img tag that points to your header image.
4) From the admin dashboard, go to Appearance > Header and click the button that reads Remove Header Image. This takes out the background image for the header container (although I believe this would be optional, I don’t think it’s necessary).
5) Add the following CSS to the end of your child theme’s style.css file:
#header-image {
width: 100%;
}
.site-header .home-link {
max-width: none;
min-height: 0px;
padding: 0px;
}
That’s it! You can see an example on my web site.
