Vertical Header Alpha


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

Vertical Header Alpha
Available for:
Buy Frames
Back to library


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.


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.

Value of your Header Width


Change the background color of your navigation + mobile


Add a box shadow to the header


Customize the color of the links in the navigation + mobile


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


Customize the background color of the menu-items


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


Menu item padding on the X-axis


Menu item padding on the Y-axis


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


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.


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