It's a little difficult to move the header section. It and the footer are static sections. The other sections on the page are dynamic and can be rearranged in the site customization. So you probably need to change the code.
You can try this:
If you go to the header.liquid file in the sections folder, you can remove the navigation bar by deleting this code (should be around line 105):
{% if section.settings.align_logo == 'left' %}
<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
{% include 'site-nav', linklist: section.settings.main_linklist %}
</nav>
{% endif %}
Then add the code above back into the theme.liquid file after the line:
{% section 'header' %}
something like this:
{% section 'header' %}
<nav style="width: 100%;" class=" small--hide" id="AccessibleNav" role="navigation">
{% include 'site-nav', linklist: 'main-menu' %}
</nav>
in the header.liquid file you may need to move the right side icons over by floating them to the right at around line 110
<div style="float:right"; class="grid__item ......>
To change the color, add background-color to the header divs in header.liquid file
It's probably not the best way but it might work.
Need more help? Contact me
here
