Space between menu item and arrow icon – Publisher theme

[jensberly]

Hello,
I have a problem with an element in my menu drawer (mobile). It concerns the arrow icon to the right of “SHOP”. I want to set a padding that affects the space between the menu item “SHOP” and the arrow, but I can’t achieve it. This causes the arrow to overlap with the word SHOP or be too far away, depending on the width of the mobile screen. How can I solve this? I am attaching a couple screenshots that show the problem. Thank you in advance!

[Made4uo-Ribe]

Hi @jensberly ,

You need to put the Media query. So any device that it will renders it will be on the same spot.

[jensberly]

Hey, thank you for your quick response. I’m kind of new to coding, I don’t know how that could be done – can you help me out if it’s not too much trouble?

[Made4uo-Ribe]

Yeah, sure would you mind to share your URL website and with password?

You can PM if you dont like to share on public.

Thanks!

[jensberly]

I just sent you a PM!

[Made4uo-Ribe]

Thank you for the information. Try this code.

@media only screen and (max-width: 989px) {
    .menu-drawer__menu-item>.icon-arrow {
    position: absolute;
    right: 11rem;
    top: 50%;
    transform: translateY(-50%);
    left: 60%;
}
}

Result:

I hope it help.

[jensberly]

hey, I tried but still no luck here’s a screen recording of how it still looks:

https://www.dropbox.com/s/tcu8i3mwbncfnh9/Grabaci%C3%B3n%20de%20pantalla%202023-06-01%20a%20las%2010.44.09.mov?dl=0

[Made4uo-Ribe]

Hi, Its still moving? on another sizes?