Navigation menu

The navigation menu will be fixed on top of every page on our website so it will always be visible. It will provide access to every  important content page from the site.

There are two main blocks on the menu: the Wayra logo and the navigation items. The light version, which is for the hubs’ webs, will also show the “Apply” button on the right side.

navbar light and dark example
Navigation bar

This will be the container of the menu elements. It can be dark or light themed depending on the needs.

  • Height: 75px
  • Background color: #2B2D30/white
  • Width: 100%
Wayra logo

The Wayra logo must be on the left side. On the right side will be the navigation items.

  • Height: 70px
  • Color: #2B2D30/ #FFFFFF
Apply button

The “Apply” button must be on the right side. It will have the same height as the navigation bar (75px). It will show the following status:

Fill: #00EDFF
Text: 20px Telefónica Cap, centered, #2B2D30
Fill: #AAF7FF
Text: 20px Telefónica Cap, centered, #2B2D30
Focus and selected
Fill: #00EDFF
Text: 20px Telefónica Cap, centered, #FFFFFF
Apply button demonstration
Navigation menu levels

There will be preferably no more than 5 elements on the menu. These elements can have a second level whose elements can be arranged in groups.

The group tag (the first level on the dropdown) will take us to an equally-named landing. The second level will work as an anchor to every section of that landing (again, equally named).