Archived topic

Change width in custom Off-Canvas Overlay

3 replies · Started by Michael on June 30, 2021

Viewing posts 1–4 of 4

June 30, 2021 at 12:17 pm #1840230

Hey there

Is this possible to achieve with the inside_slideout_navigation hook added with a block > container > grid > 50% and 50%?
How it should look

I tested it for some time without the proper result.
I can´t address the width of the "Logo" and "close" button container inside the overlay. I mean I didn´t find the selectors I have to change.
The width always stays narrow.
How it looks now

Can you give me a hint in the right direction please?

Thanks in advance.
Best regards
Mike

June 30, 2021 at 1:54 pm #1840290

Hi there,

try this CSS:

.slideout-navigation.do-overlay .inside-navigation,
.slideout-navigation.do-overlay .inside-navigation .main-nav,
.slideout-navigation.do-overlay .inside-navigation .slideout-widget{
	padding: 40px;
	max-width: 1200px;
	width: 100%;
	margin: auto;
}

This will open up the width of the inner container / nav / widget area.

And you may need to give your custom-hooked-element its own CSS class and give it a width: 100%; property to stop it from collapsing due to the margin: auto property which keeps the content centered.

June 30, 2021 at 2:56 pm #1840337

Thank you David.
It works perfectly!

Best regards
Mike

June 30, 2021 at 4:33 pm #1840385

Glad to hear that!

This archived topic is closed to new replies.

Start building better websites today.