Menu on mobile

[manbru]

Hello,

I want to move all arrows to the right side on mobile.

my store: https://r1vex.myshopify.com/ 

On mobile my menu currently looks like this:

And I want it to look like this:

I was thinking that this might be be possible by setting the column gap to 100% or something but I'm not that good at css yet.

Thanks for your help!

[Moeed]

Hey @manbru 

You have a code added in your theme files maybe in meteor-menu.css, so you have to remove the below code first which is this then add my code.

.Meteor-MobileNavigation .Meteor-MobileNavigation__Link a {
    justify-content: flex-start !important;
}

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
a.Meteor-Navigation__Link__mobile {
    width: 100% !important;
    justify-content: space-between !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BSSCommerce-B2B]

@manbru , Add this code before  </head> in theme.liquid file

<style>
.Meteor-MobileNavigation .Meteor-MobileNavigation__Link a {
  justify-content: space-between!important;
}
</style>

result:

[Rahul_dhiman]

Hello @manbru 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> components-menu-drawer.css
add this code at the end of the file.

.Meteor-MobileNavigation .Meteor-MobileNavigation__Link a {
justify-content: space-between !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Tech_Coding]

Hello @manbru 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
   .Meteor-MobileNavigation .Meteor-MobileNavigation__Link a {
        justify-content: space-between !important;
    }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[exertweb]

Hello @manbru 

If you add the CSS I mentioned below, your arrow will be positioned on the right side.

.Meteor-MobileNavigation .Meteor-MobileNavigation__Link a svg {
    margin-left: auto;
}

[BSS-TekLabs]

- Here is the solution for you @manbru 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.Meteor-MobileNavigation .Meteor-MobileNavigation__Link a {
    justify-content: space-between !important;
    width: 100% !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[EFOLI-Syn]

Hello @manbru,

Please add the following code into your base.css file.

@media(max-width:980px){
.Meteor-MobileNavigation .Meteor-MobileNavigation__Link a {
    justify-content: space-between !important;
}
}