Is the space needed for the site title, logo, & menu small enough so that they can all fit side-by-side on the same line at narrower widths? Is there a certain width that you want to see the menu collapse under the logo, or do you always want to see the menu to the right until the mobile menu appears?
You can try doing this. If you picked the default CSS grid (Responsive 960px with 0 Margin), then the width of the logo area (a
col5 container) should be 400px, and the width of the navigation menu (a
col7 container) should be 560px. When you convert to percentages, you get the logo area being about 42% and the navigation menu about 58%. So try adding these CSS rules to the end of your various.css file:
Code:
#banner #logo-area {
width: 42%;
margin-left: 0;
float: left;
}
#banner #menu1-wrapper {
width: 58%;
display: inline-block;
float: right;
position: absolute;
}
@media only screen and (max-width: 767px)
{
#banner #menu1-wrapper {
position: relative;
}
}
So this should override the media queries which set the width of the logo area & navigation menu to 100% when the width goes under 960px. You'll probably need to add some additional CSS to get the styling just right, but this should at least fix the menu to the right.