Align top bar Cart icon + text with logo and change Cart icon color in Minimal Theme

Highlighted
Excursionist
12 1 1

Hello Everybone,

I am building a fashion store which can be seen here: https://egndev.myshopify.com/ it uses Minimal Theme and I want to align top bar Cart icon and text with logo and change Cart icon color in Minimal Theme: https://prnt.sc/tfu7wx. I looked into code files and found that following code from header.liquid from Sections

 

<div class="header-bar__module">
            <span class="header-bar__sep" aria-hidden="true"></span>
            <a href="{{ routes.cart_url }}" class="cart-page-link">
              <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
            </a>
          </div> 

<div class="header-bar__module">
            <a href="{{ routes.cart_url }}" class="cart-page-link">
              {{ 'layout.cart.title' | t }}{% unless cart.item_count == 0 %}:{% endunless %}
              <span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
            </a>
          </div>

 

And, I guess I need to move that code to logo container or add a new container alongside logo. But I need help to get started on this!

Thanks in advance!  

Shopify Development & Support
Problem Solved? Accept ✔️ and Like ? the solution.
Need Code Changes? Send me a direct message.
0 Likes
Highlighted
Shopify Partner
2294 116 353

You may not need to move code around if all your trying to do is get them in the same "row" just adjust the rendered grid classes that control the grid items.

For example the cart is set to take up half space on mobile:

<div class="grid__item  medium-up--four-fifths  small--one-half text-right">

Try making it use something like small-one-fifth on the cart, and a similar smaller amount for search to see if other items will flow in to fill the rest of that horizontal space.

The other responsive sizes will need to be adjusted as well

 

Of course this wont work if a parent element is set to take up the full width, in which case either they too need to be made into grid items (grid__item medium_up--one-half small--one-half), or have their width remove.

If that doesn't work then start moving code source around.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Excursionist
12 1 1

Hello @PaulNewton Thanks for looking into this... I am not sure if you saw the correct Website (Theme) as I was today playing with a different theme which has a different type of Navigation. My store is on minimal theme and I just reverted back to that. This is how header looks: https://prnt.sc/tgz0me and I want to bring cart icon parallel to logo and change cart icon color to a different color.

Shopify Development & Support
Problem Solved? Accept ✔️ and Like ? the solution.
Need Code Changes? Send me a direct message.
0 Likes
Highlighted
Shopify Partner
2294 116 353

Static screenshots tell others very little about the actual code situation.

Shopify has several preview systems(?preview_theme_id , shopifypreview.com)

Explore the previous advice before having to shuffle code around.

Good luck

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Excursionist
12 1 1

Thanks for your reply... I understand that it's difficult to get an idea of the code from the static image and that's why I made my store public which can be seen at: https://egndev.myshopify.com/Anyways... Thanks for looking into this for me I appreciate that!

Shopify Development & Support
Problem Solved? Accept ✔️ and Like ? the solution.
Need Code Changes? Send me a direct message.
0 Likes