Navigation

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 

4/21/2016