school-management•
3 min read
Configuring Mobile Navbar & Drawer Styles
Customize how your school website header and mobile menu behave on mobile viewports.
Audience:School Administrator
Before You Begin (Prerequisites)
- Navigate to Admin Portal > School Website > Layout & Header Settings.
1
Step 1: Selecting Mobile Menu Style
Under Header Navbar Behavior, locate Mobile Navigation Menu Style. Administrators can choose between four bespoke presentation modes:
Pro Tip:Choose Vaul Touch Bottom Sheet for a native app feel on smartphones.
2
Step 2: Menu Style Options
1. Touch Bottom Sheet (Vaul JS Drawer): Touch-native drag handle sliding up from the bottom. 2. Slide-In Right Drawer: Smooth slide-over panel from the right. 3. Slide-In Left Drawer: Smooth slide-over panel from the left. 4. Header Accordion Dropdown: Compact inline menu directly below the header.
3
Step 3: Non-Bulky Compact Mobile Header
On mobile viewports, the top contact stripe is automatically collapsed to keep the school header compact, sleek, and non-bulky.
Important Operational & Security Notes
- Changes take effect immediately on public school landing pages upon saving website studio settings.
Was this documentation article helpful?
Your feedback directly informs our support updates.
Related Documentation