Header Section Layouts

header 1

The image shows the header section that appears at the top of each page, shown boxed in red.

The header section of a web page is a crucial component that typically appears at the top of the page and contains essential information and navigation elements. It often includes the website’s logo, primary navigation menu, search bar, and sometimes contact information or social media links.

The header sets the tone for the site’s branding and helps users quickly understand the website’s purpose and how to navigate it. A well-designed header enhances user experience by providing easy access to key areas of the site and ensuring a cohesive and professional look across all pages.

Feel free to explore the examples below and find the perfect header design that fits your requirements.

What Does a Header Contain?

  • Logo or Brand Name
    Often, the header includes a logo or the name of the website, which serves as a visual identifier for the site. This is usually clickable and takes users back to the homepage.
  • Navigation Menu
    Most headers contain a navigation menu with links to the main sections or pages of the website, such as Home, About, Services, Blog, Contact, etc.
  • Search Bar
    A search bar is often included in the header to allow users to search for specific content within the site quickly.
  • Contact Information
    Some headers may include contact details like a phone number, email address, or even social media icons.
  • Call to Action (CTA)
    Headers may feature buttons or links to prompt users to take specific actions, such as signing up, logging in, or making a purchase.
  • User Account Links
    For websites that require user accounts, the header might include links for logging in, signing up, or accessing the user profile.
  • Language or Region Selector
    For global websites, a language or region selector may be present to cater to an international audience.

Characteristics and Behaviours of a Menu

  • Dropdown Menus
    Dropdown menus reveal a list of links when a user hovers over or clicks on a main navigation item. These menus are typically smaller and more compact compared to mega menus.
  • Mega Menus
    Mega menus are large, expandable menus that appear when a user hovers over or clicks on a main navigation item. Unlike traditional dropdown menus, mega menus often display multiple levels of hierarchy in a single, extensive panel displaying rich content.
  • Responsive Behavior
    On smaller screens, the menu collapses into a hamburger icon, which, when clicked, expands the full menu.
  • Sticky Menus
    The menu remains visible at the top of the screen as the user scrolls down the page.
  • Highlighting
    The hovered menu item changes color, background, or style to indicate it’s active.
  • Touch Interaction
    On touch devices, tapping a menu item opens the submenu.

Section 1

header section

The mobile view

header section

The desktop view

Notes:

  • On a desktop, this header contains two sections, the top section displays the contact information and social media links. The bottom section contains the logo, navigation and a getting started button.
  • On a mobile, just one section is displayed with the logo on the left and the hamburger menu button on the right. Click the hamburger menu to display the menu.

View in a browser:

  • Please click the button below to see the page section in a browser, scroll down to find the correct section.
  • If on a desktop, try narrowing the browser window to see section in mobile view.
View in a Browser

Section 2

header section 2 mobile original

The mobile view

header section 2 desktop original 1

The desktop view

Notes:

  • On a desktop, this header is displayed centrally with the logo in the centre and menu options to it’s left and right.
  • Note that on a desktop the header background is transparent and placed over the hero image, please click the ‘view in a browser’ button to see the full effect.
  • On a mobile, just one section is displayed with the logo on the left and the hamburger menu button on the right. Click the hamburger menu to display the menu.

View in a browser:

  • Please click the button below to see the page section in a browser, scroll down to find the correct section.
  • If on a desktop, try narrowing the browser window to see section in mobile view.
View in a Browser

Section 3

header section 3 mobile original

The mobile view

header section 3 desktop original

The desktop view

Notes:

  • On a desktop, this header contains two sections, the top section displays important links on the left and the login link plus social media links on the right. The bottom section contains the logo, navigation and a getting started button.
  • On a mobile, just one section is displayed with the logo on the left and the hamburger menu button on the right. Click the hamburger menu to display the menu.

View in a browser:

  • Please click the button below to see the page section in a browser, scroll down to find the correct section.
  • If on a desktop, try narrowing the browser window to see section in mobile view.
View in a Browser

Section 4

header on page section 4 mobile sized

The mobile view

header on page section 4 desktop sized

The desktop view

Notes:

  • On a desktop, this header is displayed centrally with the logo on the left and the navigation and phone number are on the right.
  • On a mobile, just one section is displayed with the logo on the left and the hamburger menu button on the right. Click the hamburger menu to display the menu.

View in a browser:

  • Please click the button below to see the page section in a browser, scroll down to find the correct section.
  • If on a desktop, try narrowing the browser window to see section in mobile view.
View in a Browser