NO BUG: Toggle (Open: Mobile) shifts position slightly when I scroll down the page

[ross_chet98]

Browser: Safari
OS: macOS / Windows / Linux / etc.
URL: (https://targetnz.com)
Video: Jam

Hi,

Hoping someone can help, as I’ve been trying to find a fix myself but can’t work it out.

Basically the open toggle for my nav (nestable) menu shifts down slightly whenever I scroll down the screen, and then scroll back up to where the toggle comes back into view again.

I’ve tried to show this in the jam video link above and screen shots.

Whilst the video is from a mobile view, this also happens on tablets and small viewport desktops too.

Any ideas on what could be causing this?

[Matej]

Hi @ross_chet98,

Thank you for the video & issue description. This happens because the “leaveView” action shows the toggle, which adds display:block to it.
To fix this, I believe the easiest way is to add display:flex to the SVG itself. (Important: not to the toggle button, but to the SVG inside)—you - you can use custom CSS or a custom selector for this.

Please let me know if you managed to do that.

Thank you,
Matej

[ross_chet98]

Hi Matej,

Thank you for the quick response.

How do I go about adding custom CSS to the SVG itself?

There doesnt seem to be anywhere to add CSS to the SVG icon when I click on it.

The toggle element is currently set to Display:Flex, is that correct?

I’ve included some screenshots of the current settings of my Toggle (Open: Mobile) element for reference.

[Matej]

Hi @ross_chet98,

you can’t add “display:flex” to the SVG directly. But you have two options:

1. Copy this CSS and add it to the Toggle element

%root% svg{
  display:flex;
}

2. Use the “custom selector” option to target the SVG inside and then you can set it up with UI.

Please test and let me know.

Thanks
Matej

[ross_chet98]

Hi Matej,

Just realised I never got back to you on this.

For anybody else who is experiencing this problem, option 1 worked for me.

Thanks for the help Matej, really appreciated.

[Matej]

Hi @ross_chet98,

thank you for getting back to us. I’m glad that it worked

Best regards,
Matej