You are browsing documentation for version 5.1 of OroCommerce, supported until March 2026. Read the documentation for version 6.0 (the latest LTS version) to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Dom Relocation Global View 

Dom Relocation View is used when you need to move a dom element from one container to another on browser window resize. For example: move a menu list from the top bar to the hamburger menu dropdown in cases when you cannot do this using css @media queries.

How to Use 

To move an element from one container to another on window resize, add data-dom-relocation-options attributes to the corresponding element, as illustrated below:

<div class="element-to-move"
        responsive: [
                viewport: 'tablet',
                moveTo: '#parent_container' // jQuery selector,
                sibling: '#sibling_element' // jQuery selector,
                prepend: true // Boolean,
                endpointClass: 'some-class-add-after-move' // String
<!-- Other content -->



Type: Array

Set multiple moveTo targets for different types of screens:

responsive: [
        viewport: 'tablet',
        moveTo: '[data-target-example-1]', // jQuery selector
        sibling: '[data-target-example-1] > div:eq(2)', // jQuery selector
        prepend: true // Boolean
        viewport: 'mobile',
        moveTo: '[data-target-example-2]', // jQuery selector
        prepend: true, // Boolean
        endpointClass: 'moved-to-parent' // String

It works with same logic like css @media, so the last item of the array has higher priority.


Type: Object

Default: ‘{}’

The option describes when to relocate the DOM element. All available screen types are defined by the Viewport Manager.


Type: String

Set the target selector where to move the element.


Type: String

Indicate next to which element to insert another element.


Type: Boolean

Change behavior to append the element to the target parent. If set to true, the element is going to prepend the target element. If set to false, the element is going to append to the end of the parent.


Type: String

The css class added to an HTML element after it was moved.