Not pushing down content
On some themes, the sticky bar does not push down the content correctly.
When this happens you have the following choices:
Select a different position: show the bar under the menu
Select a different position: show the bar at the bottom of the screen
Add markers in your theme's header liquid to instruct the app to push the content of specific HTML elements down
Add a selector in your theme's flags liquid to instruct the app to push the content of specific HTML elements down
Overlap
On other themes, the sticky bar may overlap other content of your store, for example:
The sticky bar may overlap your drawer cart
The sticky bar may overlap the menu (mostly when viewing the shop on a mobile device)
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.
Show the bar at the bottom of the screen
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:
Top (sticky or not)
Under menu
Bottom
Show the bar under the menu
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:
Top (sticky or not)
Under menu
Bottom
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:
limoniapps-discountninja-headersection
If your theme uses different header sections for desktop and mobile, use the following CSS classes instead:
Desktop:
limoniapps-discountninja-headersection-desktop
Mobile:
limoniapps-discountninja-headersection-mobile
Add markers in your theme's header liquid to instruct the app to push the content of specific HTML elements down
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:
limoniapps-discountninja-topmargin
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:
limoniapps-discountninja-topmargin-mobile
Conversely, to push down a section only on desktop use the following CSS class:
limoniapps-discountninja-topmargin-desktop
Example 1
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):
Example 2
If the HTML element on line 81 (with id menu-header) must be pushed down:
Then, after adding the CSS class, the line becomes:
Add a selector in your theme's flags liquid to instruct the app to push the content of specific HTML elements down
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.
Change the z-index of the sticky bar
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:
The sticky bar may overlap your drawer cart
The sticky bar may overlap the menu (mostly when viewing the shop on a mobile device)
To change the z-index, open the Settings > Assets > CSS menu in the app:
and add a new line in the Custom CSS section:
#limoniapps-discountninja-stickybar-wrapper { z-index: 1 }
You can change the z-index number for any integer value.
Example:
