diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 1fcabd22..47e63098 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -18,7 +18,6 @@ const Wrapper = styled.header`
width: 100%;
height: 52px;
background: ${colors.HEADER};
- overflow: hidden;
z-index: 200;
`;
@@ -65,21 +64,43 @@ const TogglerText = styled.div`
`;
+const TREZOR = styled.div``;
+const T = styled.div``;
+
const Logo = styled.div`
flex: 1;
justify-content: flex-start;
display: flex;
+ ${T} {
+ display: none;
+ width: 20px;
+ }
+
+ ${TREZOR} {
+ width: 100px;
+ }
+
svg {
fill: ${colors.WHITE};
height: 28px;
- width: 100px;
}
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
flex: 1 0 33%;
justify-content: center;
}
+
+ @media screen and (max-width: ${SCREEN_SIZE.XS}) {
+ /* hides full width trezor logo, shows only trezor icon */
+ ${TREZOR} {
+ display: none;
+ }
+
+ ${T} {
+ display: inherit;
+ }
+ }
`;
const MenuLinks = styled.div`
@@ -169,15 +190,22 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
-
+
+
+
+
+
+