Recreate pro theme mobile version header

[sjones1787]

Hello, I have added a custom header to the Blog section (All Post) of the website. I would like to re-create the mobile look and feel of the Pro theme out of the box header.

This is the Header that I want:

This is what I have using the Custom Header for the Blog sections:

I want to keep the logo in the upper left side and open a full width menu below the toggle area. Can anyone give me a push in the right direction?

[friech]

Hi Scott,

Thank you for writing in, please create a Bar with 2 Containers, then set both containers self-flex to Fill Space Equally.
Then set the first bar Flex Layout Horizontal to Start and set the second bar Flex Layout Horizontal to End

Put an image element on the first container as your logo, and put a Navigation Dropdown element on the second bar as the mobile menu.

Then add the following custom to the Element CSS area of your Navigation Dropdown

$el .x-dropdown {
  width: calc(100vw - 4em) !important;
}

That should make the dropdown a full width.

Hope it helps,
Cheers!