How do I keep my navigation attached to this fluid image?

Question

I created a break point for my background-image using media queries that starts below 989px (the largest image size). I am not using to display the image because I want to use different images for different devices (So that a mobile device doesn't download the largest image of course). (Each image is defined in a specific break-point). Just to say it early, this is live at http://www.glorkianwarrior.com

The css for this goes like so:

.splash {
  max-width: 988px;
  margin:auto;
  height:380px;
}

@media (min-width: 989px) {
   .splash {
       background: url('../images/academy.png') no-repeat;
   }
}

@media (max-width: 989px) and (min-width: 321px) {
   .splash {
       background: url('../images/academy-mid.png') no-repeat;
       max-width: 640px;
       padding: 4px;
       position: relative;
       background-size: 100%;
   }
}

That makes it so once the page reaches 988 px or below (down to 321px), the splash image becomes fluid. It actually doesn't change it's width/height until the browser is less than 640px wide. What happens in the navigation bar below it which is nested under .splash won't change its location. This is because its connected to the height of the .splash. The html looks like so:

<header class="splashhead">
  <div class="splash">
    <nav class="kochalka">
      <ul>
         <li class="navclass first active"><a href="http://glorkianwarrior.com/" title="Home" >Home</a></li>
         <li class="navclass"><a href="news/" title="News" >News</a></li>
         <li class="navclass"><a href="gallery.html" title="Gallery" >Gallery</a></li>
         <li class="navclass last"><a href="guide.html" title="Guide" >Guide</a></li>
      </ul>
    </nav>
  </div>
</header>

If I don't give it that height, it will disappear. I have tried giving it 100% or a percentage of the page itself. I tried giving its parent a specific height and then doing 100% on .splash, but that didn't change the placement of the navigation bar.

Is it possible to have this navigation change its size based on browser size? Will I have to figure out a way to use images on the page each image within their own div and use media queries to display:none on non-relevant divs?

Answer 1

You need to wrap your nav within a div and then give it an aspect ration using some clever CSS. See Below -

Here is your code: I have added a wrapper div around the navas you can see

<header class="splashhead">
    <div class="splash">
    <div class="wrapper">
      <nav class="kochalka" style="">
        <ul>
            <li class="navclass first active"><a href="http://glorkianwarrior.com/" title="Home">Home</a></li>
            <li class="navclass"><a href="news/" title="News">News</a></li>
            <li class="navclass"><a href="gallery.html" title="Gallery">Gallery</a></li>
            <li class="navclass last"><a href="guide.html" title="Guide">Guide</a></li>
        </ul>
      </nav>
</div>

  </div></header>

Add the following style also and then it will work as you wish

<style>
.wrapper {
 width: 100%;
 display: inline-block;
 position: relative;

}
.wrapper:after {
    padding-top: 56.25%; /*16:9 ratio*/
    display: block;
    content: '';
}
</style>