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.
