Full screen horizontal scrollbar issues

  • Resolved aintnobody

    (@aintnobody)


    5 months, 2 weeks ago

    I love this plugin, it helps a lot with solving the mega menu dilemma in FSE.

    However, the full width option for the dropdown runs into the old CSS issue with browser scrollbars and causes horizontal scrolling.

    My temporary fix was to use position: fixed; on the dropdowns, which has its own issues, but it did the job.

    I’ve tried the body container trick to fix it, but then the dropdown’s left position is slightly wrong (not fully aligned to the left) and the horizontal scroll issue remains. I’ve ended up making the header into a container, which meant the dropdowns are not truly full width now, but close enough and they look great.

    • This topic was modified 5 months, 2 weeks ago by aintnobody. Reason: Additional information with a workaround
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Mike McAlister

    (@mmcalister)

    5 months, 2 weeks ago

    Hey @aintnobody ,thanks for the heads up! I’ll take a look at this and get a fix into the next release.

    Plugin Author Mike McAlister

    (@mmcalister)

    5 months, 2 weeks ago

    Hey there, can you try adding this CSS to see if it helps? If so, I can add it to the plugin:

    body:has(.wp-block-ollie-mega-menu__menu-container.menu-width-full) { overflow-x: hidden; }

    Thread Starter aintnobody

    (@aintnobody)

    5 months, 2 weeks ago

    Hi Mike,

    thanks for that. I’ve tried it and it does stop the horizontal scroll, but the calculation for left positioning is off by ~1.5px so there’s a tiny gap between the mega menu and the left side of the screen.

    This gap appears on big and small screens on refresh, but when going from big to small screen (e.g. external screen to laptop screen without refresh), the gap is gone and it looks as expected. This part might be caused by something else in my theme or a setting on my Mac. For context, this is on local, so I don’t have a link to share, and the site is built on top of the Frost theme.

    I’m happy with my solution of making the <header> a container, so don’t want to be a bother. This plugin has improve FSE so much.

    Plugin Author Mike McAlister

    (@mmcalister)

    5 months, 2 weeks ago

    Ok cool. I’ll keep looking on my end to see if we can fix that 1.5px gap. Thanks for your quick feedback!

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.