Build a responsive header with hamburger menu, toggle search bar in Gutenberg FSE - WordPress
The step-by-step video guide for creating a responsive header with a hamburger menu, and toggle search bar using the Content Blocks Builder plugin.
This guide is for developers that have knowledge of CSS Grid.
Animated hamburger icon https://gist.github.com/Mr2P/8a603e56...
Search icon https://gist.github.com/Mr2P/c5ecc3c3...
This basic header layout has been created as a block in the block library of the plugin. You can get it with one click to import that block.
#wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #cbb #modal #popup #toggle #header #fse
---------------------
Get this plugin free here https://wp.org/plugins/content-blocks...
How to install CBB • How to install the CBB plugin from wp.org ...
In this video, we've used the SVG Block plugin.
Get the SVG block plugin free here https://wp.org/plugins/svg-block
Website https://contentblocksbuilder.com
Try CBB Pro for free https://try.contentblocksbuilder.com
---------------------
© Copyright by BoldBlocks
0:00 Introduction
0:22 Start building an empty page with a custom template
0:43 Start building the header template part
2:52 Set up the hamburger menu
6:20 Add animation to the hamburger icon
7:30 Add the toggle search bar
10:50 Input content to the page to test the header
11:50 Make it as a fixed header
12:26 Add custom CSS to customize the menu on mobile devices