The Mobile Menu sub-section controls the hamburger navigation menu that appears on smartphones and small screens.
| Setting | Description |
|---|---|
| Mobile Menu Font | Sets the font size and colour of the hamburger/menu icon button. |
| Show Text with Mobile Menu Icon | Enter optional text to display next to the hamburger icon (e.g. ‘Menu’). Leave blank for icon only. |
| Background Color for Mobile Menu | Sets the background colour of the full-width mobile navigation panel that slides down when the menu icon is tapped. |
| Mobile Menu Links Color | Sets the default, hover, and active colours for mobile navigation link text. |
| Mobile Menu Links Border Bottom | Adds a separator border below each item in the mobile navigation panel. |
| Mobile Menu Links Spacing | Controls padding of each mobile menu link. Default: 10px top/bottom, 20px left/right. |
| Mobile Menu Links Align | Sets the text alignment of mobile navigation links: Left, Centre, or Right. |
| Sub-Menu Opener Width/Height | Sets the dimensions of the tap target button used to expand sub-menus (the ‘+’ or arrow on the right of parent items). |
| Sub-Menu Opener Background Color | Sets the background colour of the sub-menu expand button. |
| Sub-Menu Opener Icon Size | Sets the font size of the icon inside the sub-menu opener. |
| Sub-Menu Opener Icon Color | Sets the default and hover colour of the icon inside the sub-menu opener. |
Note: Mobile menu styles only apply at breakpoints where the desktop navigation collapses (typically below 992px). Test thoroughly on real devices or in browser DevTools responsive mode.