diff --git a/CHANGELOG.md b/CHANGELOG.md index 31eb103003..2816a09edb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Open correct product page tabs when URL contains a fragment identifier referring to that content [#1304](https://github.com/bigcommerce/cornerstone/pull/1304) - Display product reviews in tabbed content region of product page. [#1302](https://github.com/bigcommerce/cornerstone/pull/1302) - Show bulk discounts only if enabled through store settings. [#1310](https://github.com/bigcommerce/cornerstone/pull/1310) +- Corrects mini cart display issues [#1298](https://github.com/bigcommerce/cornerstone/pull/1298) - Style active section in search results. [#1316](https://github.com/bigcommerce/cornerstone/pull/1316) - Fix blog_post import statement in app.js [#1301](https://github.com/bigcommerce/cornerstone/pull/1301) - Show carousel dots only when carousel has more than one slide. [#1319](https://github.com/bigcommerce/cornerstone/pull/1319) diff --git a/assets/scss/components/stencil/navUser/_navUser.scss b/assets/scss/components/stencil/navUser/_navUser.scss index 614f04c07e..84516890a1 100644 --- a/assets/scss/components/stencil/navUser/_navUser.scss +++ b/assets/scss/components/stencil/navUser/_navUser.scss @@ -9,6 +9,10 @@ // 4. Needs to be 100% so its dropdown can take full width in mobile viewport // 5. Needs to be lower than logo zIndex, otherwise, logo is not clickable // 6. Make the triangle for currency dropdown right aligned +// 7. Corrects mini cart positioned outside viewport. Since this resets right +// position, nudge dropdown away from the side of viewport in mobile viewport. +// 8. This corrects mini cart dropdown arrow alignment in mobile viewport by +// setting the previous styles to medium breakpoint and adjusts for nudge in (7). // // ----------------------------------------------------------------------------- @@ -62,6 +66,12 @@ } } +.navUser-section { + @include breakpoint("medium") { + position: relative; // 7 + } +} + .navUser-action { color: stencilColor("navUser-color"); font-weight: fontWeight("bold"); @@ -167,17 +177,30 @@ // scss-lint:disable NestingDepth &.is-open { + top: auto !important; // 7 + left: auto !important; // 7 + right: remCalc(5px); // 7 + @include breakpoint("medium") { + right: 0; // 7 + } + &:before, &:after { left: auto; } &:before { - right: spacing("half"); + right: spacing("half") - remCalc(5px); // 8 + @include breakpoint("medium") { + right: spacing("half"); // 8 + } } &:after { - right: spacing("half") + remCalc(2px); + right: spacing("half") - remCalc(3px); // 8 + @include breakpoint("medium") { + right: spacing("half") + remCalc(2px); // 8 + } } } }