[FINNA-2636] Fix mobile toolbar.

NatLibFi · Oct 24, 2024 · 0469bd9 · 0469bd9
1 parent 82c0d3b
commit 0469bd9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/themes/finna2/less/finna/mobile-toolbar.less b/themes/finna2/less/finna/mobile-toolbar.less
@@ -119,11 +119,14 @@
       }
     }
   }
-  section.template-name-results .sidebar,
-  section.template-name-search .sidebar,
-  section.template-name-blended .sidebar,
-  section.template-name-mylist .sidebar,
-  section.template-dir-collection.template-name-view .sidebar {
+}
+
+section.template-name-results .sidebar,
+section.template-name-search .sidebar,
+section.template-name-blended .sidebar,
+section.template-name-mylist .sidebar,
+section.template-dir-collection.template-name-view .sidebar {
+  @media (max-width: @screen-xs-max) {
     position: fixed;
     background: @body-bg;
     z-index: @zindex-sidebar;
@@ -154,8 +157,10 @@
       }
     }
   }
-  .mobile-navigation {
-    &:extend(.mobile-toolbar);
+}
+.mobile-navigation {
+  &:extend(.mobile-toolbar);
+  @media (max-width: @screen-xs-max) {
     left: 0;
     z-index: 60;
     i {
@@ -179,7 +184,9 @@
       max-width: 55%;
     }
   }
-  .finna-search-filter-toggle {
+}
+.finna-search-filter-toggle {
+  @media (max-width: @screen-xs-max) {
     position: sticky;
     top: @navbar-height;
     margin-left: -calc(@grid-gutter-width / 2);

diff --git a/themes/finna2/scss/finna/mobile-toolbar.scss b/themes/finna2/scss/finna/mobile-toolbar.scss
@@ -119,11 +119,14 @@
       }
     }
   }
-  section.template-name-results .sidebar,
-  section.template-name-search .sidebar,
-  section.template-name-blended .sidebar,
-  section.template-name-mylist .sidebar,
-  section.template-dir-collection.template-name-view .sidebar {
+}
+
+section.template-name-results .sidebar,
+section.template-name-search .sidebar,
+section.template-name-blended .sidebar,
+section.template-name-mylist .sidebar,
+section.template-dir-collection.template-name-view .sidebar {
+  @media (max-width: $screen-xs-max) {
     position: fixed;
     background: $body-bg;
     z-index: $zindex-sidebar;
@@ -154,8 +157,10 @@
       }
     }
   }
-  .mobile-navigation {
-    @extend .mobile-toolbar;
+}
+.mobile-navigation {
+  @extend .mobile-toolbar;
+  @media (max-width: $screen-xs-max) {
     left: 0;
     z-index: 60;
     i {
@@ -179,7 +184,9 @@
       max-width: 55%;
     }
   }
-  .finna-search-filter-toggle {
+}
+.finna-search-filter-toggle {
+  @media (max-width: $screen-xs-max) {
     position: sticky;
     top: $navbar-height;
     margin-left: -calc(#{$grid-gutter-width} / 2);