Navigation

NOTE: Images below follow the old brand. However, the grid information is up to date.

The Mega Drop Down Menu is displaying the navigation which follow the grid.

Grid in Wide Desktop

  • Main navigation bar maximum width 890 px (= 4 content columns)
  • 3 text columns, each 256 px wide
  • 51 px margins in between text columns, containing a vertical dotted line
  • Banner column, 200 px wide
  • Fortum logo is on same level as the header links (from top)

Navigation grid - WD.png 

Navigation grid in Desktop

  • Main navigation bar width 930 px (= content width)
  • 3 text columns, each 218 px wide
  • 32 px margins in between text columns, containing a vertical dotted line
  • Banner column, 170 px wide
  • Fortum logo is on same level as the header links (from top)

 

Navigation grid -D.png 
 

 

Navigation grid in Tablet

  • Main navigation bar width 740
  • 3 text columns, each 218 px wide
  • 33 px margins in between text columns, containing a vertical dotted line
  • Fortum logo is on same level as the header links (from top)

Navigation grid - T.png 

 

Navigation grid in Mobile

  • Navigation width 100%
  • Text column width flows with browser window width, with 15 px left and right margins
  • 54 px column on right for sub-menu open/close

Navigation grid - M.png 

3/3/2017