Matrix Framework includes a One Page navigation feature that allows you to enable a single-page menu. With this option, the first-level navigation items automatically scroll to their corresponding anchor sections within the page, instead of opening new pages.
Sub-pages will continue to work as usual - you can create additional pages, which will be displayed as dropdown menu items under the main navigation.
How to activate
To enable the One Page navigation, update your configuration file by setting the following option: onePage: true
Make sure you have uploaded the one-page-scroll.matrix.js file to your project directory. This script is required for the One Page navigation to work correctly.
onePage: true, // One-page scroll navigation
Adding Anchor Sections
To define the sections for One Page navigation, use the Widget/Html module. Within each section of your page, manually add an anchor with the corresponding name (ID).
<div class="cc-section" id="home">
<span>Home</span>
</div>
<div class="cc-section" id="about-1">
<span>About</span>
</div>
<div class="cc-section" id="contact">
<span>Contact</span>
</div>
You can also use the Helper Classes module, where you’ll find preset anchor section code ready to use. This provides 4 preset sections if you don’t want to create each section manually.
Navigating in Admin Mode
Once One Page navigation is active, the main menu will be disabled and will not allow you to switch between different pages.
To access other pages while working in Admin Mode, use the mobile navigation:
- Click the hamburger menu icon.
- Select the desired page from the dropdown list.
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 is-uppercase size-13 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white mid-round-btn | |
| Footer styles | |
| o-form color-white white-outline-btn mid-round-btn | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.