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

Value of your Header Width

--v-header-color

Change the background color of your navigation + mobile

--v-header-box-shadow

Add a box shadow to the header

--v-link-color

Customize the color of the links in the navigation + mobile

--v-link-color-hover

Customize the hover color of the links in the navigation + mobile

--v-menu-item-bg

Customize the background color of the menu-items

--v-menu-item-bg-hover

Customize the background hover + active color of the menu-items

--v-menu-item-pad-x

Menu item padding on the X-axis

--v-menu-item-pad-y

Menu item padding on the Y-axis

--v-item-gap

Set a value for Gap here if you don't use padding on the menu items or if you want both

--v-icon-rotate

Rotate the icon while the sub-menu opens

HTML5 Tags & Attributes

No related HTML5 elements.

Accessibility Notes

No additional accessibility notes for this frame.

Related Frames

No related frames.

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.