Skip to main content
All CollectionsBuilding BlocksSticky Bar
Resolving sticky bar overlap and push down issues
Resolving sticky bar overlap and push down issues

Learn how to fix situations where the sticky bar overlaps your menu or header

Bart Coppens avatar
Written by Bart Coppens
Updated over 3 years ago

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:

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:

Did this answer your question?