5mins

Easy to implement testimonial carousel using the new Carousel builder. Currently the carousel will work as a wrapper around the repeater component so any post type can be used.

This component will soon work with Woocommerce components like the product list component aswell as others.

We changed the folder name from oxyextras to oextras by mistake in v1.1.6 update.

That zip file has been deleted from the server and a correct one uploaded.

If you have already updated the plugin before seeing this message, please download the latest zip file from your account on and install it over your current plugin.

Sorry about the inconvenience.

I’m really happy with the feedback from the offcanvas component. It’s been interesting to see all the different ways it’s being used. Originally it was quite a simple component, built for building offcanvas menus.

Some of the use cases I’ve seen directly from our users has been..

As the common uses have become known, I’ve been finding more things to add that can help create better user experiences based on these use cases. Some of the features you can expect in the next update are focused around accessibility and with the offcanvas, one of the main things will be being able to move the focus to any selector inside the offcanvas as it opens.

This is something that has been requested of the modal component in the past. It not only ensures the site is more accessible for keyboard users, but also provides a better experience for all users.

For eg, if you’re using the offcanvas to reveal a form that you would like the site visitor to fill in, having the focus already inside the first input as soon as the offcanvas opens makes for a much smoother experience as the user can start typing immediately.

The other feature being added to the offcanvas is the ability to add your own transition-timing-function so it can better match transitions on the rest of your site to give a more consistent feel.

Pushing the Content

One of the features that hasn’t made it into the release is being able to push the site content as the offcanvas opens.

Here is the desired effect..

The reason for not adding this into the component directly is a technical one. Pushing the content involves adding styles to unknown content that is outside of the component itself.

Although it would be possible to add this as a feature, which would include adding a bunch of JS to find out what is on the page and find out the width of the offcanvas, it’s actually pretty simple to add yourself using a few lines of CSS. So to keep things lightweight, it makes more sense just to explain how this can already be done using the existing functionality.

Using the ‘off-canvas-toggled’ Class

When the offcanvas element is opened a class is added to the body element (‘off-canvas-toggled’). This class is removed when the offcanvas is closed. This is what we’ll be using to create the push effect.

Firstly, the structure needs to be set up in a particular way. The entire page (or template) will need to be wrapped inside a container div. The offcanvas can then either come before or after this container div, but not inside of it.

The idea is that once we open the offcanvas, we will only need to move that one container div to push all of the site content at the same time.

Let’s say the container div has the class ‘site-container’. Then this would be the CSS to add to a stylesheet in Oxygen to create the push effect..

.site-container {
          transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
}

.off-canvas-toggled .site-container {
          transform: translateX(300px);
  -webkit-transform: translateX(300px);
}

The 300px will need to be changed to match the width you have set for the offcanvas. If you are adding the offcanvas from the right then this would need to be -300px. If you are adding the offcanvas from the top or bottom then you’ll need to use translateY instead of translateX.

The transition timing will need to match the transition timing of the offcanvas to create the effect that it’s being pushed by the offcanvas. (Or of course you could be creative by adding a delay or changing the timing function which can look nice if done well, but can look very bad if not)

Note – the ‘cubic-bezier(0.77, 0, 0.175, 1)’ part of the transition is the default transition timing function that is added to the offcanvas by default. As mentioned earlier, this will be customisable from inside the settings in the upcoming version.

One thing we’ve been asked a number of times is how to add scroll animations to alert boxes to reveal them only as the user scrolls the page. The common use case being when the alert is fixed to the viewport and the element needs to show as the user scrolls to a particular point on the page.

The Issue with Scroll Animations

You may have noticed that the built-in scroll animations won’t work when applying it to the alert box directly. Actually, the scroll animations won’t work on any component that has been built with Oxygen’s Elements API. You will find this is also true for the Pro Menu component, the Shape Divider component and all the official Woocommerce components.

That said, it doesn’t mean we can’t still take advantage of the built in scroll library. The way around it is to simply wrap the alert box in a div. We can then position the div as fixed to the viewport, instead of the alert box and then apply the scroll animations to the container div instead of the alert box inside.

The important thing is to not add any styles to the div itself, only change the position to ‘fixed’, position it relative to the viewport with the top/left/right/bottom where you need it and add the scroll animation effect. The width, height and all other styles should be on the alert box itself.

Revealing at a Certain Scroll Position

As our new container div will be fixed to the viewport, we’ll need to make use of the ‘anchor’ setting in the scroll animations to control exactly when the element is revealed.

This anchor would be the section or element on the page that the user would scroll to in order for the div (and the alert) to become visible.

This is what the settings would look like on our div element if we wanted the alert inside to be made visible when the user scrolls down to a specific section that we have given the class ‘.alert-trigger’.

The anchor placement being set at ‘top-center’ means that the animation will be triggered when the ‘top’ of this section reaches the ‘center’ of the viewport. This can be changed to however you want it to be, you can also add an offset if you want more precise control over the number of pixels scrolled.

That’s it

Although not the ideal solution, hopefully Oxygen will add support for scroll animations on these new components soon, this is a fairly simple way to get the end result you need.

This article provides the steps to set up a fixed Burger Trigger near the top left corner of the browser and appearing on top of the Off Canvas component having a Slide Menu.

We shall make the hamburger menu static from 768px to 1300px since it will be overlapping the logo during these widths when using the Atomic design set of Oxygen. These widths can be changed depending on your site’s header layout.

Here is the sample structure after you have implemented the steps below.

Step 1

Edit your Main catch all template with Oxygen and add a Burger Trigger component. In this example, let’s add it to the left of text link in Header Builder’s Header Row (bottom one).

Set the Burger Line Height to 3 to make the hamburger’s lines thinner.

Go to Button Styles and set a padding of 10px each on top, left and bottom and 15px on the right.

Background Color: #ffffff

Border Radius: 30px

Go to Button Text and add MENU text. If you would like to change the font size of this text, you can do so at Typography.

Go to Advanced > Layout.

Set Position to fixed with 20px top and left each.

Set Z-index of 1001.

Step 2

Add an Off Canvas component below all the other components.

Under Layout / Spacing you might want to add a value like 100px so that there will be space for the X icon.

Add a Slide Menu inside the Off Canvas and select your desired menu to be shown.

In our example site, we added 10px padding at the top and bottom under Menu Items / Spacing.

Then under Sub Menus / Spacing, added 20px left padding.

Step 3

Let us add some custom CSS at Manage > Stylesheets.

.admin-bar #-burger-trigger-59-29 {
	top: 52px; /* 20 + 32 */
}

@media only screen and (max-width: 782px) {
	.admin-bar #-burger-trigger-59-29 {
		top: 66px; /* 20 + 46 */
	}
}

.hamburger-box {
	transform: scale(0.5);
}

@media only screen and (min-width: 768px) and (max-width: 1300px) {
	#-burger-trigger-59-29 {
		position: static;
	}
}

Replace all instances of -burger-trigger-59-29 in the above with the ID of your Burger Trigger.

.admin-bar #-burger-trigger-59-29 {
	top: 52px; /* 20 + 32 */
}

@media only screen and (max-width: 782px) {
	.admin-bar #-burger-trigger-59-29 {
		top: 66px; /* 20 + 46 */
	}
}

will ensure that the fixed hamburger menu will be 20px from the top even when admin bar is visible. 32px is the height of the admin bar above 783px. 782px and below it is 46px tall.

.hamburger-box {
	transform: scale(0.5);
}

will reduce the size of the hamburger menu lines.

@media only screen and (min-width: 768px) and (max-width: 1300px) {
	#-burger-trigger-59-29 {
		position: static;
	}
}

will make the hamburger menu static during the viewport widths when it will be overlapping the logo. You may need to change these widths or make any other adjustments as needed.

1:06mins

Easy to implement header search functionality with three types of header search.

4:45 mins

Showcasing two AJAX Woocommerce components. The mini cart and the cart counter. Both can be used together or with existing components like the Offcanvas and the Modal.

Vid – 6mins

A quick over the shoulder on visually styling a polling Fluent Form using the fluent form component in OxyExtras.

chevron-down