Issue
- When selecting any sticky position option, the bar covers the website sticky header when scrolling.
- The bar covers the mobile menu.
Notes
- If you are using a non-sticky option, jump to Step 3.
- Start from Step 1 if you want to make the bar sticky.
Solution - 4 steps
Step 1: Select the placeholder option
- Select the last option under the "position" setting in the bar configuration in the App
- Scrolling to the very end, and click the "Save" button to save the change
Step 2: Add the bar
- Go to Admin > Online Store > Themes
- Click the "Actions" button on the right-hand side, and select "Edit code"
- Find header.liquid and open it
- Add following code at the beginning of the file and Save the changes.
<div id="ecb_placeholder"></div>
Step 3: Add the bar part II
- Find theme.liquid and open it
- Find </body> near the end of the file
- Add following code before it and Save the changes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Step 4: Add CSS
- Find theme.scss.liquid from the left-hand side file list and open it
- Add following codes at the very end of the file and save the changes.
#ecb_background{ z-index: 9 !important; }

Comments
0 comments
Article is closed for comments.