To move the location of the menu you’d need to edit a copy of header.php in your child theme folder.
This is the part of the code that covers the navigation:
<nav role="navigation" class="site-navigation main-navigation">
<h1 class="assistive-text"><?php _e( 'Menu', 'sundance' ); ?></h1>
<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'sundance' ); ?>"><?php _e( 'Skip to content', 'sundance' ); ?></a></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
You could try moving that higher up in the code, perhaps just after this line:
<?php do_action( 'before' ); ?>
If you’re displaying your title and tagline in your theme you’ll need to make a few adjustments to your CSS if it overlaps with your menu in this new location.
To put a background on your menu you can target the class menu in the CSS of your child theme and add a background image, or some CSS transparency to it.
Since the menu is constrained to the width of the main content area, you won’t get it stretching the entire width of the browser window without a few major structural changes to the HTML.
Learning how to target your site’s CSS will help you make certain design changes. Here are some very helpful posts that will help you customize your site with CSS:
https://dailypost.wordpress.com/2013/07/25/css-selectors/
https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
Though they’re written for WordPress.com users, much of the tools and tips apply to self-hosted sites as well. I highly recommend experimenting with a browser inspector in your preferred browser: Chrome and Firefox with Firebug are both good options.
With some experimentation you can see how well you can get the menu looking as you’d like.
Let me know how it goes! If you get the site up on a test or live server feel free to let me know the link – it’s much easier to help directly that way. Good luck!
