Modal Navigation Expand

[bcoplin]

So when we have the background of the navigation modal white, it expands down to create space for the navigation. But when we add a background it no longer allows it to expand and it falls off the modal. Is there css code to fix this issue or a setting we need to be using. I will add a screen shot.

Thank you in Advance for your help.

[prakash_s]

Hello @bcoplin,

Thanks for writing to us.

Please remove the background image from the element settings, and you need to add this custom element CSS to the element. Please have a look at the given screenshot.

$el .x-off-canvas-content.x-off-canvas-content-right {
    background-image: url('Your_image_URL');
    background-size: cover;
    border-radius: 0em 0em 0em 3em;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector, or you can subscribe to One, where customization questions are answered.

Hope it helps.
Thanks

[bcoplin]

@prakash_s

$el .x-off-canvas-content.x-off-canvas-content-right {
    background-image: url('Your_image_URL');
    background-size: cover;
    border-radius: 0em 0em 0em 3em;
}

So that is getting us closer. The only issue is that it allows you to scroll right and left in addition to up and down. How do we make so it only scrolls up and down.

[ruenel]

Hey @bcoplin,

I could not scroll from left or right. I can scroll up or down when I expand the sub menus.

Thanks.

[bcoplin]

I was able to fix it with this. .x-off-canvas-content.x-off-canvas-content-right {
background-image: url(‘https://radiantchurch.com/wp-content/uploads/2025/06/Pop-Out-Gradient-copy2-scaled.jpg’);
background-size: cover;
border-radius: 0em 0em 0em 0em;
overflow-x: hidden;
overflow-y: auto;
}

[prakash_s]

Hello @bcoplin,

Glad that you were able to fix it with some custom CSS customization

Thanks