With the EB Advanced Navigation block, you can easily add a menu to your WordPress website and provide smooth navigation to your pages & posts in an organized & stunning manner.
Follow this step-by-step guide to add Essential Blocks Advanced Navigation using at ease.
Note: Install and activate the Essential Blocks for Gutenberg plugin into your WordPress dashboard before starting this tutorial.
How To Activate Essential Blocks Advanced Navigation? #
To activate EB Advanced Navigation, go to ‘Essential Blocks → ‘Blocks’ from the WordPress dashboard. Then, toggle to enable this ‘Advanced Navigation’ block. After that, click on the ‘Save’ button.
How To Configure Essential Blocks Advanced Navigation? #
Now, open the page where you want to insert a navigation menu in Gutenberg. Then click on the ‘+’ button and find the ‘Advanced Navigation’ block. Simply click on the block and it will be added instantly to your web page.
Alternatively, you can also add this block to your web page using another method. Click on the ‘+’ icon from the top left corner then search for ‘Advanced Navigation’. Now, simply drag and drop the block to your web page.
Once you have added EB Advanced Navigation to your website, now you need to link the pages that you want to showcase on the navigation menu. So, hit the navigation bar then click on ‘Start empty’ then click again to the ‘+’ icon. Now, choose the page or post you want to add to your navigation menu. By clicking on the ‘+’ icon again, you can add as many pages or posts as you want to add to your navigation bar.
Similarly, you can also add a sub-menu for each of the menu items and make your navigation block even more helpful for your visitors. Select the navigation item where you want to include submenus, click on the ‘Submenu add‘ icon, and add pages or posts under it.
Then hit the ‘Add submenu’ → ‘+’ icon below the menu that you have inserted for adding submenu. Now, choose the page or post that you want to add as a submenu. Similarly, you can add submenus to each navigation item easily.
Now, click on the navigation icon and select ‘Advanced Navigation’ to open the Gutenberg ‘Settings’ Now, go to the ‘General’ tab to customize this block as you want.
From the ‘Layout’ section, you can customize the menu ‘Orientation’. You can display the navigation bar in a Vertical or Horizontal orientation and choose a preset from the ‘Preset’ option from available ready design styles.
Dropdown Menus #
You can customize the drop-down menu from this option. Toggle on the ‘Open on Click’ button if you want to open the dropdown menu after clicking on it. Also, if you don’t want to showcase the dropdown icon, toggle it off from there.
Responsive Menu #
From the Responsive Menu, you can optimize your navigation menu, and make it compatible with the screens of the different devices. You can select the ‘Button Type’ and choose the ‘Display Menu’ option from there.
From the ‘Styles’ tab, personalize the appearance of the Advanced Navigation block. You will get plenty of options to customize the navigation menu.
From the ‘Nav’ option, you will find the options for choosing ‘Typography’ for the navigation menu. Add the ‘Padding’ & “Margin’ from there to the navigation bar.
On the ‘Nav’ option, you can customize the color of your navigation menu from the ‘Color‘ option. Adjust the color of the menu and add a hover effect from there. Also, select the color for the active page menu from the ‘Active Color’ option.
Dropdown Menu #
From the Dropdown Menu option, you can personalize the navigation menu container and its items easily. You can style the ‘Background’, ‘Border & Shadow’, and ‘Padding’ for the container from there. Similarly, you can personalize the ‘Typography’, ‘Padding’, and colors easily.
The ‘Caret’ option will let you customize the size and color of the drop-down menu indicator icon easily. You can also a hover effect for the Caret from there.
Hamburger Menu #
Now, personalize the ‘Hamburger Menu’ from there as well. Adjust the typographies, colors, and paddings for the buttons, container, and items as you want. In addition, you can customize the color and alignment for the ‘Close Icon’ from there.
From the ‘Advanced’ tab, you will get all the options for advanced customization for the navigation menu. You can customize Margin Padding, Background, Border & Shadow, Responsive Control, Animation, and Custom CSS. Using these options you can add more styling to the Advanced Navigation block.
Final Outcome #
After making all the changes hit the ‘Update/ Publish’ button and you will see your EB Advanced Navigation block displaying on your website. By following the simple and easy steps, you can add the EB Advanced Navigation block and style it in Gutenberg.
Here’s how you can easily configure and design your EB Advanced Navigation block in Gutenberg.
Got stuck? Feel free to contact our support for further assistance.