There’re 2 types of Header:
- Classic Header
- Header Builder
Classic header is the built-in Dine header and you can configure it in Customize > Header panel. The advantage is you have the header right away and it’s familiar, straight to understand.
Header builder is the header that uses [DINE] Block to build header. The advantage is you have flexibility to build any layout you want, there’s no limitation like classic header. This feature is introduced since Dine v4.0
All Dine demos are using Header Builder now though we still support classic header. However, they’re 2 totally independent and separated modules so if you use one kind of header, you don’t need to worry about the other kind.
Header Builder
Dine Header builder uses [DINE] Block as header of the site. Briefly speaking, [DINE] Block is a post type being used to include in other areas, in this case, the header. It’s a post type so that it can be edited with Elementor.
To find your header quickly, please visit Dashboard > [DINE] Blocks > edit Header. To learn more about [DINE] Block, read this article.
Transparent header
Please note, if you’re using Dining demo, there’re 2 headers:
- Regular header: black logo, black text, white background
- Transparent header: transparent background, white color, white menu..
So you need to edit both of them.
Mobile header
In each [DINE] Block being used for header, we already set visibility for both desktop and mobile headers. So please edit them respectively.
Set up Off-canvas Menu
In mobile header, you can see a hamburger button there. It’s the mobile menu and when visitor clicks, it opens an off-canvas menu.
Please read this article for the details how to set up off-canvas menu like that.
Classic Header
For classic header, please visit Dashboard > Appearance > Customize > Header panel. All options there are obvious and live.
Note: All Dine demos are now using Header Builder, so that if you’re configuring one demo after August 2022, please skip this section.
