Drop down style

Store Design
,
1

Hi guys, I’m having a little issue styling the mobile currency selector correctly.

Here is example: Here

There are 2 issues:

  1. Its expanding down which is not very user friendly - id like it to expand up
  2. Its too close to the left side, need to move it a little to the right so there is normal gap.

Could you help me out to style it properly?

image
image684×1348 55.5 KB

Here is the code used:

<div class="mobile-selectors selectors-form__item">

  {% form 'localization' %}

    <div class="disclosure custom-dropdown-mobile" style="position: relative;">

      

      <!-- Selector Button -->

      <button type="button" class="disclosure__toggle" aria-expanded="false"

              onclick="

                event.preventDefault();

                event.stopPropagation();

                var list = this.nextElementSibling;

                var expanded = this.getAttribute('aria-expanded') === 'true';

                this.setAttribute('aria-expanded', expanded ? 'false' : 'true');

                if(!expanded) {

                  list.classList.add('disclosure-list--visible');

                } else {

                  list.classList.remove('disclosure-list--visible');

                }

              "

              style="display: flex; align-items: center; border: 0; gap: 6px;">




        <!-- 🌍 Original globe SVG (unchanged) -->

        <svg xmlns="
"

             viewBox="0 0 64 64"

             width="20" height="20"

             fill="none"

             stroke="#e8af02"

             stroke-width="2"

             stroke-miterlimit="10"

             style="flex-shrink: 0;">

          <path d="M32.001,0.887c17.184,0,31.113,13.929,31.112,31.113

                   C63.114,49.185,49.184,63.115,32,63.113

                   C14.815,63.114,0.887,49.185,0.888,32.001

                   C0.885,14.816,14.815,0.887,32.001,0.887z"/>

          <line x1="32" y1="1" x2="32" y2="63"/>

          <line x1="63" y1="32" x2="1" y2="32"/>

          <path d="M30,1c0,0-14,11-14,31s14,31,14,31"/>

          <path d="M34,1c0,0,14,11,14,31S34,63,34,63"/>

          <path d="M8,12c0,0,5,10,24,10s24-10,24-10"/>

          <path d="M8,52c0,0,5-10,24-10s24,10,24,10"/>

        </svg>




        <!-- ✅ Current Currency -->

        {{ localization.country.currency.iso_code }} ({{ localization.country.currency.symbol }})

        <span class="navmenu-arrow-toggle"><span class="navmenu-arrow"></span></span>

      </button>




      <!-- ✅ Currency List -->

      <ul class="disclosure-list" style="bottom: auto; top: 115%; left: auto; right: 5%;">

        {% for country in localization.available_countries %}

        <li>

          <button type="button"

                  class="disclosure-list__item{% if country.iso_code == localization.country.iso_code %} disclosure-list__item--current{% endif %}"

                  data-value="{{ country.iso_code | escape }}"

                  onclick="

                    var form = this.closest('form');

                    form.querySelector('[name=country_code]').value = this.getAttribute('data-value');

                    form.submit();">

            

            <span class="disclosure-list__option">

              {{ country.name }} • <strong>{{ country.currency.symbol }}</strong> • {{ country.currency.iso_code }}

            </span>

          </button>

        </li>

        {% endfor %}

      </ul>




      <!-- ✅ Hidden Input -->

      <input type="hidden" name="country_code" value="{{ localization.country.iso_code | escape }}"/>

    </div>

  {% endform %}

</div>




<!-- Click Outside Handler (unchanged) -->

<script>

  if (!window.mobileLangDropdownInitialized) {

    window.mobileLangDropdownInitialized = true;

    document.addEventListener('click', function(e) {

      document.querySelectorAll('.custom-dropdown-mobile').forEach(function(container) {

        if (!container.contains(e.target)) {

          var btn = container.querySelector('.disclosure__toggle');

          var list = container.querySelector('.disclosure-list');

          if (btn && list) {

            btn.setAttribute('aria-expanded', 'false');

            list.classList.remove('disclosure-list--visible');

          }

        }

      });

    }, true);

  }

</script>
2

Do you make use of a built in Shopify app of a currency converter at the Shopify app, or is it custom code to generate the currency converter ?

3

This is a theme provided selector that I had to modify to change its location from bottom-page to mobile menu header.

5

Please paste this code in your css file

ul.disclosure-list.disclosure-list--visible {
top: unset !important;
right: -1% !important;
bottom: 100% !important;
}

let us know if this works for you else will provide different solution

6

Hello justinasR, Have you sort it out ?

7

that worked thanks! this is now solved