diff --git a/view/template/nav/_header.php b/view/template/nav/_header.php index 40808619..085adc2b 100644 --- a/view/template/nav/_header.php +++ b/view/template/nav/_header.php @@ -17,6 +17,12 @@ + + + Use on Web (lbry.tv) + + + Community ⌄ @@ -195,6 +201,7 @@ /> + lbry.tv Menu diff --git a/web/scss/_layout.scss b/web/scss/_layout.scss index d50540ba..8a8de622 100644 --- a/web/scss/_layout.scss +++ b/web/scss/_layout.scss @@ -186,11 +186,17 @@ input::placeholder { .hide { display: none; } + .hide--mobile { @media (max-width: 800px) { display: none; } } +.hide--desktop { + @media (min-width: 801px) { + display: none; + } +} .align-text--center { text-align: center; diff --git a/web/scss/components/_header.scss b/web/scss/components/_header.scss index c1a62bc3..c44402a7 100644 --- a/web/scss/components/_header.scss +++ b/web/scss/components/_header.scss @@ -75,8 +75,8 @@ .header__toggle { line-height: 5rem; - padding-right: 2rem; - padding-left: 2rem; + padding-right: 1.5rem; + padding-left: 1.5rem; position: absolute; right: 0; @@ -85,6 +85,18 @@ } } +.header--mobile-only { + @media (min-width: 951px) { + display: none; + } +} + +.header__lbrytv { + position: absolute; + right: 6rem; + z-index: 11; +} + search-container { display: inline-flex; height: 5rem;