30 Header Styles for websites

A header is one of the prominent elements for website design. Headers facilitate easy navigation, plus a header is a great place for brand placement in the form of a logo. A lead magnet like an inline signup form or CTA is also added in headers.

Vikreed creates a wide variety of header designs with different functionalities. Here we have listed 30 of them, but the header layout, color combinations, elements used creates huge header styling combinations. Clients can choose the existing header styling option or ask for a combination of it.

Header styles are arranged as per devices; start with desktop version, then tablet and mobile.

Style 1

A monochromatic header style suits best for law-related websites. On the right side, we have a “Contact” CTA in contrast color, which grabs the attention.

Style 2

Again a monochromatic styled header where CTA follows the same color. This style goes well with books and reading clubs websites, where clients do not want too many decorative images and bright colors. This will also blend perfectly with the light beige background, which will give it more bookish vibes.

Style 3

Header with a light, pastel background and text-based logo. On the right side, it has social media icons.

Style 4

Gradient styles header with phone number CTA. CTA is clickable and invokes a calling app on mobile devices. Gradients styles are back in design trends in 2021 and not just for headers.

Style 5

Minimalistic header design doesn’t want to grab all of the attention, rather than giving it away to the hero section to catch eyeballs.

Style 6

Contrast-colored header style with a top bar, showing a phone number and “Join Us” CTA. Contents of the top bar can be changed to email, signup form, etc. Italics fonts are used in the header, which is a bit unconventional, but new-age agencies like to look apart from the crowd.

Style 7

Dark header with the white navigation menu and search button. Search CTA is a good option for websites having a large amount of content that can not fit on homepages and few services pages. A search page can be designed to group results based on different categories and content types.

Style 8

White background header with light, pastel-colored CTA suits for not-for-profit websites.

Style 9

The two-row header style fits well for larger navigations/menus that generally will not fit in a single row header.

Style 10

A Dark-themed header with a prominent search widget is suited for content-heavy websites like news, magazine, recipes website, etc.

Style 11

A simple and clean header style that goes with any corporate/business website. The contrast color strategy is not used for CTA. Still, it gets attention.

Style 12

Again a clean design with menu and search widget. The active link gets a peppy accent color, and the menu click is animated with an underline.

Style 13

Header style that suits corporate website, showcasing contact information prominently. Icons for contact points can be changed individually too. An active page link is highlighted with an accent color background; it gives clear navigational inputs to the reader.

Style 14

3-row header design; with a top, logo, and navigation row. A good choice for those who want visitors to focus on the logo, want to give it its own space. Active page links get top and bottom border lines, which are animated on click.

Style 15

A header design prominently showcases contact touchpoints like phone number, email, working time, and social media account links. A contrast background color is used for the topbar than the menu row to get the attention.

Style 16

A simple and clean design that suits light-themed websites.

Style 17

Minimalistic black header design which is not promoting menu, contact information upfront. After clicking the hamburger menu, navigation links slides are from the right part of the screen.

Style 18

Vividly colored social media icons grab the attention in this header style. It’s a good choice for personal websites or bloggers who wants to promote their social media accounts.

Style 19

A minimalistic style where the logo is centered. The hamburger menu is on the left side, which slides in from the left or top on click. The search widget is on the right side of the header.

Style 20

A monochromatic text-based header design where icons and imagery are avoided. It’s good for text-heavy, minimal websites that want readers to focus on content. Writers and bloggers like such simple headers.

Style 21

Menu style best suits restaurant and food-related websites. Black and red shades carry that Chinese, Thai, Vietnamese restaurant vibe.

Style 22

An elegant 2-row header design showcasing contact information, search, social media account, and CTA. Client with heavy content, a large number of services, etc., prefer such headers style.

Style 23

A clean and neat header with phone number CTA that gets eyeballs. A good fit for phone-based or emergency services like food delivery, ambulance, vehicle towing service, etc.

Style 24

This header style focuses on email subscription and wants users to know that they have an online shop.

Style 25

A clean header style that suits resume websites. A suitable icon is used to carry that resume website theme.

Style 26

Dark theme header for new agencies that promote business on social media like Facebook, Instagram, etc.

Style 27

A header styled designed based on minimalism principles. It says less is more, that philosophy is aptly adapted for this header design.

Style 28

White-themed header with light text logo, a good match for clinics websites which generally have light-colored themes with green or blue accents.

Style 29

A simple, clean header design with no frills. Hamburger menu with pastel accent color add life yet maintains elegance. It’s a good fit for websites with freshness-related themes like flowers, marine, or aquatic life.

Style 30

Again a clean and minimal header design.

About Author

Sorry, Comments are closed!