Menu icon Foundation
Off-canvas on both small and medium breakpoints

Hi,

I'm trying to get the off-canvas to work on both small and medium breakpoints for this page:

https://www1.chester.ac.uk/course_search?s=english

 

It's working for small at the moment.

 

I can display the filter button in the medium breakpoint, and clicking on it does shift the canvas right, but the facets still appear at the bottom of the page:

 

Medium breakpoint showing the off-canvas right, but without the content:

 

Here is my template:

<div class="off-canvas-wrapper">
	<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

		<div class="m-page row">
			<div class="off-canvas-content" data-off-canvas-content>
				<main class="m-body column large-8">
					<?php print $content['main_primary']; ?>
				</main>
			</div>
			<?php if ($content['main_secondary']): ?>
				<div class="off-canvas position-right reveal-for-large" id="offCanvasRight" data-off-canvas data-position="right">
					<aside class="m-sidebar column large-3">
						<?php print $content['main_secondary']; ?>
					</aside>
				</div>
			<?php endif; ?>
		</div>

		<div class="l-bottom">
			<?php print $content['content_bottom']; ?>
		</div>

	</div>
</div>

 

If anyone could shed some light on this, I would be extremely grateful.

 

Many Thanks

 

 

off-canvas

Hi,

I'm trying to get the off-canvas to work on both small and medium breakpoints for this page:

https://www1.chester.ac.uk/course_search?s=english

 

It's working for small at the moment.

 

I can display the filter button in the medium breakpoint, and clicking on it does shift the canvas right, but the facets still appear at the bottom of the page:

 

Medium breakpoint showing the off-canvas right, but without the content:

 

Here is my template:

<div class="off-canvas-wrapper">
	<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

		<div class="m-page row">
			<div class="off-canvas-content" data-off-canvas-content>
				<main class="m-body column large-8">
					<?php print $content['main_primary']; ?>
				</main>
			</div>
			<?php if ($content['main_secondary']): ?>
				<div class="off-canvas position-right reveal-for-large" id="offCanvasRight" data-off-canvas data-position="right">
					<aside class="m-sidebar column large-3">
						<?php print $content['main_secondary']; ?>
					</aside>
				</div>
			<?php endif; ?>
		</div>

		<div class="l-bottom">
			<?php print $content['content_bottom']; ?>
		</div>

	</div>
</div>

 

If anyone could shed some light on this, I would be extremely grateful.

 

Many Thanks

 

 

Brett Mason over 2 years ago

Hi snarf1974

What version of Foundation are you using on the site? Version 6.3 launched yesterday, along with a completely re-written version of off-canvas that I put together.

I can definately help you get this sorted, but version of off-canvas prior to 6.3 were a bit on the buggy side.

snarf1974 over 2 years ago

Hi Brett,

We're using Foundation for Sites by ZURB 6.2.3

The problem is that I don't think we're looking to update to 6.3 yet.  Is there anyway this can be achieved without updating to 6.3?

 

snarf1974 over 2 years ago

Hi Brett,

 

Is there any way of solving this issue using our existing setup of Foundation for Sites 6.2.3?

 

If not, then we may be able to update to 6.3

 

Many Thanks

 

Scott

Brett Mason over 2 years ago

Hey Scott

Sorry I missed your followup.

I cant quite work out exactly what you are trying to based on the site plus the screenshots.
It looks like small/large screens are working correctly.

You just need to have an off canvas on medium - is that right? If you could confirm and I'll try to help.

snarf1974 over 2 years ago

Hi Brett,

 

I'm trying to get off-canvas to work on both small and medium (but not large) in our course search:

https://www1.chester.ac.uk/course_search?s=english

 

I've managed to get the off-canvas to work on medium on my local machine, but the facets display at the bottom of the page, instead of sliding in from the right.

Brett Mason over 2 years ago

So from looking at the site, these styles are making the off canvas show on medium:

.off-canvas {
    position: static;
    width: auto !important;
    overflow-y: initial;
    background: none;
}

This is being applied to medium and up screens, but you actually want it to work on large and up. Try changing that and seeing if it works.