Hello,
Please see the screenshot for example.
What is the best approach in building this main header, to make it responsive and a clean design with good spacing? So the background colour is split evenly from white to green.
That depends on what you’re wanting for your responsive view. If you want it to shift so that the white and green panes are stacked vertically on mobile-portrait, I’d create them that way from the beginning and have the nav in the white part only.
That makes the layout change far more organic.
I think I will go with your advice thanks Michael. How would I spilt the page with white and green and maintain the same margin as the container to match the sections below on my site? Currently, I have the width at a max width 1400px, and to allow white and green to reach page edge.
Hey Jake, I’m not sure what you’re asking.
You’d just match the margins and padding you want.
Margins and padding are part of style, so they’re responsive too. On desktop you can make the content near the white-green boundary tighter while they’re adjacent, and then on mobile resolutions you can choose to change those margins/padding to something more left-right balanced for a stacked view.