diff --git a/themes/grav-theme-howto/css/media-queries.css b/themes/grav-theme-howto/css/media-queries.css index 0bdb2311c..22e941a91 100644 --- a/themes/grav-theme-howto/css/media-queries.css +++ b/themes/grav-theme-howto/css/media-queries.css @@ -1,12 +1,6 @@ -@media (min-width:1201px) { - -} - -@media (max-width: 1200px) and (min-width:901px) { - -} - -@media (max-width: 1040px) { +/* screenwidth less than 1000px +------------------------------------*/ +@media only screen and (max-width: 1150px) { body { font-size: 85%; } @@ -23,7 +17,10 @@ } } -@media only screen and (max-width: 767px) { +/* mobile wide/smaller tablets +------------------------------------*/ + +@media only screen and (max-width: 830px) { .narrow{ max-width: 100%; @@ -56,7 +53,6 @@ height: 48px; text-align: left; background: #50162D; - position: relative; border: none; float: right; text-shadow: none; @@ -125,13 +121,88 @@ } -@media (max-width: 900px) and (min-width:601px) { + .language-selector { + position: fixed; + top: -10px; + right: 80px; + width: 50px; + } + + .language-selector .btn { + top: 35px; + font-size: 1.2rem; + padding: 19px 15px; + } + + .language-selector ul#langSelectorList { + position: absolute; + top: 50px; + right: 0; + } + + .language-selector .btn i { + top: 40px; + right: 20px; + } + + .language-selector .dropdown-menu { + right: 150px; + top: 200px; + color: #b9a2ab; + background-color: #50162D; + border-color: #50162D; + font-size: 1.1rem; + } + + .language-selector .dropdown-menu>li>a { + padding: 12px 15px; + } } -@media (max-width: 600px) { + +/* mobile narrow + ------------------------------------*/ + +@media only screen and (max-width: 600px) { + + /* Language menu*/ + + .language-selector { + position: fixed; + top: -10px; + right: 80px; + width: 50px; + } + + .language-selector .btn { + top: 35px; + font-size: 1.2rem; + padding: 19px 15px; + } + + .language-selector ul#langSelectorList { + position: absolute; + top: 50px; + right: 0; + } + + .language-selector .btn i { + top: 40px; + right: 20px; + } + + .language-selector .dropdown-menu { + right: 150px; + top: 200px; + color: #b9a2ab; + background-color: #50162D; + border-color: #50162D; + font-size: 1.1rem; + } + + .language-selector .dropdown-menu>li>a { + padding: 12px 15px; + } } - -@media (max-width: 400px) { -} diff --git a/themes/grav-theme-howto/css/style.css b/themes/grav-theme-howto/css/style.css index 83a4c8ed6..cf474b9a7 100644 --- a/themes/grav-theme-howto/css/style.css +++ b/themes/grav-theme-howto/css/style.css @@ -194,6 +194,9 @@ a:hover { /* Menu Settings */ +.main-nav { +} + .main-nav ul { display: flex; justify-content: space-between; @@ -286,8 +289,37 @@ a:hover { .language-selector .btn { position: relative; top: 20px; + color: #b9a2ab; + background-color: #50162D; + border-color: #50162D; + font-size: 1.2rem; } +.language-selector .btn i { + position: absolute; + top: 25px; + right: 15px; +} + +.language-selector .dropdown-menu { + color: #b9a2ab; + background-color: #50162D; + border-color: #50162D; + top: 20px; + font-size: 1.1rem; +} + +.language-selector .dropdown-menu li:hover { + background-color: #8EB726; +} + +.language-selector .dropdown-menu>li>a { + color: #b9a2ab; +} + +ul#nav li a:hover { color: #FFFFFF; opacity: 1;} + + /* Volor bar */ .body-top { width: 100%; diff --git a/themes/grav-theme-howto/templates/partials/navigation.html.twig b/themes/grav-theme-howto/templates/partials/navigation.html.twig index ffb33802a..9bd791b3b 100644 --- a/themes/grav-theme-howto/templates/partials/navigation.html.twig +++ b/themes/grav-theme-howto/templates/partials/navigation.html.twig @@ -23,10 +23,10 @@ {% endmacro %} Show navigation Hide navigation -{% include 'partials/language-selector.html.twig' %}