Remove overlapping of account link and cart in header

Solved
premija
Excursionist
17 1 7

Hi please help,

I have moved my account link from the menu header and placed it beside my cart but it is now overlapping as seen in the photo below. How do I fix this?

Screenshot (377)_LI.jpg

Also, there was never an account link in the header of the mobile version and now there is as seen in the photo below. How do I remove it?

Screenshot (376)_LI.jpg

 

0 Likes

Seems like you coded them together and that is why the overlapping is appearing.

We might be able to help if you provide a URL for us to look at the store code.

Steven

0 Likes
premija
Excursionist
17 1 7

The url is https://premijallc.com/

the code is phiame

0 Likes

Looks like your store is using the Venture theme: https://themes.shopify.com/themes/venture/styles/snowboards

You can see it supports a search icon in that area correctly, alongside the cart icon. You might be best modifying that search code and swap the search icon with your account icon, failing that the account text you want still overlaps like you are seeing now. It is possible, I have worked on Shopify stores for clients and carried out such customisations.

Steven

0 Likes
WinkyApps
Explorer
50 13 12

This is an accepted solution.

Alternatively you could remove the css class "one-fifth" for your Account link in your header.liquid file

<div class="grid__item one-fifth text-right">

This could be a quicker and easier fix. Hope this helps.

Did my answer work for you? Please drop a Like and Mark it as Accepted.
If you need further help or want to get something custom built for your Shopify store, then feel free to mail our team on winkyapps18@gmail.com
Happy to help.
premija
Excursionist
17 1 7

This is the code that was in my header.file

<div class="grid__item {% if shop.customer_accounts_enabled %}one-fifth{% else%}one-eighth{% endif %} text-right">

And this happened when it was removed

Screenshot (378).png

0 Likes
WinkyApps
Explorer
50 13 12

This is an accepted solution.

Don't remove the entire line. Just remove the css class name "one-fifth" from that code 

Did my answer work for you? Please drop a Like and Mark it as Accepted.
If you need further help or want to get something custom built for your Shopify store, then feel free to mail our team on winkyapps18@gmail.com
Happy to help.
0 Likes
WinkyApps
Explorer
50 13 12

This is an accepted solution.

You can replace this 

<div class="grid__item {% if shop.customer_accounts_enabled %}one-fifth{% else%}one-eighth{% endif %} text-right">

to this below code

<div class="grid__item text-right">
Did my answer work for you? Please drop a Like and Mark it as Accepted.
If you need further help or want to get something custom built for your Shopify store, then feel free to mail our team on winkyapps18@gmail.com
Happy to help.
premija
Excursionist
17 1 7

Thank you very much and sorry for the misunderstanding. Your suggestion worked. The other issue is the link in the mobile version header. How do I remove the link in the mobile version without removing the link on the desktop version?

0 Likes
WinkyApps
Explorer
50 13 12

Previously on the mobile view, the Account link could have been placed inside the side menu and hence it was not appearing in the top right. 

If you hide the Account link now, the customer will not be able to access the Account page. Is that ok?

Did my answer work for you? Please drop a Like and Mark it as Accepted.
If you need further help or want to get something custom built for your Shopify store, then feel free to mail our team on winkyapps18@gmail.com
Happy to help.
0 Likes