New Header 5 is a very interesting two Container Layout, and a perfect one to learn how the Header Builder works and what a lot of the new features can achieve.
As you can see in the first image below, the top Container has four Custom Width Columns, with a Logo on the left, a Search Element after that, a text Block Element in the third, and a Menu Element in the fourth, designed for an iconized WooCommerce menu.
The second Container has a full width Column for holding the main Menu, and a secondary menu that only appears in Small Screen view. This is also a Sticky Column, whereas the first one is not, so as you scroll, the menu remains at the top of the page.
This menu also changes quite a bit in the responsive screen views. On Medium Screens, and thanks to the Responsive Option Sets feature, the four Columns in the top Container all become 50% Columns, thereby changing their layout to two rows in the Column.
In Small Screen view, the first three Columns go to fullwidth Columns, while the last Column with the WooCommerce Menu isn’t visible. But now, in the second Container, the WooCommerce last Menu re-appears, as a one half column, and the main menu becomes a mobile menu in the other 50% Column. Check it out!
The trick with this Header, and to get this Header to look like the preview, and like the Designer intended, is to ensure that the Menu Element in the top Container has an icon only WooCommerce menu assigned, the first menu in the second Container has the main navigation menu for the site assigned, and that the last menu in the second Container also has an icon only WooCommerce menu assigned.