Moving Debut's Currency Selector to the Header

Highlighted
Tourist
4 0 1

yes, but it only shows the option in the footer, so I have it selected there... but nothing else :(

0 Likes
Highlighted
Tourist
6 0 7

It's actually there on your site, but it's white. My header is black I forgot I changed that, I'll edit the CSS code.

currency.jpg

 

 

 

Edit: looks like I can't edit the original post anymore, so I'll put the CSS here:

/*================ Currency selector ================*/
.currency-selector {
  @include media-query($small) {
    @include display-flexbox();
    @include align-items(center);
    background-color: transparentize($color-body-text, 0.90);
    padding: 12px 17px 12px 30px;
  }
}

.currency-selector__label {
  font-size: em(12);
  margin-bottom: 0;
  text-transform: uppercase;
}

.currency-selector__input-wrapper {
  margin-top: 4px;

  @include media-query($small) {
    margin-top: 0;
    width: 100%;
  }

  .icon {
    left: auto;
    height: 10px;
    margin: 0;
    width: 12px;

    @include media-query($medium-up) {
      height: calc(8em / 16);
      right: 5px;
      width: calc(8em / 16);
    }
  }
}

.currency-selector__dropdown {
  border: none;
  color: $color-text;
  padding-left: 8px;
  padding-right: 17px;

  @include media-query($small) {
    font-size: em(12);
    font-weight: $font-weight-body--bold;
    width: 100%;
  }
}

Just replace the code in theme.scss.liquid you put in earlier with this one.

2 Likes
Tourist
4 0 1

Thank you so much! amazing!!!!

1 Like
Highlighted
New Member
1 0 1

Super helpful, thank you! One question though, it appears it might only be showing on desktop view. How can I get it to appear in mobile view as well? Cheers for the help mate!

1 Like
Highlighted
Tourist
6 0 7

It should work on mobile as well. If you check our site truevits.uk it's at the bottom of the hamburger menu.

0 Likes
Highlighted
Tourist
6 0 7

Looks like I missed a bit of code for the mobile selector. Inside header.liquid, scroll down to the </header> tag, then just above the </ul>, after the {%endfor%}, paste this:

 

<!-- mobile currency selector -->	
        {% if shop.enabled_currencies.size > 1 %}
          <li class="mobile-nav__item border-top">
            {% form 'currency', class: "currency-selector" %}
              <label for="CurrencySelectorMobile" class="currency-selector__label">{{ 'general.currency.dropdown_label' | t }}</label>
              <div class="currency-selector__input-wrapper select-group">
                <select name="currency" id="CurrencySelectorMobile" class="currency-selector__dropdown" aria-describedby="a11y-refresh-page-message" data-currency-selector>
                  {% for currency in shop.enabled_currencies %}
                    <option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}}</option>
                  {% endfor %}
                </select>
                {% include 'icon-chevron-down' %}
              </div>
            {% endform %}
          </li>
        {% endif %}
<!-- end mobile currency selector -->   

 

0 Likes
Highlighted
New Member
1 0 0

hi @Truevits 

Please can you help  i need to move language selector from footer to header please 

thanks

i need to remove language from footeri need to remove language from footer

 

add language to headeradd language to header

0 Likes
Highlighted
Shopify Partner
1 0 0

Awesome, thanks for that, was a head(er) scratcher for sure!

0 Likes
Highlighted
New Member
2 0 0

Thanks for that you are a life saver! 

One last thing, how can we move the currency selector, so that it is in this order,

 

currency selector, search icon, log in, cart.Untitled.png

0 Likes
Highlighted
New Member
1 0 0

Hi @Truevits , 

I tried you code step-by-step but i can't find my "// close dropdowns when on top level nav" in my debut theme. Do you know why? 

0 Likes