I am wanting to move the icons for search, login, signup to the right side of the header so that they are next to the cart icon. I am using the simple theme. Thanks in advance
1 Like
Hi there @tiwv2021 ,
Can you please include the URL of your store? I’ll take a look for you before I can offer any solution/guidance. Thanks
The url is https://twistedimageswv.com
Hi, I found a solution that works well. You’ll make a few changes to just the “theme.scss.liquid” in the “assets” folder and the “header.liquid” of the “Sections” folder.
Step 1: In the “theme.scss.liquid”, around line 1250, there should be a chunk of code that looks like this:
/*================ SCAFFOLDING ================*/
/*====== Grid ======*/
.grid {
@include clearfix();
list-style: none;
margin: 0;
padding: 0;
margin-left: -$grid-gutter;
}
.grid__item {
float: left;
padding-left: $grid-gutter;
width: 100%;
&[class*="--push"] {
position: relative;
}
}
add this chunk of code:
grid__item-right {
float: right;
padding-right: $grid-gutter;
width: 100%;
&[class*="--push"] {
position: relative;
}
}
right under the original block of code, so it looks like this now:
/*================ SCAFFOLDING ================*/
/*====== Grid ======*/
.grid {
@include clearfix();
list-style: none;
margin: 0;
padding: 0;
margin-left: -$grid-gutter;
}
.grid__item {
float: left;
padding-left: $grid-gutter;
width: 100%;
&[class*="--push"] {
position: relative;
}
}
.grid__item-right {
float: right;
padding-right: $grid-gutter;
width: 100%;
&[class*="--push"] {
position: relative;
}
}
Step 2: Again, in the “theme.scss.liquid”, around line 4269, there should be a chunk of code that looks like this:
@include media-query($small) {
@include flex(0 0 auto);
padding-left: $gridGutterMobile;
margin-bottom: $gridGutterMobile;
&.small--one-half {
@include flex(1 0 50%);
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
Add this chunk of code (you can change the max-width value to tweak the spacing for the mobile icons aligned to the right):
&.small--one-eighth {
@include flex(1 0 50%);
max-width: 100px;
margin-left: auto;
margin-right: auto;
}
to that block of code so it looks like this now:
@include media-query($small) {
@include flex(0 0 auto);
padding-left: $gridGutterMobile;
margin-bottom: $gridGutterMobile;
&.small--one-half {
@include flex(1 0 50%);
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
&.small--one-eighth {
@include flex(1 0 50%);
max-width: 100px;
margin-left: auto;
margin-right: auto;
}
}
Step 3: Now, in the “header.liquid” file, around line 51, find this chunk of code:
{% include 'icon-search' %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
{% if customer.first_name != blank %}
{% capture first_name %}{{ customer.first_name }}{% endcapture %}
{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
{% else %}
{{ 'layout.customer.account' | t }}
{% endif %}
{{ 'layout.customer.log_out' | t | customer_logout_link }}
{% else %}
{{ 'layout.customer.log_in' | t | customer_login_link }}
{{ 'layout.customer.create_account' | t | customer_register_link }}
{% endif %}
{% endif %}
{% include 'icon-cart' %}
{{ 'layout.cart.title' | t }}
({{ cart.item_count }})
We need to add some those new css classes and a couple of “text-right” classes to this.
So replace that entire chunk with this (this has those classes now):
{% include 'icon-search' %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
{% if customer.first_name != blank %}
{% capture first_name %}{{ customer.first_name }}{% endcapture %}
{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
{% else %}
{{ 'layout.customer.account' | t }}
{% endif %}
{{ 'layout.customer.log_out' | t | customer_logout_link }}
{% else %}
{{ 'layout.customer.log_in' | t | customer_login_link }}
{{ 'layout.customer.create_account' | t | customer_register_link }}
{% endif %}
{% endif %}
{% include 'icon-cart' %}
{{ 'layout.cart.title' | t }}
({{ cart.item_count }})
Done!
That should be all it takes. I hope that was clear. Good luck
I made the suggested edits. I am attaching photos of what it looks like now on both the desktop and mobile versions of the website.
On the desktop site, it moved the login, signup and cart to the center of the page. The search bar is still on the left.
On the mobile site, it moved the cart over to the left.
Hi, I ran through the solution again twice from a brand new “simple” theme and it worked both times. You may want to double check you didn’t miss a bracket or something small. Otherwise, I can check out your code myself (if that’s alllowed). Good luck.
Thanka for all your help so far! I checked again and apparently I missed a “.” in a part of the code. Search bar, login, & signup are now on the right in the desktop view, like I wanted, but now the cart is on the left.
I attempted switching part of the code around to put the cart back at the right end and wasn’t successful. Is it possible to have login, signup, search and the cart all on the right side? If the cart icon would be at the end next to search in the above picture, it would be perfect.
Oops, I did not account for the login and signup. But shouldn’t be a problem.
Step 1: You will need to find those three lines you added the “grid__item-right” classes to in the “header.liquid” (line 52, 69, and 89).
Step 2: For line 52, change “medium-up–one-fifth” to “medium-up–one-sixth” (this step may not be necessary)
Step 2: For line 69, change (1) “text-right” to “text-center”, and (2) “medium-up–two-fifths” to “medium-up–one-fifth”
Step 3: For line 89, change “medium-up–two-fifths” to “medium-up–one-fifth”
BEWARE of “fifth” vs “fifths”
That should hopefully give you what you want. Good Luck
Thanks for all your help. I just changed the theme to debut. It seems it already has the icons laid out in the manner i need. But of course this theme has its own set of issues. Thanks again!
1 Like