Only one menu item is misaliged in mobile dropdown menu

[mpavd90]

After playing around with custom css, base.css and theme.liquid to center align the header text and link text for single item collection lists displayed on our homepage, I got it to work on both mobile and desktop view. It was a true pain with copying css code from multiple threads.

None of this code targets one collection specifically (except the custom css, but it seems the same for all three collection listings I display), but strangely enough one of the menu items (that display collections) in my mobile drop down now is center aligned. I did not add any code regarding menu items specifically that I am aware of. 

I tried everything to move this menu item left, but nothing works. I am desperate for help so I can finally go live, this is the final bug on our Shopify website.

Any input is appreciated.

[Dan-From-Ryviu]

Hi @mpavd90 

Could you share your store URL? 

[mpavd90]

Hi Dan, thank you for your reply. The store url is beauchain.nl

Storefront password is BB.Test-6275~

Hope that is the information you need, I am new to this.

[Dan-From-Ryviu]

Hi @mpavd90 

You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings to check

@medi (max-width: 749px) {
.list-menu__item { justify-content: flex-start !important; }
}

[mpavd90]

Hi @Dan-From-Ryviu when I add this custom code on the header section where the menu is in mobile view, it gives an error with the css. No further information, but I can't save. Should I add the code somewhere else?

[Dan-From-Ryviu]

Please add it to Custom CSS in Online Store > Themes > Customize > Theme settings, do not add to Custom CSS of Header

[mpavd90]

@Dan-From-Ryviu I already tried that too, but same error:

[Dan-From-Ryviu]

Sorry, missing a character in code, please update co

@media (max-width: 749px) {
.list-menu__item { justify-content: flex-start !important; }
}

de to this and check 

[mpavd90]

@Dan-From-Ryviu Thank you for your effort, but no success unfortunately after saving and refreshing:

To add to the strangeness:

My mother doesn't see it on her mobile phone, it is perfectly aligned there. On my phone it is also perfectly aligned. Except for my girlfriends phone (both samsung and chrome mobile browsers) and in mobile view of the theme editor.

[Dan-From-Ryviu]

Could I request access to your theme so I can check directly? This issue appears when viewing on mobile, not in the responsive browser. 

[mpavd90]

What are the steps to do this safely? Would that be the request access feature to a developer account?

[Dan-From-Ryviu]

Yes, it is collab request and access to edit theme only

[mpavd90]

So the first step is to give you the 4-digit code in users and permissions > collaborators section, correct?

[Dan-From-Ryviu]

correct

[mpavd90]

Code is 8460.

[Dan-From-Ryviu]

Request sent! 

[mpavd90]

Thank you for your time, I granted the request. I will buy a coffee for you definitely if you get this to work. Please be aware there will be some code I copy and pasted in base.css and theme liquid file. It will be halfway or at the end. The code's purpose is to center the header text and link text of the collection listings (1 collection each) on the homepage.

[Dan-From-Ryviu]

Hi, I solved the issue. Please check now. 

[mpavd90]

Hi Dan, all looks great. Thank you so much and enjoy your coffee. If it's not too much trouble, what was the issue/what did you update? I would like to understand where I went wrong.

[Dan-From-Ryviu · Accepted solution]

This code at the very bottom of your base.css caused the issue 

So I added this code to Custom CSS to solve it 

[mpavd90]

Thank you! Have a nice day.

[Dan-From-Ryviu]

Thanks, you too!