Some EMBL selector content is large screen only

for #114 and #63
ebiwd · Oct 2, 2017 · e7b074e · e7b074e
1 parent fdc6635
commit e7b074e
Showing 1 changed file with 19 additions and 7 deletions.
diff --git a/css/ebi-global.scss b/css/ebi-global.scss
@@ -579,12 +579,21 @@ a:active {
       background: no-repeat 4px 50% url("../images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg");
       padding-left: 108px;
       background-size: 100px;
-      padding-right: 17px;
       height: 37px;
       line-height: 12px;
     }
     .button.hover,
     .button:hover { background-color: #888; }
+  }
+
+  // begin to hide bits of dropdown toggle as screen shrinks
+  @media screen and (max-width: 53em) {
+    .embl-selector .button { width: 0px; padding-right:0; overflow: hidden;}
+    .embl-selector .button:after { display: none; }
+    .masthead-black-bar nav ul.menu li a { padding-right: .5rem; padding-left: .5rem;}
+  }
+  @media screen and (min-width: 53.01em) {
+    // create triangle on larger screens
     .button[aria-expanded="false"]::after {
       content: '';
       display: block;
@@ -597,12 +606,15 @@ a:active {
       top: 18px;
       margin-left: 55px;
     }
-  }
-  // begin to hide bits of dropdown toggle as screen shrinks
-  @media screen and (max-width: 53em) {
-    .embl-selector .button { width: 0px; padding-right:0; overflow: hidden;}
-    .embl-selector .button:after { display: none; }
-    .masthead-black-bar nav ul.menu li a { padding-right: .5rem; padding-left: .5rem;}
+    .embl-selector {
+      .button,
+      .button.hover,
+      .button:focus,
+      .button:hover {
+        padding-right: 17px;
+      }
+    }
+
   }