Hello Andrea,
We are two years later, but since your website is still active, the following might be useful to you:
1) You already solved partly your problem regarding your header (from the "width" point of view, but not entirely from the "height" one).
For you header div, you could use "background-size: cover;" instead of "background-size: 100%", because at the mobile width, your #dbe3f0 substitute background color for this div starts to appear as a grey horizontal strip below your background-image, which is not very beautiful.
2) Also, still at the mobile resolution, you should initally hide your navigation menu until a button is clicked, and not reveal it right away. As you still use Bootstrap in its version 3.3, this framework provides a quick and easy fix to this problem. Check out this page : http://getbootstrap.com/docs/3.3/javascript/#collapse
But for this to work, you first need to include in your Wordpress theme both the jQuery library (which you already do) and the Bootstrap JAVASCRIPT library too, just below it, in the head section of your HTML code. Because currently, you only use the Bootstrap CSS responsive grid, but not its JavaScript capabilities. Don't worry if you didn't learn JavaScript, you wouldn't have to write a single line of JavaScript to take advantage of this feature.
Then, basically, you add the following button with the following attributes:
<button type="button" class="navbar-toogle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
And you add a "navbar-collapse" class to you nav div (this name must match the name of the data-target attribute of the previously inserted button):
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Our services</li>
<li>About us</li>
<li>Photos</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</nav>