Right Mobile Panel Settings

Reign version 2.3.0 provides you with cool options to style your left and right panel differently as per your choice.

Right mobile panel has the same options as the first mobile panel with a bit change in the configuration section. However, we have added all here again for ease.

Here, we will discuss second mobile panel options you can find the same by navigation through:
Dashboard >> Appearance >> Customize >> First Mobile Panel.

1) Configuration
Display Menu – Select the menu to display or create a new menu. This setting will override the Theme Location setting.
Theme Location – Select the Theme Location to display. The Menu setting will override this setting if a menu is selected.
Edge– Which edge of the viewport should the first panel appear on left or right.
Disable Menu- Check this to disable the menu entirely so that the panel can be used for custom content.
Indent Always Visible Submenus – Check this to indent submenu items of always-visible submenus.
Display Panel Close Button – Display a × close button in the upper right of the ShiftNav panel.
Submenu Type Default – This submenu type will be used by Menu Item whose Submenu Type is set to “Menu Default”. You have three options here to select from they are listed below:

  • Always visible
  • Accordion
  • Shift

Accordion Toggle Open Icon – The icon that, when tapped, will open the accordion submenu.
Accordion Toggle Close Icon – The icon that, when tapped, will close the accordion submenu.

2) Content
Display Site Title – Enabling or disabling this option will display the site title in the menu panel or not respectively.
Display Instance Name- Check this box to display the instance name in the menu.
Top Image – Will display the selected image at the top of first panel menus.
Pad Image – If checked add padding to align the image with menu item text. Uncheck to expand to the edges of the panel.
Image Link (URL) – Make the image a link to this URL.
Display User Avatar- Display the User avatar in the menu panel
Custom Content Before Menu – Can contain shortcodes and HTML, including tags. For eg: reign-search will print the search before the menu.
Custom Content After Menu – Can contain shortcodes and HTML, including tags. For eg reign-search will print the search after the menu.

3) Styles – Panel
Skin – You have lots of option to select your desired skin from those.
Panel Background Color – Allows you to set the background color of the first panel.
Panel Default Font Color – The default font color for custom content within the panel (menu-specific styles will override this for menu items).
Panel Title Font Color – The font color for the header/title within the panel.
Panel Title Font Size – The font size for the header/title within the panel.
Panel Title Font Weight – The font weight of the text in the header/title within the panel.

4) Styles – Menu Items
Menu Item Background Color – The color of the menu item background. Normally not necessary to set unless you want it to differ from the panel background.
Menu Item Font Color – The color of the menu item text.
Menu Item Background Color [Active] – The color of the menu item background when activated.
Menu Item Font Color [Active] – The color of the menu item text when activated.
Menu Item Background Color [Current] – The background color of current menu items.
Menu Item Font Color [Current] – The font color of current menu items.
Menu Item Background Color [Highlight] – The background color of highlighted menu items.
Menu Item Font Color [Highlight] – The color of highlighted menu items.
Menu Item Font Size – The size of the menu item text.
Menu Item Font Weight – The weight of the menu item text.
Menu Item Padding – The padding around the menu item text.
Menu Item Top Border Color – The color of the top border of the menu item.
Menu Item Top Border Color [Active] – The color of the top border of an active menu item.
Menu Item Bottom Border Color – The color of the bottom border of the menu item.
Menu Item Bottom Border Color [Active] – The color of the bottom border of the active menu item.
Disable Menu Item Text Shadow – Remove the text shadow on the menu items.
Top Level Menu Item Text Transform – The font size for the header/title within the panel.
Disable Menu Item Borders – Remove the borders between menu items.

5) Styles – Activators & Retractors
Menu Item Activator Button Background – The background color of the button used to open and close the submenus.
Menu Item Activator Button Background [Active] – The active background color of the button used to open and close the submenus.
Menu Item Activator Arrow Color – The arrow color of the button used to open and close the submenus.
Menu Item Activator Arrow Color [Active] – The active arrow color of the button used to open and close the submenus.
Submenu Retractor / Back Button Background – The background color of the submenu retractor button.
Submenu Retractor / Back Button Font Color – The font color of the submenu retractor button.
Submenu Retractor / Back Button Alignment – The alignment of the submenu retractor button text. You can choose default, center, left or right.

6) Styles – Submenus
Submenu Background Color – The background color of the submenu.
Submenu Item Background Color – The background color of the individual submenu items
Submenu Item Font Color – The font color of the submenu items.
Submenu Item Top Border Color – The color of the submenu item top border.
Submenu Item Bottom Border Color – The color of the bottom border of the submenu items.
Submenu Item Font Size – The font size of the submenu items.
Submenu Item Font Weight – The font weight of the submenu items.

7) Styles – Font
Font Family– The font family the panel. This should be a system font or else the font assets should already be loaded on your site, via @font-face or Google Fonts for example.

Update on February 5, 2019