On some themes, the sticky bar does not push down the content correctly.
When this happens you have the following choices:

On other themes, the sticky bar may overlap other content of your store, for example:

When this happens you can change the z-index (the layer in which the sticky bar is displayed) using CSS. This section explains how you do this.

By default, the sticky bar is displayed on the top and is configured to be sticky. This article explains how you change the position of the sticky bar.

Discount Ninja can display a sticky bar in three locations in your storefront:

By default, the sticky bar is displayed on the top and is configured to be sticky. This article explains how you change the position of the sticky bar.

Discount Ninja can display a sticky bar in three locations in your storefront:

The app expects the header to be in a section with the id shopify-section-header. If your theme includes the header in a section with a different name, edit the liquid file that contains the header section and add the following CSS class to the HTML element:

If your theme uses different header sections for desktop and mobile, use the following CSS classes instead:

Desktop:

Mobile:

IMPORTANT: requires technical skills to edit HTML, contact us if you need assistance.
​
Find your header template first. Not sure how to find or edit the file? Read this article first.
​
In the header template, find the section that needs to be pushed down. This section will be different for every theme. 

On that section add the following CSS class:

You can add this class to any number of sections, each of which will be pushed down.

To push down a section only on mobile use the following CSS class:

Conversely, to push down a section only on desktop use the following CSS class:

If the HTML element on line 81 (header) must be pushed down:

Then, after adding the CSS class, the line becomes (note the space after the limoniapps-discountninja-topmargin class):

If the HTML element on line 81 (with id menu-header) must be pushed down:

Then, after adding the CSS class, the line becomes:

IMPORTANT: requires technical skills to edit HTML, contact us if you need assistance.

In some themes, using CSS classes may not work because, for example, the HTML element that must be pushed down is dynamically added. Or the HTML element must only be pushed down in specific situations.
​
For those scenarios, you can use an advanced technique that consists of setting a jQuery selector in the Discount Ninja flags file.

Edit the code of the theme and find the file with the name limoniapps-discountninja-context-flags.liquid. This file contains a JSON object with variables. One of the variables is named StickyBarShouldPushSelectors:

You can also use the StickyBarShouldPushSelectorsMobile and StickyBarShouldPushSelectorsDesktop variables to add selectors that should only be used on mobile or desktop.

HTML elements with a higher z-index overlap elements with a lower z-index.

You can change the default z-index of the sticky bar to ensure it does not overlap other elements that you do not want to have overlapped. For example:

To change the z-index, open the Settings > Assets > CSS menu in the app:

and add a new line in the Custom CSS section:

You can change the z-index number for any integer value.

Example:
​