celinesoeiro / responsible-header

Hoverable dropdown menu navigation

Header example #1

This is a simple responsive header example made using NextJS and Styled components.

Color Reference

Color	Hex
Primary color	#02040F
Secondary Color	#E5DADA
Tertiary Color	#002642
Quaternary Color	#2C3D55

Demo

Desktop version

Mobile version

Features

• Desktop:
  • Menu opens on hover
• Mobile:
  • Menu opens on click and closes if user clicks on any outside area
  • The menu has 100% of the screen width

Run Locally

Clone the project

  git clone https://github.com/celinesoeiro/header-example.git

Go to the project directory

  cd header-example

Install dependencies

  npm install

Start the server

  npm run start

and check it out on localhost