fix: pfe-navigation cta overlap bug (#766)

* set ie grid rows and columns, set justify-content space-between for ctas
* increased padding in tray footer to 40px top and bottom
* fixed spacing beneath ctas in the tray
* Removed the second grid row from the nav footer
* set nav footer columns to flex display
* Updated changelog.
Co-authored-by: [ Cassondra ] <[email protected]>

Author: chrisdo1

CHANGELOG-prerelease.md

@@ -2,7 +2,8 @@
 
 Tag: [v1.0.0-prerelease.40](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.40)
 
-- [ ]( ) fix: Prevent default pfe-cta arrow from wrapping to a new line by itself (#679)
+- [7deb9bb](https://github.com/patternfly/patternfly-elements/commit/7deb9bb6227c0560b60a665ecd43b450db0f90e1) fix: Prevent default pfe-cta arrow from wrapping to a new line by itself (#679)
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-navigation cta overlap bug in IE11 (#766)
 
 
 ## Prerelease 39 ( 2020-02-19 )

elements/pfe-navigation/src/pfe-navigation--lightdom.scss

@@ -166,6 +166,12 @@ $variables: map-merge($variables, $nav-light-dom-variables);
     pfe-navigation [slot="logo"] {
         max-width: 100%;
     }
+    .pfe-navigation--footer .pfe-navigation--column {
+        @media (min-width: #{pfe-breakpoint(md)}) {
+            display: flex;
+            align-items: center;
+        }
+    }
 }
 
 @include browser-query(edge) {
@@ -270,6 +276,12 @@ $variables: map-merge($variables, $nav-light-dom-variables);
     .pfe-navigation__logo {
         margin-right: 20px; // Account for collapsed padding-right: 20px;
     }
+    .pfe-navigation--footer .pfe-navigation--column {
+        @media (min-width: #{pfe-breakpoint(md)}) {
+            display: flex;
+            align-items: center;
+        }
+    }
 }
 
 pfe-navigation [slot="logo"] {
@@ -380,49 +392,44 @@ pfe-navigation-item {
         }
     }
     &--footer:not(:empty) {
-        margin:   calc(#{pfe-var(container-spacer, $fallback: 16px)} * 2) 0 10px !important;
+        margin:   calc(#{pfe-var(container-padding, $fallback: 16px)} * 2) 0 calc(#{pfe-var(container-padding, $fallback: 16px)} * 1.5);
         border-top: 1px solid lightgray;
-        padding:   calc(#{pfe-var(container-spacer, $fallback: 16px)} * 2) 0 0;
+        padding:   calc(#{pfe-var(container-padding, $fallback: 16px)} * 2.5) 0 0;
 
         >*:not(:last-child) {
             margin-bottom: 32px;
         }
 
         >* {
-            flex: 45%;
+            flex: 0 1 45%;
         }
 
         @media (min-width: #{pfe-breakpoint(sm)}) {
             display: flex;
             flex-wrap: wrap;
-            align-items: baseline;
+            align-items: center;
+            justify-content: space-between;
 
             >*:not(:last-child) {
                 margin-bottom: 0;
             }
 
-            >*:nth-child(3) {
+            >*:nth-child(3),
+            >*:nth-child(4) {
                 margin-top: 32px;
             }
         }
 
+        @media (min-width: #{pfe-breakpoint(md)}) {
+            justify-content: flex-start;
+        }
+
         @media (min-width: #{pfe-breakpoint(lg)}) {
             // Not setting grid prefix here since IE doesn't support auto-flow
             display: grid;
             grid-gap: 32px;
             grid-auto-flow: column;
-
-            >*:nth-child(3) {
-                margin-top: 0;
-            }
-        }
-
-        @media (min-width: #{pfe-breakpoint(xl)}) {
-            padding-bottom: 0;
-            display: -ms-grid;
-            grid-template-columns: repeat(4, 1fr);
             -ms-grid-columns: 1fr 1fr 1fr 1fr;
-            align-items: center;
 
             .pfe-navigation--column:nth-child(1) {
                 -ms-grid-column: 1;
@@ -438,8 +445,20 @@ pfe-navigation-item {
 
             .pfe-navigation--column:nth-child(4) {
                 -ms-grid-column: 4;
+            }               
+
+            >*:nth-child(3),
+            >*:nth-child(4) {
+                margin-top: 0;
             }
         }
+
+        @media (min-width: #{pfe-breakpoint(xl)}) {
+            padding-bottom: 0;
+            display: -ms-grid;
+            grid-template-columns: repeat(4, 1fr);
+            -ms-grid-columns: 1fr 1fr 1fr 1fr;
+        }
     }
 }