Need to align login icon with cart

Solved
IvvySkivvy
Excursionist
25 1 5

I am using debut theme and have added a custom 'login' icon into icon.login.liquid but it seems to be crooked and not aligned with the other icons next to it. My shopify store is florablackstudio.myshopify.com is there anyway to straighten it up so they are all level?

0 Likes

Hi,

Please share the password..

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
IvvySkivvy
Excursionist
25 1 5

It is: efroht

0 Likes

Hi

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

 

button.btn--link.site-header__icon.site-header__search-toggle.js-drawer-open-top svg.icon.icon-search {
margin-bottom: 4px;
}
.site-header__account, .site-header__cart {
padding: 10px 16px;
}
.icon {
display: inline-block;
width: 25px;}

 

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
IvvySkivvy
Excursionist
25 1 5

Unfortunately it hasn't worked would there be any other way?

0 Likes

Hi,

Also add this css

a.site-header__icon.site-header__cart {
    position: relative;
    bottom: 2px;
}

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes

Now check and let me know what you want at your store?

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
IvvySkivvy
Excursionist
25 1 5

I have now added but it is oddly the same and has not changed. This is my code for the login icon, is there anything standout from here?:

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="20px" height="20px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<g>
<path d="M35.581,39.9H4.419v-7.806c0-10.566,8.098-14.315,15.034-14.315c0.243,0,0.428,0.006,0.546,0.009
c0.118-0.003,0.302-0.009,0.547-0.009c6.936,0,15.034,3.749,15.034,14.315V39.9z M8.75,35.568h22.498v-3.474
c0-9.011-7.484-9.983-10.701-9.983c-0.234,0-0.378,0.007-0.408,0.009L20,22.128l-0.145-0.009c-0.023-0.001-0.168-0.008-0.401-0.008
c-3.219,0-10.703,0.973-10.703,9.983V35.568z"/>
</g>
<g>
<path d="M20,16.341c-4.478,0-8.122-3.643-8.122-8.122c0-4.478,3.644-8.121,8.122-8.121s8.124,3.644,8.124,8.121
C28.123,12.698,24.478,16.341,20,16.341z M20,4.431c-2.089,0-3.791,1.7-3.791,3.789c0,2.09,1.701,3.791,3.791,3.791
S23.79,10.31,23.79,8.22C23.79,6.13,22.089,4.431,20,4.431z"/>
</g>
</svg>

0 Likes

Please send me the screenshot what do you want actually?

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
IvvySkivvy
Excursionist
25 1 5

The login icon is sitting too high, I need it to be aligned with the shopping cart icon and wishlist heart next to it.

IvvySkivvy_0-1600170007388.png

 

0 Likes