Offset issue with Avada theme menu

Hello,

I checked your URL and maybe you could use your header wrapper element selector (.fusion-header-wrapper). The desktop/mobile menu break-point is at 1024 pixels, so try setting the offset value to:

.fusion-header-wrapper:width(>1024)

If you change the overall offset (in plugin settings), remember to remove the link-specific offsets you’ve set.

Thank you very much for the prompt reply.

I tried entering the element you gave me in the plugin settings:

.fusion-header-wrapper:width(>1024)

I removed offset settings in each element on the page, as you instructed.

There is no offset now. The desktop scrolls past the intended point, likely because of the height of the header. The mobile version scrolls to the correct point. Thus, the two versions scroll to different positions.

And the desktop version obviously won’t work as is.

I don’t understand:

1. How to add an offset. I have removed any offset from each link as instructed, but have nowhere else to put an offset.

2. How to get the mobile to ignore the offset, since it is working fine as is.

Thank you

1. You add the offset in the “Offset” field in plugin’s settings (as you did).

When I inspect your page I still see the link-specific offsets on each link (“Can I get a TOS MRI at any imaging center?”, “Will my doctor get my results?” etc.). You have to remove these offsets as they overwrite the overall offset (.fusion-header-wrapper:width(>1024)).

Also change the offset to:
.fusion-header:width(>768)

This will “disable” the offset for the non-sticky mobile menu (2).

Just remove the link-specific offsets (180 pixels).

I apologize. I thought I had removed the link-specific offsets, but they didn’t save. I went back and broke each link, removed everything and started over by creating new links, with no link-specific offset.

I amended the plug-in setting as you instructed.

Unfortunately, the issue remains. On desktop, the scroll overshoots the intended target, and it appears the target moves to the top of the page, rather than the lower edge of the menu.

On mobile, the scroll moves exactly to the target. This works in both portrait and landscape modes.

Thanks again for your time and effort!

Hey no need to apologize ??

You didn’t change the offset selector to the one I posted. I think you just changed the width value ((>768)) but if you look closely you’ll see that the selector is also changed (from .fusion-header-wrapper to .fusion-header).

Try changing (you can copy/paste) the offset value to:

.fusion-header:width(>768)

Bravo!

It works on iPhone and desktop!

You’re amazing. Can I ask one more dumb question? If I wanted to add a slight offset to each of these, is there a way to add multiple expressions to the settings offset panel? I read that section of your help guide, but couldn’t figure out if I could do this for my specific application.

Thanks!

Great!

You can’t add multiple offset expressions. It all depends on what exactly you want to do but you can adjust (indirectly) each link scrolling position by CSS.

For instance, adding a top padding to your target element will “decrease” its link scrolling position.
Say for example that you want each section to have a bit more space from the top (e.g. an extra 20 pixels plus the offset). You could add the following CSS which will do this without affecting your sections design:

#learn-more-1, #learn-more-2, #learn-more-3{
    display: block;
    padding-top: 20px;
    margin-top: -20px;
}

And since this is just CSS, you have the option to add it in a media query so it applies only on the desktop or mobile ??