Nav block doesn't allow full width dropdown

General
1

*Description

I’m attempting to create a full width megamenu using the cwicly nav block. I would like the menu items to have the regular confined width of the container, but I would like the background of the dropdown to be full width.

When I put the width to 100vw on the dropdown content it creates an overflow which makes the site scroll horizontally. I obviously do not want this to happen, but if I put overflow to hidden on the section it hides the dropdown completely.

Is there another option to have the dropdown be full width?

Step-by-step reproduction instructions:

  1. Open the Post Editor/Site Editor
  2. Add Nav Block
  3. Use Preset Nav
  4. Set dropdown content to 100vw and view on frontend

Screenshots, screen recording, code snippet
This is what I would like the menu and dropdown to look like.

image
image1903×843 69 KB

Environment info

  • WordPress version: 6.4.3
  • Cwicly Plugin version: 1.4.0.3
2

Hello @Wendy,

Have you tried using the Fullwidth option in the Nav block: https://docs.cwicly.com/blocks/nav/nav-block-settings-and-styles#width

Cheers,

3

Hello @Louis,

Thank you. That worked to make the background full-width, however the red footer is not full-width.

Is there a way to make that full-width?

4

Hello @Wendy,

Glad to hear that the toggle works on your end.

In their current form, the body and footer sections have not been designed to accommodate full-width backgrounds specifically.
Don’t hesitate to open a Feature Requests thread so that we can keep track of this suggestion and push it through as soon as it hits a certain amount of community votes.

Cheers,