The data-position attribute allows you to control where the secondary nav is placed. The possible values are ‘top’, ‘bottom’, ‘center’ or ‘section’.

top is the default value and will place the secondary nav above the main nav.

bottom will place the secondary nav below the main nav.

center will place the secondary nav within the main nav, splitting the main nav on the left, logo in the center, and the secondary nav on the right. You’ll need to adjust the Header Layout (Edit a Page » Edit Site Header » Desktop Icon), to the option with the main nav items on the left, logo in the middle, and CTA button on the right. This method will remove any social links and the CTA you have in the header for spacing purposes. Left / Right alignment adjustments available in the Custom CSS section below.

section will keep the secondary nav in a section. You’ll need to place the code above within a code block on whatever section you want to become the secondary nav. Sticky is automatically turned on when this setting is used and this section will stick to the top of the screen (or bottom of your header) as a user scrolls down. Note - this option cannot be used on collection pages.