Getting an element to share a background with another element?

I have a document that is styled like so:

<div class = 'page'>
  <header class = 'site-header'>
  <div class = 'main-navigation-container'>
      ...
  </div>
  </header>
</div>

where the header has a nice background-image. However, as soon as the header ends we reach the navigation bar, which has a stock blue option. I want to have the header background "spill over" into the .main-navigation-container, so that it appears as if the .main-navigation-container is contained within the header.

Here's the idea:

Before

As you can see in the before, the navigation container (menu) does not share the background with the header. However, after the change it should look like this:

After

Notice that the menu is now changed to be located within the header. The issue lies in the fact that I am using Wordpress for the backend, so I had to add javscript to the body as opposed to redefining the html elements manually:

<script>
  var nav = document.getElementsByClassName("main-navigation-container")[0];
  document.getElementsByClassName("site-header")[0].appendChild(nav);
</script>

This approach worked when I used a test document on my local machine, but it does not work in Wordpress. Does anyone have any suggestions as to how I could solve my problem with either the approach I'm currently using, or an entirely different one?

Thanks.

EDIT: SOLVED: It was an issue with the flow of the document. When you add custom javascript in wordpress they give you two options for script location: Body and Footer. I assumed I needed to put the script in the body, but when I tried moving the script to the footer it worked.