Vertical Header Alpha

overview

A clean vertical header with branding, navigation, and social icons.

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

Vertical headers aren’t very common, but some projects do demand them. This situation can fill some developers with dread because vertical headers aren’t easy to pull off and add a lot of development complications to the project.

That’s where Vertical Header Alpha saves the day. Drop this vertical header into your main header template, style it up, and you’re done. Vertical Header Alpha fixes all the everyday challenges of using a vertical header throughout a website.

Note: A JS snippet is required for this header to work. Make sure you activate the code block that is added in this frame.

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

--v-header-width

--v-header-color

--v-header-box-shadow

--v-link-color

--v-link-color-hover

--v-menu-item-bg

--v-menu-item-bg-hover

--v-menu-item-pad-x

--v-menu-item-pad-y

--v-item-gap

--v-icon-rotate

Related Frames

No related frames.

Related Components

No related components.

FAQs

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.