Boxed Layout Menu Overflow

fuelvm · May 2016

We're using a boxed layout for our site with the classic header style. The submenu fly-outs are being cut off at the edge of the box. Here's a screenshot: https://www.dropbox.com/s/5lubo9e7i3aqqwf/Screen Shot 2016-05-16 at 12.02.18 PM.png?dl=0

It only happens when the nav is at the top of the screen. After you scroll down and the sticky header kicks in, it looks correct. Here's a screenshot of what it looks like after you scroll: https://www.dropbox.com/s/fff8pxik4huux83/Screen Shot 2016-05-16 at 12.03.41 PM.png?dl=0

What can I do to make sure the submenu nav elements aren't cut off?

Thanks

Albert · May 2016

Hi,

please send us link to page that concerns your question first.

fuelvm · May 2016

bsafoundation.wpengine.com

Albert · May 2016

Ok, thanks. The last sub-menu items are cut because of the wrapper size. What we suggest is to activate Fold 2 Last Submenus to the Left option under Theme options > Menu & Action Bar > Menu section.

fuelvm · May 2016

I don't see that option. Here's a screenshot of the options I have:

https://www.dropbox.com/s/74hfip2i6295bld/Screen Shot 2016-05-17 at 8.38.12 AM.png?dl=0

Albert · May 2016

If you don't have this option, you need to update theme to latest version.

fuelvm · May 2016

I updated to the latest theme version, but still seeing the issue:

http://bsafoundation.staging.wpengine.com/

Is there anything else I need to do?

Albert · May 2016

We do not see anything wrong now. The last menu items fold to the left side already. If it looks different on your end, it means the problem is with cache on your computer.

fuelvm · May 2016

I cleared my cache, and tried 2 other browsers. If you hover over Donors, then any of the submenu items, you'll see the problem.

Here's a screenshot: https://www.dropbox.com/s/m2hz14sh1su9qsm/Screen%20Shot%202016-05-20%20at%207.56.46%20AM.png?dl=0

The words are being cut off on the right side.

Albert · May 2016

Ok, sorry, we missed that item. To display this item out of the box, you need to use an extra css:

#Wrapper { overflow: visible !important; }

fuelvm · May 2016

That worked - thank you!

Albert · May 2016

You are welcome!

rizcodesign · October 2020

Hi,

I am having the exact same issue as the person above where the menu is being cut off on the right side. I see your response to add the CSS #Wrapper { overflow: visible !important; }. Can you tell me where this should be placed?

Additionally, do you have compatible mega menu plugins that you recommend or do you suggest using the custom header builder?

Thank you

Phil · October 2020

rizcodesign,
1. You can paste this CSS Custom Code in: Betheme > Theme Options > Custom CSS & JS > CSS.

2. Sadly, Header Builder do not support Mega Menu, but we are plannig to add this feature.

Thanks

rizcodesign · October 2020

Hi,

I tried adding this code snippet where you instructred, however it did not impact the nav and the items are still being cut off: https://pasteboard.co/JwPsLM9.png

Here is a link to the site in development: http://safe4athletes.wpengine.com/

I also tried folding the last 2 submenus to the left using option "Submenu | Fold last 2 to the left" in "Betheme > Theme Options > Menu & Action Bar > Menu". This works, but I would prefer the menu to open to the right if possible.

Phil · October 2020

Maybe try to move the menu item with subcategories to the left of your menu, to be the first menu element.

Eventually you can make mega menu instead of regular one.

Thanks

rizcodesign · October 2020

Thank you.

Boxed Layout Menu Overflow

Comments