How to remove store logo from password header? And move lock icon to the right of the text?

[legadocharrohat]

I was wondering how I could remove the brand logo from the header, and just move that lock icon to the right of the text, if possible on desktop? On mobile I want to do the same thing except remove the text and just have the lock icon in the top right, is that possible? Thanks for any help in advance!

[Made4uo-Ribe]

Hi @legadocharrohat 

Would you mind to share the password website? Thanks!

[legadocharrohat]

Yes the password is LGCH

[Made4uo-Ribe]

Oh, Sorry I mean the Website of this password page. Thanks!

[legadocharrohat]

Oh I'm sorry, yes https://legadocharro.com/

[Made4uo-Ribe]

Thanks for the info, try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "section-password.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

svg.icon.icon-padlock, img.password-logo {
    display: none !important;
}

• And Save. 
• Result:
• 

[legadocharrohat]

Thank you! That hid the image! But how do I make the padlock icon be in the top right on mobile and on the right of the text on desktop (sorry for asking so many questions)

[Made4uo-Ribe]

ah, okay I thought you like to remove also the padlock.  Can you take out the code that I give. I need to modify thanks!

[legadocharrohat]

Yes let me remove it!

[Made4uo-Ribe · Accepted solution]

Oh, that good you know which selector to remove. Try this oone for the padlock.

right on desktop and top on the mobile right? 

Same Instruction. 

@media only screen and (min-width: 750px){
.modal__toggle-open.password-link.link.underlined-link {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
}
}
@media only screen and (max-width: 750px){
details.modal .modal__toggle-open {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
}

Result:

[legadocharrohat]

Awesome, thank you for the help!

[legadocharrohat]

............