Menu style and header style

[amit3076]

Hi Team,

I want to replicate the style of header, menu and overall width of the site from this site - https://www.canny-creative.com/

Overall site width - See how they have 30px gap on all sides, even on top.
Sticky Header - I know how to make sticky header but I am looking to get something similar where you scroll and that top gap disappear and header sticks to top.
Menu - they have 2 menus. How to integrate that. I know I can use superfly along with wordpress menu but when I do that, superfly menu clashes with alignment of wp menu.

Can you please help me with these?

Amit

[jade]

Hi Amit,

@amit3076

Overall site width - See how they have 30px gap on all sides, even on top.

They have added a 2rem padding around the html element of the page to have the gap effect:

@amit3076

Sticky Header - I know how to make sticky header but I am looking to get something similar where you scroll and that top gap disappear and header sticks to top.

If you enable the Bar’s Sticky Bar option, it should automatically be like the site you are referencing:

@amit3076

Menu - they have 2 menus. How to integrate that. I know I can use superfly along with wordpress menu but when I do that, superfly menu clashes with alignment of wp menu.

These can be easily achieved in Pro using the Inline Navigation and Content Modal elements.

Hope this helps.