Topic summary
A user reported that the last item in their dropdown menu is not displaying properly, sharing a screenshot of the issue.
Proposed Solutions:
Two community members provided similar CSS fixes:
- Both solutions involve editing the theme’s CSS file (theme.css, base.css, or theme.scss.css) through the Shopify admin panel
- Navigate to: Online Store → Theme → Edit code → Assets
- Add CSS code targeting mobile menu items (
.tmenu_app_mobile .tmenu_item_mobile .tmenu_item_link) - The code adjusts padding values (7px 15px or 8px 15px) with
!importantflag - Apply changes specifically for mobile viewports using
@media(max-width:767px)
Status:
The discussion remains open with no confirmation from the original poster about whether either solution resolved the issue. Both responders included result screenshots showing the expected outcome after applying their fixes.
Hi @kldlaz
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:767px){
.tmenu_app_mobile .tmenu_item_mobile .tmenu_item_link {
padding: 7px 15px !important;
}
}
Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!
Hello @kldlaz
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->theme.scss.css
add this code at the end of the file and save.
.tmenu_app_mobile .tmenu_item_mobile .tmenu_item_link {
padding: 8px 15px;
}
result
Thanks