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
| Content Type | Company Logo |
| Navigation Type | Flyout |
| Menu Type | Simple |
| Styles > Module > Alignment | Desktop: Right |
| Styles > Main Links > Dark Mode | true |
| Styles > Dropdown > Dark Mode | true |
| Utility Items | Utility Type: Site Search, Utility Type: Button |
| Styles > Dark Mode | true |
| Styles > Module > Alignment | Desktop: Right |
| Styles > Search > Search Type | Toggle |
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 > Main Links > Dark Mode | true |
| Styles > Dropdown > Dark Mode | true |