---
# System prepended metadata

title: Store Mode - Overlay issues with Native Nav Bar

---

# Store Mode - Overlay issues with Native Nav Bar 


### Flow to test:
* With Native Navigation bar - When overlay shows on PDP, tapping on Cart/search button and navigating next pages and come back to PDP, should not show overlay.
* With Native Navigation bar - When overlay shows on PDP, going back to previous page and coming back on PDP page, should not show overlay.
* On SM PDP/Cart, if overlay is showing, put app in background and bring it to foreground, it should show previous state means it should show overlay as it is.

### Issues: 
* Overlay cover's entire full page including nav bar intermittent/first visit to PDP page and page is not scrolled down. Also badge count shows above overlay. Still we can interact with nav bar CTA's
* on SM PDP, Scroll page down and tap on add to cart CTA, open half model with overlay below nav bar.
* On SM PDP, if overlay is shown, going next to cart/search page and coming back to pdp/cart pages, still shows overlay.
* On SM PDP/cart, if overlay is showing and its looks like overlay above nav bar but it isn't, tapping on mid of nav bar does not dismss overlay.
* SM Cart - Native nav bar, appearance need to keep translusant for checkout step-1/step2.
* SM cart - Overlay shows above nav bar, if we gone show overlay below nav bar then Cart overlay needs to fix to make experience consistent.

![](https://i.imgur.com/xJalEQT.png =150x400) ![](https://i.imgur.com/26Nvgnx.png =150x400)

---

![](https://i.imgur.com/ceNAJRE.png =150x400) ![](https://i.imgur.com/E0krUgo.png =150x400) ![](https://i.imgur.com/5Nq9SCe.png =150x400)

---

![](https://i.imgur.com/DHDoAmO.png =150x400) ![](https://i.imgur.com/o31HUbO.png =150x400) ![](https://i.imgur.com/Gj4iLLN.png =150x400)

---

![](https://i.imgur.com/6dPRn0e.png =150x400) ![](https://i.imgur.com/WB0QGcS.png =150x400)

---




### Issues with workarounds:
* With Native Navigation bar - If we use wizardLayoutPriority modifier, it just give fake view which looks like over the top of navigation bar but still Back/Cart/Search icons on nav bar interactive.
* With Native Navigation bar - Set overlay view set ignoreSafeArea(.top) modifier, it shows overlay on top of nav bar but still nav bar button items are interactive.


### Solutions to fix issues:
* Update Overlay with bottom safe ignore area only, overlay stops going above nav bar.
* On Pages where getting used, dismiss overlay on view's disappaer.
* SM cart, checkout step1/step2 - Remove .navigationBarColor modifire to convert nav bar to native one.
* Overengineering workaround to show overlay above nav bar, lot of things needs to take care like disabling nav bar CTA's for all places indivisually, Also dismiss scrollbar interaction on pages.
* On SM cart badge, if overlay under native nav bar then automatically this gets addressed.

### Experiement for Full overlay
* Run experiement for how to accomplish full cover overlay with native nav bar on different area's of app. List out complexities and issues around it in terms of code changes if overlay needs to add on different locations. - **Alex working on it**

