import styled from 'styled-components';
import Box from 'grommet/components/Box';
import GrommetHeader from 'grommet/components/Header';

export const DesktopNav = styled(Box)`
  display: none;
  @media(min-width: 880px) {
    display: flex;
  }
`;

export const MobileNav = styled(Box)`
  display: flex;
  @media(min-width: 880px) {
    display: none;
  }
  a {
    text-align: right;
  }
`;

export const Header = styled(GrommetHeader)`
  flex-direction: column;
  text-align: center;
  @media(min-width: 880px) {
    flex-direction: row;
  }
`;

@@ -438,107 +438,420 @@
 %60%0A  
-flex-direction: column;%0A  text-align: center;%0A  @media(min-width: 880px) %7B%0A    flex-direction: row;
+position: absolute;%0A  top: 0;%0A  left: 0;%0A  background: rgba(56, 66, 78, 0);%0A  flex-direction: column;%0A  text-align: center;%0A  padding: 0;%0A  height: auto;%0A  min-height: auto;%0A  %0A  .grommetux-heading %7B%0A    display: none;%0A  %7D%0A%0A  @media(min-width: 880px) %7B%0A    flex-direction: row;%0A    padding: 12px;%0A    min-height: 72px;%0A    background: rgba(56, 66, 78, 0.85);%0A%0A    .grommetux-heading %7B%0A      display: block;%0A    %7D
 %0A  %7D

Update header Nav styling.