Mobile Menu

Mobile Menu

Now everyone needs to have a responsive website that looks good on Mobile as the majority of users use Mobile. You need a good menu for your mobile website, as complicated menus on a small screen can be really disastrous. So you have to make sure to make a Mobile Menu that not only looks good but is easy to use. You can create such Menus by using the Mobile Menu block. 

Pro tip
Why not create your own personalized menu using this block. Website visitors can go through the whole website with the Mobile Menu. Make sure to add proper chronology in your Menu.

Configuration for Mobile Menu

In the mobile menu block, you can create a custom mobile menu with a customized layout.

How to use the Mobile Menu Block of The Plus Addons For Gutenberg

The Mobile Menu block comes with multiple designs. Let’s understand how to use this block in the tutorial below. 

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Mobile Menu into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Mobile Menu after “/” sign, eg.“/Mobile Menu”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Mobile Menu

Style

Select your preferred style from the dropdown. You can choose from the two options you get.

Position 

You can specify whether the Menu position to be fixed or absolute.

Fixed Position 

You can specify whether the Menu position to be fixed or absolute.

Open Mobile Menu

Specify the pixels after which you want to display the Mobile Menu. 

Menu 1

Select Icon 

You can set an Icon or Image for every Menu Item. 

Icon 

Select the Icon you want to add. 

Text 

You can specify text for each menu item that will be displayed with the Icon 

Link  

Add a link to Menu Items 

Pin Text 

You can also add further Pin Text to the Menu Items.

Extra Toggle

Extra Toggle 

You can enable or disable the toggle with a sliding button.

Select Toggle Icon 

You can set an Icon or Image for Toggle. 

Icon 

Choose the icon you want to specify for the toggle.

Image Size 

You can specify the image size of the toggle. 

Text 

Add text here for the toggle button.

Content 

You can specify whether you want to add or a Template to the Toggle.

Extra Options

Display 

You can set the display option to either Swiper or Columns. 

Active Page Indicator 

Enable this to add the Active page indicator to the Menu. 

Style 

Select the style of the Active Page Indicator. 

Position 

Select the Position of the Active Page Indicator.

Offset

Set the bottom offset of the dot style from here.

Pin Text Overflow 

Hide or show pin text overflow with this option.

Credit : Gutenberg, WordPress

2. Style

The Style tab is used for customizing the appearance of all the Mobile Menu block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Icon/Image

Icon Size

Set size of icon from here.

Icon Color

A color picker to assign a suitable color to the icon.

Image Size

Set size of image from here.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Extra Toggle Icon/Image

Icon Size

Set size of icon from here.

Icon Color

A color picker to assign a suitable color to the icon.

Image Size

Set size of image from here.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Active Page Indicator

Size

Set size of text from here.

Color

A color picker to assign a suitable color to the text.

Menu

Padding

Put in some inner space to an element.

Width

Set width of menu from here.

Height

Set height of menu from here.

Typography

Assign a size, weight, spacing and much more to fonts.

Title Color

A color picker to assign a suitable color to the title.

Toggle Title Color

A color picker to assign a suitable color to the toggle title.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Extra Toggle

Extra Toggle Equal Height/Width

By enabling this option, set extra toggle height/width here.

Size

Set size of extra toggle from here.

Offset

Set the offset (Bottom/Top) of the extra toggle here.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Content Background

Padding

Put in some inner space to an element.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Overflow

Hide or show content overflow with this option.

Pin Text

Padding

Put in some inner space to an element.

Top Offset

Set the top offset of the pin text from here.

Right Offset

Set the right offset of the pin text from here.

Text Size

Set size of pin text from here.

Text Color

A color picker to assign a suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Extra Options

Show Mobile Menu Scroll Offset

By enabling this option, you can see the scroll top offset value option here.

Scroll Top Offset Value

Set the top offset value of the menu on the page scroll from here.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.