diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index b14e3aede55a5bc562fda649a84d0ab849cb3739..d249aecd875716ba59235b5a4d309de0f17842e9 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -326,9 +326,12 @@ export default { </script> <style lang="less" scoped> -.menu.container a.header > img { - max-width: 140px; - max-height: 25px; +.menu.container a.header { + padding-top: 5px !important; + padding-bottom: 5px !important; + &> img { + max-height: 50px; + } } .vertical { @@ -366,13 +369,13 @@ export default { } } -@media screen and (max-width: 985px) { +@media screen and (max-width: 1110px) { .abstract{ display: none !important; } } -@media screen and (min-width: 560px) { +@media screen and (min-width: 726px) { .mobile { display: none !important; } @@ -387,27 +390,36 @@ export default { } } -@media screen and (max-width: 590px) { +@media screen and (max-width: 725px) { .desktop { display: none !important; } div.dropdown-list { width: 100vw; - left: -70px !important; /* should be the same than belows */ } .menu.container a.header { - width: 70px; - padding: 0 5px !important; + //width: 70px; + width: 100%; + } + #app-header { + /* make the logo disappear on scroll */ + position: sticky; + top: -110px; + height: 100px; + .menu.container { + /* make the logo disappear on scroll */ + height: 50px; + position: sticky; + top: 0; + } } - .menu.container a.header > img { margin: 0; margin: auto; max-width: 100%; } #menu-dropdown { - width: calc(100vw - 70px); - //justify-content: space-between; + width: 100%; } #menu-dropdown > span { text-overflow: ellipsis; @@ -430,6 +442,8 @@ export default { z-index: 1001; .menu.container .ui.inverted.icon.menu { /* avoid adding space when messages are displayed */ margin: 0; + display: flex; + flex-wrap: wrap; } } .ui.menu .ui.dropdown .menu {