Header - Dropdowns
Standard header with logo, dropdown navigation, search, and a call to action.
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