Space between svg icon and text

[Mtt1]

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:

[MaverickStudio · Accepted solution]

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;
}

[Huptech-Web · Accepted solution]

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

[Sweans · Accepted solution]

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

[MaverickStudio · Accepted solution]

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;
}

[Huptech-Web · Accepted solution]

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

[Sweans · Accepted solution]

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

[Mtt1]

Thank you all 🙏

Any ideas how to get rid of this annoynig little gap between page and bottom of the page? (Red arrow)

[MaverickStudio · Accepted solution]

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;
}

[Mtt1]

Thank you very much

[MaverickStudio]

 

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

[Mtt1]

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.

[Mtt1]

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

[Mtt1]

"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.

[MaverickStudio]

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.

[Mtt1]

You're right, it's not platform specific. I would be grateful for your help then.

[Mtt1]

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.

[MaverickStudio]

Hey @Mtt1 

Check your DM for collaborator access. Soz for the delay, our time zone overlap is pretty short.