Large dropdown mega menu with informational text, static link list, collapsible navigation, and socials.
Check out the following video for a guide through Rubric's header global partial:
View a live demo of this partial here.
The following is a detailed listing of the styling edits made to the partial's sections, the modules used in the sections, and field changes from the modules' default state.
Warning: This partial is split into two parts for Desktop and Mobile. Only editing the Desktop version will not update the Mobile version and vice-versa. Both versions need to be edited and customized to be updated on all devices.
Desktop
Section 1
This section is contained in a dnd_area above the main navigation.
Section Styles
No styles have been applied.
Modules
| Utility Items | Utility Type: Skip Link Skip Link > Anchor: #body |
Section 2
This section is contained within a dnd_area for the main navigation which will be affected by transparency and sticky options available in the Page Settings module and the Theme Settings.
Section Styles
| Class | main-navigation |
Modules
| Section Options | Custom Columns |
| Custom Columns | { Number: 3 Margin > Desktop > Left: 20 Width > Desktop > 160px } |
| Content Type | Company Logo |
| Utility Items | Utility Type: Site Search |
| Styles > Dark Mode | true |
| Styles > Module > Alignment | Desktop: Right |
| Styles > Search > Search Type | Toggle |
| Navigation Type | Hamburger |
| Position | Dropdown |
| Hamburger Max Width | 0 |
| Mega Menu |
{ |
| Styles > Module > Alignment |
Desktop: Right |
| Styles > Dropdown > Dark Mode |
True |
| Styles > Dropdown > Alignment |
Center |
| Styles > Dropdown > Spacing > Padding |
Top: 100 |
Mobile
Section 1
This section is contained in a dnd_area above the main navigation.
Section Styles
No styles have been applied.
Modules
| Utility Items | Utility Type: Skip Link Skip Link > Anchor: #body |
Section 2
This section is contained within a dnd_area for the main navigation which will be affected by transparency and sticky options available in the Page Settings module and the Theme Settings.
Modules
| Content Type | Company Logo |
| Navigation Type | Hamburger |
| Position | Right |
| Mega Menu | { Column Width: 12 Row 1 > Content Type: Collapsible Menu Row 2 > Content Type: Site Search Row 3 > Content Type: Socials Spacing > Padding Top: 130 } |
| Styles > Module > Alignment | Desktop: Right |
| Styles > Dropdown > Dark Mode | true |