Responsive Menu plugin offers a variety of options, with which you can style the menu button with very much ease. The following article gives you a complete insight into how you can use various styling options in the ‘Button’ tab of Responsive Menu settings. So, that you can get the best out it.
Animation
Type: ‘Type’ field defines various styles which you can apply on your animation button. For e.g. Boring, 3DX, 3DY, Arrow, Collapse etc. You can have a look at this page to see all the animation styles in action.
Trigger: Next field in animation section is ‘Trigger’. It defines various trigger actions with which menu button will become active & inactive. By default, this field is set to ‘click’ but you can also set this field to ‘hover’. With ‘Click’, user can open & close the menu button by clicking on it. While with ‘hover’ action, menu button can be opened & closed by just hovering over it.
Push Button: ‘Push Button’ field allows the admin whether he wants to push away the menu button when the menu container opens or not. This setting is useful only if your button and the menu are on the same side. For e.g. If you set the button aligned to left, then it will be pushed away to the right of the menu container when it will open. But, if the menu button is already on the right side, then it will be pushed away out of the screen when the menu container will open.
Location
Position: ‘Position’ field specifies how you want the button to stick to your page. The dropdown shows 3 values for this field: ‘fixed’, ‘absolute’ and ‘relative’. ‘Fixed’ value makes the button sticky even when you scroll down the page. ‘Absolute’ value makes the button disappear when you scroll down the page. ‘Relative’ value makes the button positioned relative to its normal position. “Relative’ positioning works best when combined with a shortcode.
Side: This field defines the side of the page at where you want your menu button to be displayed. for e.g. left or right.
Distance from Side: Once you have decided at which side you want your button to be displayed. This field helps you define the distance from that side. You can define the distance in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH). This field won’t work if you have ‘Relative’ positioning set.
Distance from Top: This field specifies how far from the top you want the button to display. You can define the distance in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH). This field won’t work if you have ‘Relative’ positioning set.
Container Sizing
Height: ‘Height’ field sets the height of the menu button. This field also takes the value in the form of pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Width: ‘Width’ field sets the width of the menu button. This field also takes the value in the form of pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Line Sizing
Height: This field defines the height of each button line in the unit specified by the admin for e.g. pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Width: This field defines the width of each button line in the unit specified by the admin for e.g. pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Margin: ‘Margin’ field sets the margin between each individual button line and it takes value in the form of pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Container Background
Colour: ‘Colour’ field sets the background colour of the menu button. This field takes a hex value to specify the colour.
Hover: The field sets the background colour of the menu button when the mouse hovers over it and takes a hex value to specify the colour.
Active: Sets the background colour of the menu button when the button is in an active state.
Transparent Background: Specifies whether you want a transparent background of the button or not. If this field is ‘on’, all the above background options of the menu button will become inactive.
Line Colours
Colour: Specifies the colour of all the menu button lines.
Hover Colour: Specifies the hover colour of the menu button lines.
Active Colour: Specifies the colour of the menu button lines when the button is in an active state.
Title
Text: Defines the title text of the menu button.
Active Text: Specifies the text of the menu button when the button is in an active state. This feature is useful when you want to specify different title texts for active and inactive states of the menu button.
Colour: Sets the button title colour and takes hexadecimal colour values.
Alignment: Sets the alignment of the title text with respect to the menu button. For e.g. Top, Right, Left and Bottom.
Font: Sets the font style of the button title.
Font Size: Specifies the font size of the button title. Takes values in the form of pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Line Height: Sets the line-height of the button title.
Image
Image: If you want to use an image instead of 3 lines on the menu button. This feature helps you to do that. Just upload your image using the upload button.
Alt Text: Specifies the alt text for the button image. Defining alt text for images is a good practice for Search Engine Optimization(SEO).
Active Image: You can set the active image for the menu button using this field if desired.
Alt Text: Specifies the alt text for the active button image.
Font Icon: You can set a font icon instead of the default 3 lines on the menu button if desired. Just select the type of font icon from the dropdown menu. Read this article on how to use font icons. Active Font: You can set an active font icon instead of the default 3 lines if desired. Just select the type of font icon from the dropdown menu. Read this article on how to use font icons.
Advanced
Trigger: ‘Trigger’ field specifies the class or id of the CSS selector which you want to use as your menu button. By default, this field uses a CSS id with name ‘#responsive-menu-pro-button’. If you want to use your own custom class or id for the menu button, you need to specify it in this field.
