fixing tablet view topbar nav

I removed the 8% left and right padding on the anchors in a media query
and replaced it with .5em.  It seems to not be causing and issue as I do
cross browser testing.

diff --git a/css/app.css b/css/app.css
index 7f90357..8935bd3 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6401,7 +6401,7 @@ header.main {
       line-height: 4.1875rem; }
     @media screen and (max-width: 963px) {
       .top-bar-section ul li:not(.has-form):not(.active) > a:not(.button) {
-        padding: 0 8%; } }
+        padding: 0 .5em; } }
     @media screen and (max-width: 840px) {
       .top-bar-section ul li:not(.has-form):not(.active) > a:not(.button) {
         font-size: 137.5%; } }
@@ -6417,7 +6417,7 @@ header.main {
       background: #044a70; }
     @media screen and (max-width: 963px) {
       .top-bar-section ul li.active:not(.has-form) > a:not(.button) {
-        padding: 0 8%; } }
+        padding: 0 .5em; } }
     @media screen and (max-width: 840px) {
       .top-bar-section ul li.active:not(.has-form) > a:not(.button) {
         font-size: 137.5%; } }

diff --git a/scss/_topbar.scss b/scss/_topbar.scss
index 39736d0..7841557 100644 (file)
--- a/scss/_topbar.scss
+++ b/scss/_topbar.scss
@@ -96,7 +96,7 @@
                         line-height: rem-calc(67);
                     }
                     @media screen and (max-width: 963px) {
-                        padding: 0 8%;
+                        padding: 0 .5em;
                     }
                     @media screen and (max-width: 840px) {
                         font-size: 137.5%;
@@ -104,8 +104,8 @@
                     @media screen and (max-width: 773px) {
                         font-size: 112.5%;
                     }
-                    }
                 }
+            }
             &.active:not(.has-form){
                 &:hover {
                     max-height: rem-calc(71);
@@ -120,7 +120,7 @@
                         background: $d-blue;
                     }
                     @media screen and (max-width: 963px) {
-                        padding: 0 8%;
+                        padding: 0 .5em;
                     }
                     @media screen and (max-width: 840px) {
                         font-size: 137.5%;
@@ -128,8 +128,8 @@
                     @media screen and (max-width: 773px) {
                         font-size: 112.5%;
                     }
-                    }
                 }
+            }
             &.has-dropdown {
                 &:hover {
                     max-height: rem-calc(69);