Advanced Navigation block in WordPress Gutenberg is a block to that you can easily add a menu to your WordPress website. It can help to organize your pages & posts with navigation.
1. How to Add Advanced Navigation #
To add the Advanced Navigation Block in your Gutenberg editor first click on (+) icon then in the search box type “Advanced Navigation” and you will see the “Advanced Navigation” block.
After inserting the “Advanced Navigation” block you will get the default look like below. Now you need to change the preset and other settings.
2. General Settings #
The general settings tab has the preset options. This panel setting description is added below.
Child Navigation Block: Select the child navigation block then show the setting. This panel setting description is added below.
Layout: From the layout section, you can change the menu orientation and you can display the navigation bar in a vertical or horizontal orientation.
Menu: From the menu section, you can change the already created classic menu and you can display the navigation.
Hamburger Menu: From the Display Panel, you can customize your navigation menu. you can make screen sizes for different devices with an overlay menu. You can also select the Hamburger icon or text button option from there
Sub Menus: You can customize the submenu from this option. Open on Click toggle on the button if you want to open the submenu after clicking on the menu item. Also, if you don’t want to show submenu the arrow icon, toggle off from there.
3. Style Settings #
The style tab has the navigation item, dropdown menu, dropdown menu indicator and hamburger meu style panel. This panel style description is added below.
Navigation: From the Navigation option, you can set typography, text color, hover color, active menu item color, margin & padding for the navigation menu.
Dropdown Menu: From the Dropdown Menu option, you can set the background color, container with size, padding, border & shadow for the dropdown menu.
Sub Menu Item: From the Sub Menu Item option, you can set the typography, padding, color, border, and sub-menu indicator color for the submenu item.
Dropdown Menu Indicator: From the Dropdown Menu indicator option, you can set the icon color, hover icon color and icon size for the dropdown menu indicator.
Hamburger Menu: From the Hamburger Menu option, you can set the button icon color, background color, icon size & padding for the hamburger menu button.
Hamburger Menu Container: From the Hamburger Menu Container option, you can set the container background color & padding for the hamburger menu container.
Hamburger Menu Item: From the Hamburger Menu Item option, you can set the item typography, padding, alignment, color & border for the hamburger menu item.
4. Advanced Settings #
The advanced tab has block wrapper style margin & padding, background, border, and shadow change options. This panel style description is added below.
- Wrapper Margin & Padding: You can set the wrapper margin and padding
- Background: From here you can set the wrapper background like normal color background or gradient color background also a hover background. You can set the wrapper background image with an overlay.
- Border: You can set wrapper border, border size and border color also border-radius.
- Shadow: From here you can set the wrapper shadow also hover shadow.
Final Outcome #
Following these basic steps and more customizing, you can style your Advanced Navigation Block and your want and get your outcome.
