Change navigation to below header based on viewport

It might be possible, depending on where the navigation is by default. Any chance you can link us to your site?

Running site on localhost. Navigation menu is currently set to the following through the customizing interface:

Navigation Width: Full
Navigation Inner Width: Full
Navigation Alignment: Left
Navigation Location: Float Right

You could try this:

@media (max-width: 1100px) {
    .nav-float-right .inside-header .main-navigation {
        float: none;
        clear: both;
    }
}

Let me know :)

I ended up just doing this:

@media only screen and (max-width:1100px) and (min-width:769px)
{
	.main-navigation{
		position:absolute;
		top: 150px; //meh works
	}
}

Your solution looks nicer will try that when I get a chance

Awesome :)