New Shopify Certification now available: Liquid Storefronts for Theme Developers

Need to move icon

Solved
Bullet181
Tourist
7 0 4

 Hello, I need help, I need to move the “log in” icon higher from the mobile phone, can someone please help me?

My site is luxebrillant.com. 

BE629194-C9AB-4C32-9F8B-2198489A61B7.jpeg

 

Accepted Solutions (2)
Made4uo-Ribe
Shopify Partner
4199 966 1174

This is an accepted solution.

HI @Bullet181 

Do you mean like this?

Made4uoRibe_0-1697482091300.png

I notice that you add another log.in in the drawer do you like me to take out the other log.in with icon?

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
4199 966 1174

This is an accepted solution.

Oh, I didnt provide the code yet. I just like to clarify. 

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 "base.css, style.css or theme.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:

 

nav.menu-drawer__navigation {
    padding-bottom: 0px !important;
    height: fit-content !important;
}
.menu-drawer__navigation-container {
    display: flex;
    justify-content: flex-start !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1697488061367.png
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 5 (5)
Made4uo-Ribe
Shopify Partner
4199 966 1174

This is an accepted solution.

HI @Bullet181 

Do you mean like this?

Made4uoRibe_0-1697482091300.png

I notice that you add another log.in in the drawer do you like me to take out the other log.in with icon?

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Bullet181
Tourist
7 0 4

So the log.in that stays higher is a temporary page that i have created, but i want the main log.in to be near wishlist icon, search icon and cart icon, in the same line.

Made4uo-Ribe
Shopify Partner
4199 966 1174

This is an accepted solution.

Oh, I didnt provide the code yet. I just like to clarify. 

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 "base.css, style.css or theme.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:

 

nav.menu-drawer__navigation {
    padding-bottom: 0px !important;
    height: fit-content !important;
}
.menu-drawer__navigation-container {
    display: flex;
    justify-content: flex-start !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1697488061367.png
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Bullet181
Tourist
7 0 4

F050B13D-A43A-4C84-84B8-F079D2135821.jpeg

thank you very much, you helped a lot, could you tell me more how I could put this button near to the Cart , search, wishlist
in one row to be on the mobile version,thank you again

Made4uo-Ribe
Shopify Partner
4199 966 1174

Is it like this? 

Made4uoRibe_0-1697554797906.png

If it is then try this one. 

Same Instruction. 

@media only screen and (max-width: 749px){
.row.header-row {
    display: flex;
    justify-content: flex-end;
}
header-drawer {
    order: 2;
}
.header__icons {
    order: 3;
}
h1.header__heading {
    margin-right: auto;
}
.header .disclosure {
    margin-left: 2rem;
}
}

And Save.

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com