Setup a Hamburger Menu Header
A Hamburger Menu Header is a compact and modern navigation style that enhances user experience, especially on mobile and minimalist designs. This menu type keeps the navigation hidden until triggered, providing a clean and uncluttered layout. The Crafto theme allows you to easily set up a Half-Screen or Full-Screen Hamburger Menu using Elementor and the Crafto Hamburger Menu widget.
Setup a Half-Screen Hamburger Menu
A Half-Screen Hamburger Menu expands to cover part of the screen, typically sliding in from the left or right.
- Navigate to Templates > Add New Template.
- Select the Template Type (e.g. Section) and enter a Template Name.
- Click Create Template to open the editor in Elementor.
- Add menu content, such as navigation links, icons and buttons.
- Click Publish to save the template.
Add Half-Screen Hamburger Menu to the Header
Go to Theme Builder > Header.
Drag and drop the Crafto Hamburger Menu widget into the header section.
In the widget settings, choose the Hamburger Menu as template from the dropdown. Click Publish to save the template.
Setup a Full-Screen Hamburger Menu
Navigate to Templates > Add New Template.
Select Template Type (e.g. Section) and enter a Template Name. Click Create Template to open it in Elementor.
Design the full-screen menu layout by adding navigation links, icons, a search bar, or any other desired elements. Click Publish to save the template.
Add Full-Screen Hamburger Menu to the Header
- Navigate to Theme Builder > Header.
- Select the Header Template you want to edit.
- Click Edit with Elementor to customize the header.
Drag and drop the Crafto Hamburger Menu widget into the header section.
In the widget settings, choose the Hamburger Menu Full Template from the dropdown. Adjust animation effects, menu alignment, and toggle button styles as needed. Click Publish to finalize your changes.
