A user is troubleshooting spacing and layout issues in their Shopify store’s mobile menu after changing an SVG icon.
Primary Issues Addressed:
SVG icon spacing: Text appears too close to the custom SVG icon in the mobile menu. Multiple solutions provided involve adding CSS to base.css or custom.css files, using properties like margin-right or column-gap to create space between the icon and text.
Gap at page bottom: A small gap appears between the page content and bottom of the viewport. Fixed by modifying the bottom property in existing CSS code from a variable value to 0.
Mobile menu scroll behavior: When the menu drawer is open, users can still scroll the underlying page content. This issue affects multiple devices (not platform-specific). A contributor requested collaborator access to investigate and fix this more complex problem directly.
Current Status:
The spacing issues have been resolved. The scroll behavior problem remains open, with one contributor offering hands-on assistance through direct store access. Screenshots were shared throughout to illustrate the various issues.
Hello,
is there any simple code to move away the svg icon from the text? After I changed the svg icon, the text sticks to it and it doesn’t look good.
The URL is foams-europe.com and the theme is Dawn.
I would be grateful for a solution.
I especially want to fix this form the bottom of the mobile menu:
Hey @Mtt1
It’s me again. Add the following to base.css and adjusting the spacing as you like 
.menu-drawer__utility-links account-icon {
margin-right: 6px !important;
}
Hello @Mtt1 , To create space between the text and the SVG icon, simply insert the provided code snippet into your custom.css or custom-style.css file where you handle your styling code.
@media only screen and (max-width: 750px) {
.menu-drawer__utility-links .menu-drawer__account{
column-gap: 1rem; /* adjust the colum-gap (spacing) value as per your requirement */
}
}
Refer to the screenshot for visual guidance.
Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P
Hi @Mtt1 ,
You can make this change by adding a simple line of css
First you need to open your base.css
Online Store > themes > Click on the three dots on your current theme > edit code > In left side bar top there will be a search box type base.css > the file will display below search box open it.
Paste this code in base.css
.menu-drawer__account {
gap:10px
}
If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!
Regards,
Sweans
Thank you all 
Any ideas how to get rid of this annoynig little gap between page and bottom of the page? (Red arrow)
Hello @Mtt1
Easy fix. Somewhere in your base.css you added
Change the bottom to 0 as follows
div#menu-drawer {
position: fixed;
z-index: 100;
top: var(--header-height)px;
bottom: 0;
}
Thank you very much
No worries.
There are a few issues @Mtt1 try clicking on search in the header on mobile. The overlay is broken.
And you are able to scroll the website while the menu drawer is open
Yes, I know this error appeared when I moved the search bar to the left side. I was looking for external applications to create a search bar, which might solve this problem. But if you want to help in this matter, go ahead.
Regarding the first photo, you surprised me that it looks like this, everything is displayed correctly on my Android device.
I mean I wasn’t happy about space between menu content and header and country/language selector but now you also worried me that the menu is complete mess on other devices
“And you are able to scroll the website while the menu drawer is open”
Sorry I didn’t read that part of your reply.
So I spotted this problem and started a topic few days ago: https://community.shopify.com/c/shopify-design/weird-mobile-menu-behavior/m-p/2672838#M701083
I dont’t know. Now on my android device everything is working fine. When I added the code it just left that little gap on the bottom that you helped me with. Maybe there is an issue with IOS.
Hey @Mtt1 ,
Let see if it is platform specific. Once you open the menu drawer, start scrolling the section with the foams logo. So right at the top of the screen around the black banner, if it still breaks as it does for iOS then we can create common fix for it all.
Ok, now I see the issue when I start scrolling from the header or when I use the scroll bar, the page starts sliding down. Well then I hope there is a way to fix it.
I appreciate you noticing such details and I apologize for the little spam in the last few minutes.
You’re right, it’s not platform specific. I would be grateful for your help then.
Hey @Mtt1
Check your DM for collaborator access. Soz for the delay, our time zone overlap is pretty short.
