I need help with header overlapping issue

[lance_brook]

Hi all, i'm new to shopify and working on a client's ads campaign and have noticed on the mobiler version of the website, the logo overlaps the log in and account link and cart logo.

Is there a way to move them onto a line below?

Remove them?

Or just have the logo and the cart option.

I have researched online and added various bits of code to try and fix this but to no avail.

website is: https://www.thesentenced.co.uk/

[Vikas_Chovatiya · Accepted solution]

Hi @lance_brook 

Thanks Welcome to the Shopify community!
1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.main-header-login-links-custom {
    top: auto;
    transform: none;
    bottom: 0;
    margin: 0 auto;
    display: table;
    width: 100%;
    text-align: center;
    left: 0;
}
.main-header-login-links-custom a {
    margin: 0 10px;
}

[lance_brook]

Thanks for the fast reply Vikas, is there a way to apply this setting to mobile only? or remove the links completely and just have the cart option?

[Vikas_Chovatiya]

Hi @lance_brook 

Yes, remove it completely, add this code and please remove the code I gave above

 Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
.main-header-login-links-custom {
    display: none;
}
.main-header-cart-item {
    right: 0 !important;
}
}

[lance_brook]

Amazing, worked perfectly thank you very much!