hello how can i move the login button in the bottom left corner in line with above three elements?
Topic summary
A user seeks help repositioning the login button to the bottom left corner of the mobile menu in Shopify’s Dawn theme, aligned with three other elements above it.
Initial Solution Attempt:
- A responder provides custom CSS code to move the login button, including adjustments to
.menu-drawer__navigation-container,.menu-drawer__utility-links, and.menu-drawer__accountpadding properties. - The code also hides social media icons with
display: noneon.list-social.
Problem Evolution:
- The user clarifies they want the button in the bottom left corner specifically, not centered.
- Updated CSS is provided with modified padding values (10px left, 0px bottom) to achieve bottom-left positioning.
- The user initially expresses satisfaction (“GOD bless you brother”).
Unresolved Issue:
- After implementation, the user reports that moving the login button to the bottom left causes social media icons to disappear entirely.
- The discussion remains open with this visibility conflict unresolved.
The core challenge involves balancing the login button’s position with maintaining visibility of other menu elements.
@MinhajAhmed106 Please follow below steps to move the login button in mobile. Let me know whether it is helpful for you.
- From admin go to “Online Store” → “Themes”.
- Click “Customize” button from the current theme.
- Click “Header”.
- Then scroll down and paste the below code in the “Custom CSS” field and save changes.
.menu-drawer__navigation-container {
height: auto !important;
}
.menu-drawer__navigation {
padding-bottom: 0px !important;
}
.menu-drawer__navigation-container .menu-drawer__utility-links {
padding-top: 0px !important;
padding-left: 0px !important;
}
.menu-drawer__account {
padding: 0px !important;
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
i said login button in the bottom left corner ! u make it in middle left
@MinhajAhmed106 Understood, please try this one and let me know whether it is helpful for you.
Use below code in “Custom CSS” field instead of previous one. Now the login will move bottom left corner in mobile.
.menu-drawer__utility-links {
padding-left: 10px !important;
padding-bottom: 0px !important;
}
.menu-drawer__account {
padding: 0px !important;
}
.list-social {
display: none !important;
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
1 Like
GOD bless you brother !
when i make it bottom left my social media icons are gone not visible anymore ?