Kriti Sharma
Forum Replies Created
-
With Responsive Menu Pro, you can not only style menu container or a menu button but also a header bar. A header bar is the significant part of a website and without it, a website looks incomplete.
Initial Setup
Enabled: Turning this on will show a header bar on the website. All the styling options you apply on the header bar will not show unless this option is enabled.
Positioning: The dropdown offers you 3 different options on how you want to display the header bar when the user scrolls down the page. With Fixed positioning, the header bar will stay in place as you scroll down the page. With Absolute positioning, the header bar will disappear as you scroll down the page. With Relative positioning, the header bar will stay in a specific position on the page. Relative Positioning is useful when used with the shortcode.
Breakpoint: This is the width of the screen in pixels at which you would like the header bar to start showing. Set it to ‘80000 px’ if you want to display it on all the screens.
Ordering
Order of Header Bar Items: This section allows you to drag the header bar items left and right to re-order so that you can decide how they appear on the front end. You can also click to turn them on or off. You can add/remove a Logo, Title, Search Bar and HTML content as per your choice.
Logo
Image: You can add your logo image using this field. It is always a best practice to add logo images with png extensions.
Height: Sets height of the logo image in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Width: Sets width of the logo image in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Alt Text: Set the alt text for the logo image using this input field.
Link: The URL you put in this field will take the user to that specific page whenever he clicks on the logo image. Generally, homepage hyperlink is put in this field.
Title
Text: The input field sets the title text to be used in the header bar.
Content
HTML Content: You can add any custom HTML content, shortcodes, text, social media information, shopping cart information using this section.
Text
Font: Sets the font for the header bar text. The specified font must be installed in your WordPress theme.
Font Size: Sets the font size of the text in the header bar in the pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH) units.
Sizing
Height: Sets height of the header bar in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Adjust Page: Enabling this option will bring down the webpage’s content and align it with the header bar. By default, the option is turned off. So, You might experience that your header bar is covering the website’s content with this option disabled.
Colours
Background: Sets the background colour of the header bar. Takes a hex code or rgba() value to specify the colour.
Text: Sets the colour of the header bar text. Also takes a hex code or rgba() value to specify the colour.
Responsive Menu plugin offers various technical settings which provide the user extra set of functionalities. Some users may not know how to use these terms, so we are going to discuss them in detail.
Theme
Admin Theme: Responsive menu plugin provides its users two admin panel themes, from which they can select a theme according to their preference. The default admin theme of this plugin is set to ‘Dark’, the other one is ‘Light’.
Scripts
Use External Files: Enabling this feature, creates external CSS and Javascript files generated by this plugin. Placing Javascript and CSS in external files ensures the following advantages: It separates HTML and code, It makes HTML and JavaScript easier to read and maintain, Cached JavaScript files can speed up page loads. So, the plugin keeps on working efficiently.
Minify Scripts: Minification is the process of removing unnecessary elements and rewriting code to reduce file size. It is commonly done to web page resources, such as HTML, CSS, and JavaScript files. It reduces the file size of the plugin and thus, in turn, increases the page load speed of the website.
Place Scripts In Footer: By placing the JS at the bottom of your page before <body> the closing tag, you are allowing the HTML to be parsed prior to loading the javascript. This gives the effect of faster page load times. If you have static HTML content and a lot of javascript, it can make a difference in perceived page load time since the HTML will load first giving the user something to look at. If you don’t have much javascript, or the existing page content relies on the javascript to be useful, then this is not as useful.
Remove Scripts
Remove FontAwesome Scripts: Enabling this feature does not load the plugin’s FontAwesome scripts. It is useful if you want to run your own FontAwesome version or already have it installed.
Remove BootStrap Scripts: Enabling this feature does not load the plugin’s BootStrap scripts. It is useful if you want to run your own BootStrap version for GlyphIcons or already have it installed.
Transfer
Import: This option allows the user to import settings from another responsive menu plugin created via the Export process below. This process cannot be undone so be 100% sure before importing the settings.
Export: This will create an export file so that you can transfer the settings of this plugin to other sites.
Rebuild
Reset Options: This will reset the plugin options back to their defaults. It is useful if you have messed up with the settings of the plugin and want to restart again. This process is a destructive process and can’t be undone.
Rebuild Database: This will rebuild the database table if you are having issues. This process is also a destructive process and can’t be undone.
Styling sub-menu items are very easy with the options available in the responsive menu pro plugin.
Styling
Font: Sets the font for the sub-menu items. The specified font must be installed in your WordPress theme or a browser inbuilt one.
Font Size: Sets the font size of the sub-menu items in the pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH) units.
Item Height: Sets the height of each menu item.
Item Line Height: Sets the line-height of each sub-menu item. Line height is different from the item height as line-height defines the height of each line and the item height specifies the height of each sub-menu item excluding line-height.
Text Alignment: Aligns the text according to your specific requirements. You just need to select a value from the dropdown field.
Item Borders
Width: Specifies the border width of each sub-menu item.
Colour: Sets the border colour for each of the sub-menu items. Uses hex color codes or rgba() color values.
Hover Color: Sets the border colour for each sub-menu item when the mouse rolls over it.
Current Item Colour: Sets a border colour for the active sub-menu item.
Current Item Hover Colour: Sets the border colour for the active submenu item when the mouse rolls over it.
Item Text
Colour: Sets the text colour of the submenu items. Uses hex color codes or rgba() color values.
Hover Color: Sets the text colour for each submenu item when the mouse rolls over it.
Current Item Colour: Sets a text colour for the active submenu item.
Current Item Hover Colour: Sets the text colour for the active submenu item when the mouse rolls over it.
Item Background
Colour: Sets the background colour of the submenu items. Uses hex color codes or rgba() color values.
Hover Color: Sets the background colour for each submenu item when the mouse rolls over it.
Current Item Colour: Sets a background colour for the active submenu item.
Current Item Hover Colour: Sets the background colour for the active submenu item when the mouse rolls over it.
Trigger Icon
Position: With the ‘Position’ field you can set at which side of the menu, a sub-menu trigger will appear. The dropdown option helps you to select the position very easily.
Trigger Sizing
Height: Sets height of the submenu trigger in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Width: Sets width of the submenu trigger in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Trigger Colours
Colour: ‘Colour’ field sets the colour of the sub-menu trigger. This field takes a hex code or rgba() value to specify the colour.
Hover: ‘Hover’ field sets the colour of the sub-menu trigger when the mouse hovers over it. This field also takes a hex code or rgba() value to specify the colour.
Active Colour: Sets the colour of the sub-menu trigger when the menu item is in an active state.
Active Hover Colour: Sets the hover colour of the sub-menu trigger when the menu item is in an active state.
Trigger Background
Colour: Sets the background colour of the sub-menu trigger. Takes a hex code or rgba() value to specify the colour.
Hover Colour: Sets the background colour of the sub-menu trigger when the mouse hovers over it.
Active Colour: Sets the background colour of the sub-menu trigger when the menu item is in an active state.
Active Hover Colour: Sets the background hover colour of the sub-menu trigger when the menu item is in an active state.
Trigger Border
Colour: Sets the border colour of the sub-menu trigger. Takes a hex code or rgba() value to specify the colour.
Hover Colour: Sets the border colour of the sub-menu trigger when the mouse hovers over it.
Active Colour: Sets the border colour of the sub-menu trigger when the menu item is in an active state.
Active Hover Colour: Sets the border hover colour of the sub-menu trigger when the menu item is in an active state.
Padding
Side: The dropdown defines the side (either left or right) of the menu at which you want the padding should be on.
Top Level: Sets the padding of the parent menu items from the side you specified above.
Child Level 1: Sets the padding of the 1st level submenu items from the side you specified above.
Child Level 2: Sets the padding of the 2nd level submenu items from the specified side.
Child Level 3: Sets the padding of the 3rd level submenu items from the specified side.
Child Level 4: Sets the padding of the 4th level submenu items from the specified side.
Child Level 5: Sets the padding of the 5th level submenu items from the specified side.
Animations
Use Accordion: Enabling this option, will show all those menu items that have submenus in an accordion style. If you open any one these accordion then the other one will close automatically. By default, the option is set as disabled.
Auto Expand All Sub Menus: Enabling this option, will auto expand all the menu items every time the page loads. By default, the option is set as disabled.
Auto Expand Current Page Sub Menus: Enabling this option, will auto expand child submenus of the current parent every time the page loads. By default, the option is set as disabled.
Expand Sub Menus on Parent Item Click: Enabling this option, will expand all the child submenus whenever a user clicks on the parent menu item. By default, the option is set as disabled.
Slide Effect
Enabled: The slide effect changes the way that sub-menus open and close. Instead of the standard drop-down animation, the slide effect will make them slide over the top of each other.
Back Text: Back Text allows you to go back to the previous level when using the slide effect. You can specify the text in the input field you want to use as the back text.
Styling responsive menu items are very easy with the options available in the responsive menu pro plugin.
Font Icons
With ‘Font Icons’ setting you can use a dedicated icon for each menu /sub-menu item to make it look more attractive and appealing. In this section, you are provided with 3 fields in every row. Each row is specifically dedicated to each menu item and you can add as many rows as you want with ‘Add Font Icon’ button. Every row contains 3 fields; 1st field is for selecting a menu item from the dropdown, 2nd field is for determining the icon symbol and 3rd field is for what type of font icon you want to use. Currently, we support Font Awesome, Glyphicon and custom icons. For a guide on implementing icons in your menu and for more info please visit our dedicated doc page here.
Depth
Depth determines how many levels of hierarchy your menu can have.
Styling
Font: Sets the font for the menu items. The specified font must be installed in your WordPress theme.
Font Size: Sets the font size of the menu items in the pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH) units.
Item Height: Sets the height of each menu item.
Line Height: Sets the line-height of each menu item. Line height is different from the item height as line-height defines the height of each line and the item height specifies the height of each menu item excluding line-height.
Text Alignment: Aligns the text according to your specific requirements. You just need to select a value from the dropdown field.
Word Wrap: If you have long menu-items then enabling this option allows the menu items to wrap around to the next line.
Item Border
Width: Specifies the border width of each menu item.
Colour: Sets the border colour for each of the menu items. Uses hex color codes or rgba() color values.
Hover Color: Sets the border colour for each menu item when the mouse is rolled over it.
Current Item Colour: Sets a border colour for the active menu item.
Current Item Hover Colour: Sets the border colour for the active menu item when the mouse is rolled over it.
Item Text
Colour: Sets the text colour of the menu items. Uses hex color codes or rgba() color values.
Hover Color: Sets the text colour for each menu item when the mouse is rolled over it.
Current Item Colour: Sets a text colour for the active menu item.
Current Item Hover Colour: Sets the text colour for the active menu item when the mouse is rolled over it.
Item Background
Colour: Sets the background colour of the menu items. Uses hex color codes or rgba() color values.
Hover Color: Sets the background colour for each menu item when the mouse is rolled over it.
Current Item Colour: Sets a background colour for the active menu item.
Current Item Hover Colour: Sets the background colour for the active menu item when the mouse is rolled over it.
Trigger Icon
Position: Trigger icons are used to expand the sub-menus of a particular menu item. With the ‘Position’ field you can set at which side of the menu, sub-menu trigger will appear. The dropdown option helps you to select the position very easily.
Active Shape: It helps you to define the shape of the trigger when the menu item is in expanded/active state and you can clearly see all the sub-menus of this particular menu-item. You will have to click on the trigger icon to expand the sub-menu items. You can also change the shape of the trigger icon by just copying and pasting the desired shape from this page. Do not copy the shape code otherwise, it will show the code instead of shape icon.
Inactive Shape: It helps you to define the shape of the trigger when the menu item is not in expanded/active state and you can not clearly see all the sub-menus of this particular menu-item. The shapes of trigger icon can also be changed using this page.
Active Image: It lets you set an image as the active sub-menu trigger. If you use both an image and a shape as the active sub-menu trigger, the image will take precedence over shape.
Alt Text: This field lets you define the alt text for the image as an active sub-menu trigger.
Inactive Image: It lets you set an image as the inactive sub-menu trigger. If you use both an image and a shape as the inactive sub-menu trigger, the image will take precedence over shape.
Alt Text: This field lets you define the alt text for the image as an inactive sub-menu trigger.
Active Font Icon: If you like you can also set an icon as the active sub-menu trigger. The font icon will have the highest precedence over image and shape.
Inactive Font Icon: If you like you can also set an icon as the inactive sub-menu trigger. The font icon will have the highest precedence over image and shape.
Trigger Sizing
Height: Sets height of the menu trigger in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Width: Sets width of the menu trigger in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Trigger Colours
Colour: ‘Colour’ field sets the colour of the sub-menu trigger. This field takes a hex code or rgba() value to specify the colour.
Hover: ‘Hover’ field sets the colour of the sub-menu trigger when the mouse hovers over it. This field also takes a hex code or rgba() value to specify the colour.
Active Colour: Sets the colour of the sub-menu trigger when the menu item is in an active state.
Active Hover Colour: Sets the hover colour of the sub-menu trigger when the menu item is in an active state.
Trigger Background
Colour: Sets the background colour of the sub-menu trigger. Takes a hex code or rgba() value to specify the colour.
Hover Colour: Sets the background colour of the sub-menu trigger when the mouse hovers over it.
Active Colour: Sets the background colour of the sub-menu trigger when the menu item is in an active state.
Active Hover Colour: Sets the background hover colour of the sub-menu trigger when the menu item is in an active state.
Trigger Border
Colour: Sets the border colour of the sub-menu trigger. Takes a hex code or rgba() value to specify the colour.
Hover Colour: Sets the border colour of the sub-menu trigger when the mouse hovers over it.
Active Colour: Sets the border colour of the sub-menu trigger when the menu item is in an active state.
Active Hover Colour: Sets the border hover colour of the sub-menu trigger when the menu item is in an active state.
Descriptions
Enabled: This field lets you enable the descriptions of the menu items if you have already set them. By default, the field is disabled. You can specify the descriptions of the menu items in the ‘Menu’ settings of the WordPress admin panel.
Animations
Smooth Scroll Enabled: Enabling this field allows the same page links to smooth scroll to their destinations. Same page links means when the hypenlink and its destination are on the same page. By default, the field is disabled.
Smooth Scroll Field: It sets the speed at which same page links will scroll smoothly. The speed is defined in microseconds(ms). For e.g. 500ms refers to a half-second and 1000ms refers to full 1 second.
Fade Items In
Enabled: Enabling this option makes the menu items appear with fade-in animation whenever the menu container opens rather than simply appearing all menu items at once. By default, the option is disabled.
Side: With this drop-down option, you can select from which side you want your menu items to fade in.
Delay: Sets the delay between each menu item fade finishing and the next one starting.
Speed: Sets the speed at which the menu items fade in.
Advanced
Theme Location Menu: This dropdown offers you to select a location menu specific to the applied theme. However, this option will overwrite the menu you have specified in the ‘menu to use’ field in the Initial Setup tab.
Custom Walker: Sets your own Walker class for customising the links HTML output.
With Responsive Menu Pro plugin, you can effectively style menu container in an appealing way.
Ordering
Order of Container Items: In Responsive menu container, you can add items according to your requirements. For e.g. Title, Menu items, Search Bar & any additional content. This section allows you to add/remove/arrange these items in your menu container accordingly. ‘Title’ specifies the title of the website, ‘Menu’ specifies menu-items, ‘Search’ specifies search bar and ‘Additional Content’ allows you to add any type of content you wish to add in your menu container. By default, all these items are marked as ‘ON’. But if you want to disable any one of them, you can do it by clicking on the ‘ON’ button. You can also rearrange these items by dragging & dropping from one place to another.
Sizing
Width: Specifies width of the menu container according to the device’s screen resolution. It takes value in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Maximum Width: It helps to define the maximum width of the menu container. The container will not attain width more than the value specified in this field. This feature is useful if you don’t want it to be unnecessarily large on wider screens.
Minimum Width: It helps to define a minimum width of the menu container. The container will not attain width less than the value specified in this field. This feature is useful if you don’t want it to be unnecessarily small on smaller screens.
Auto Height: Enabling this field makes the container height stop at the end of the last container item, rather than covering the 100% viewport height of the page.
Background
Image: It allows to set an image as the menu container background. You just need to upload an image using the ‘upload’ button to use this functionality.
Container colour: You can define the background colour of the menu container using this field. The colour value can be set using a hex code or rgba() value.
Inner Container Colour: This field helps to define the background colour of the inner menu container. You can set the colour value using hex code or rgba() value.
Title Text
Font Size: Sets the font size of the ‘Title’. This takes a value in the pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH) units.
Text: It sets the title text to appear for the text section.
Text Alignment: Aligns the text according to your specific requirements. You just need to select a value from the dropdown field.
Link: If you want to place a hyperlink on the title text and navigate to that specific link when clicked, this feature comes in handy for the purpose. Just place your hyperlink in the specified field and you are good to go.
Link Target: This dropdown field helps you to decide how you want the hyperlink specified above to be opened. Just play with the options specified and select as per your requirements.
Title Colours
Background: If you want to highlight the title text by giving it a certain background, this field helps you to do that. You need to place a hex code or rgba() value in the input field.
Background Hover: With ‘Background hover’ field, you can set a specific colour as the background hover colour of the title text.
Text: If you wish to specify a desired colour for the title, this field lets you do that. Here also, you need to place a hex code or rgba() value in the input field.
Text Hover: Sets the title section text colour when the mouse is rolled over it.
Title Image
Image: This field lets you set an image alongside the title text. You can also upload the logo of your website using this field. It supports all image extensions including jpg, png etc.
Height: Sets height of the title image in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Width: Sets width of the title image in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Alt Text: The field defines the alt text of the title image if you wish to use the same. If you leave the field blank, it will not specify any alt text for the title text.
Font Icon: Specifies a font icon alongside the title text. It will override the image specified above.
Additional Content
Content: This section allows you to put any custom HTML, shortcodes, text or anything you like to supplement the other container items. It’s particularly useful if you have social media icons, shopping cart information or anything else custom to your site.
Colour: Sets the text colour of the additional content.
Animation
Appear From: Helps you determine from which side of the device’s screen you want the menu container to appear. For e.g., left, right, top or bottom.
Type: You can choose the type of animation used for showing the container. Currently, there are 3 options: slide – slides the container in from the location specified above, push – used if you want to push your page across when the container slides in, fade – used if you want to fade the container in on the page rather than sliding in. By default, the field is set to slide.
Push Wrapper: Specify the CSS selector(s) which you want to push when using the ‘push’ animation above.
Search
Text Colour: Sets the text colour of the ‘search’ input field in hex or rgba() code.
Border Colour: Sets the border colour of the search box.
Background Colour: Sets the background colour of the search box.
Placeholder Text: Specifies the placeholder text for the search box when it is empty or before someone starts typing in the field.
Placeholder Colour: Sets the colour of the placeholder text in the search box.
Technical
Page Clicks: Enable this option if you want to close the menu container whenever you click or tap on the page. By default, this option is disabled.
Close on Link Clicks: Enable this option if you want to close the menu container whenever you click or tap on the menu link. By default, this option is disabled.
Close on Page Scroll: This option will close the menu container whenever you scroll the page. It is also disabled by default.
Enable Touch Gestures: Enables ‘drag’ and ‘swipe’ touch gestures on mobile devices. ‘Drag’ will open the menu container whenever you do a drag touch gesture and ‘swipe’ touch gesture will close the menu container.
Keyboard Shortcuts
Close: Selects certain keyboard shortcuts to close the menu container. Whenever the selected shortcut is pressed, the menu container will close as desired.
Open: Selects certain keyboard shortcuts to open the menu container. Whenever the selected shortcut is pressed, the menu container will open as desired.
Responsive Menu Pro plugin offers various advanced settings which provide extra functionality to its users.
Excluded Pages
With the ‘Excluded Pages’ field, you can opt for one or more webpages on which you don’t want to show the responsive menu. Read this article to see this functionality in action. If you want to deselect this option on the pages you have used this earlier, just click on the selected option/options. And you are all set.
Animation Speeds
Container: Specifies the speed at which menu container opens and closes. It takes a value in the form of seconds and microseconds. For e.g. 1 s or 0.5 s. By default, it is set to 0.5 s. Microseconds means that the menu container will take lesser time to open/close and vice vera for more no. of seconds.
Colours: Specifies the animation speed at which colours transition from standard to active or from standard to hover states. Also takes a value in the form of seconds and microseconds. For e.g. 1 s or 0.5 s. By default, it is set to 0.5 s. Microseconds means that the menu container will take lesser time to open/close and vice vera for more no. of seconds.
Sub Menus: Specifies the speed at which all the sub menus will show up. By default, the speed is set to 0.2 s. But, if you set this value to 0.5 s or 0.7 s, it will give a very nice transition effect to the sub-menus.
Technical
Use Shortcode: This option gives you a bit more control over the menu, like including different menus on different pages or using different menus for different languages, all using the same plugin with the same settings. Read the full documentation here on how to use shortcode with Responsive Menu Pro plugin.
Hide on mobile devices: The option lets you enable or disable the responsive menu on mobile devices. If you are on a mobile device and this field is checked, then no HTML, CSS or Javascript related to Responsive Menu will be loaded into the page. Thus, the menu will not show on mobile devices.
Hide on desktops: It lets you enable or disable the responsive menu on desktops. If you are on a desktop and this field is checked, then no HTML, CSS or Javascript related to Responsive Menu will be loaded into the page. Thus, the menu will not show on desktops.
Show Menu on Page Load: Enabling this field means the menu container will show as opened and the button will be set to active on each page load.
Adjust for WP Admin Bar: This will bring the various elements of the website down when you are logged in as the admin, so they are not hidden behind the admin bar.
Disable Background Scrolling: It gives you the option whether you want or don’t want the background scrolling on the page when the menu is open. Before enabling this option, please ensure your theme follows WordPress theme development guidelines for this to work. Specifically that the HTML tag includes the language_attributes() function call.
Page Overlay
Enable: It will add a nice page overlay on the background when the menu container is open, covering all but the opened menu and the menu button.
Colour: Sets the colour of the page overlay. This field works nicely with slight transparency. It takes rgba() color values. An rgba() color value is specified with: rgba(red, green, blue, alpha). First 3 parameters define the intensity of colour and ranges between 0-255. The last value defines the opacity of colour and ranges between 0.0(fully transparent) – 1.0(fully opaque).
Custom CSS
If you want to make minor tweaks to some margins, paddings or colours or even for whole new layouts or designs. This area lets you add custom CSS for such styling.
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.