I recently coded a Custom Horizontal swipe navigation menu as a header group below the header. However if i scroll down a product page and then back up slightly the header reappears but not the horizontal navigation menu. It only appears when i scroll all the way to the top. I’m unsure if this is a custom CSS issue or a liquid issue, ive tried everything in both but cant get it to work.
Below is My custom CSS.
.mobile-category-nav {
position: sticky;
top: 0;
z-index: 1;
background: #efefef;
transition: transform 0.3s ease-in-out; /* Ensures smooth hiding/showing /
}
.nav-wrapper {
background: #efefef;
}
.nav-item a {
font-family: “Futura Semi Bold”, Arial, sans-serif;
font-weight: 550;
}
.nav-item {
padding-top: 1px;
padding-bottom: 1px;
}
.mobile-category-nav.hide {
transform: translateY(
-100%
); / Moves the nav bar up out of the visible area */
}
Here is my custom liquid.
{% if section.settings.show_section %}
{% if section.settings.menu != blank %}
-
{% for link in linklists[section.settings.menu].links %}
- {{ link.title }} {% endfor %}
{% stylesheet %}
/* Wrapper styles */
.mobile-category-nav {
position: sticky;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
background: #efefef;
}
.mobile-category-nav[data-hide-scroll=“true”] {
transition: transform 0.3s ease;
}
.mobile-category-nav.hide {
transform: translateY(-100%);
}
.mobile-category-nav .nav-wrapper {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices /
overflow-y: hidden; / Hide vertical scrollbar */
}
/* Hide scrollbar across all browsers */
.mobile-category-nav .nav-wrapper::-webkit-scrollbar {
display: none;
}
/* Navigation item styles */
.mobile-category-nav .nav-item {
display: inline-block;
padding: 10px 15px;
}
/* Link styles */
.mobile-category-nav a {
display: block;
text-decoration: none;
color: #333;
font-size: 16px;
}
/* Additional container styles */
.mobile-category-nav {
text-align: center;
}
/* List and list item styles */
.mobile-category-nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.mobile-category-nav li {
margin-right: 20px; /* Space between items */
}
{% endstylesheet %}
{% javascript %}
document.addEventListener(‘DOMContentLoaded’, function() {
const nav = document.querySelector(‘.mobile-category-nav’);
if (!nav || nav.getAttribute(‘data-hide-scroll’) !== ‘true’) return;
let lastScroll = window.pageYOffset || document.documentElement.scrollTop;
let scrollThreshold = 20; // Smaller threshold for more sensitivity
window.addEventListener(‘scroll’, () => {
const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
// Always show the bar if scrolling up slightly or reaching the top of the page
if (currentScroll <= 0 || currentScroll < lastScroll - scrollThreshold) {
nav.classList.remove(‘hide’);
} else if (currentScroll > lastScroll + scrollThreshold) {
nav.classList.add(‘hide’);
}
lastScroll = currentScroll;
// Debug logs to understand behavior
console.log(Current Scroll: ${currentScroll}, Last Scroll: ${lastScroll}, Nav Class: ${nav.classList.contains('hide') ? 'Hidden' : 'Visible'});
});
});
{% endjavascript %}
{% schema %}
{
“name”: “Mobile Category Nav”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_section”,
“label”: “Show Mobile Category Nav”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “hide_on_scroll”,
“label”: “Hide on scroll”,
“default”: false
},
{
“type”: “link_list”,
“id”: “menu”,
“label”: “Menu”,
“default”: “main-menu”,
“info”: “Select the menu to display”
},
{
“type”: “color”,
“id”: “text_color”,
“label”: “Text Color”,
“default”: “#333333”
},
{
“type”: “color”,
“id”: “border_color”,
“label”: “Border Color”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “spacing”,
“label”: “Spacing Between Links”,
“default”: 20,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “px”
},
{
“type”: “select”,
“id”: “font_family”,
“label”: “Font Style”,
“options”: [
{
“value”: “heading”,
“label”: “Heading Font”
},
{
“value”: “subheading”,
“label”: “Subheading Font”
},
{
“value”: “body”,
“label”: “Body Font”
}
],
“default”: “heading”
}
],
“presets”: [
{
“name”: “Mobile Category Nav”,
“category”: “Custom”
}
]
}
{% endschema %}
