Hi, recently i have made my header transparent it works fine but i had an issue with the menu when i select currency i shows behind the menu itself on mobile.
norahpearls.shop
Topic summary
A user encountered a z-index layering issue where their currency dropdown menu appeared behind other elements on mobile after making the header transparent.
Solution Provided:
- Modify the
.disclosure__list-wrapper.country-selectorclass incomponent-localization-form.css - Add CSS properties including
position: fixed,z-index: 99,background: #fff, and full-width positioning - This fix successfully resolved the initial problem
Follow-up Request:
Another user asked how to relocate the currency selector from the menu tab to a more prominent position (beside the logo or search button) to improve visibility and accessibility for mobile users. This secondary question remains unanswered.
Hi @NHprpz
In component-localization-form.css file find the class .disclosure__list-wrapper.country-selector written inside a media query
and replace the css with
.disclosure__list-wrapper.country-selector {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: max-content;
max-height: 80vh;
border-radius: 0;
border: none;
box-shadow: none;
z-index: 99;
overflow: scroll;
background: #fff;
top: 0;
}
1 Like
Amazing! it works. Thank you
Hello! Can you help me with another problem? I want to put my currency selector beside the logo or the search button. Because it was put on the menu tab which is not efficient for customers and it’s very not noticeable for mobile users. I want the mobile users to see the currency selector on the header as soon as they visit the website so it could be easier. Hope for a help! Thank you sir!
