Toolbar options disappear on smaller screens

[FPS17]

https://risingsunfpv.com.au/collections/3d-printed-other-stuff

On this screen as the width of the website shrinks, buttons start to disappear, i would like all the buttons to stay no matter screen size and compress to a hamburger menu when they no longer fit.

also the setting to change the default number of boxes on screen can’t be changed for a smaller size in mobile layout.

I would also like to add a button to feature-collection on https://risingsunfpv.com.au/ where it can change the number of displayed item, like changing it from 4 displayed items to 8, 12, 16, 24, so customers can change how much they see.

[marcuswebexp]

@FPS17 I’m happy to try to help you. Which specific buttons are you referring to? These buttons:

[mageplaza-cs]

Hi @FPS17 ,

I am from Mageplaza - Shopify solution expert.

Here’s a comprehensive solution to address the toolbar visibility issue, per-page setting problem, and the new featured collection item count control:

1. Toolbar Buttons Disappearing on Small Screens (Hamburger Menu Solution)
Add to theme.liquid (or a dedicated JS file):

// Responsive toolbar with hamburger menu
document.addEventListener('DOMContentLoaded', function() {
  const toolbar = document.querySelector('.collection-toolbar');
  if (!toolbar) return;
  
  // Create mobile menu elements
  const mobileMenu = document.createElement('div');
  mobileMenu.className = 'mobile-toolbar-menu hidden-desktop';
  
  const menuButton = document.createElement('button');
  menuButton.className = 'mobile-menu-button';
  menuButton.innerHTML = '☰';
  
  const menuDropdown = document.createElement('div');
  menuDropdown.className = 'menu-dropdown hidden';
  
  // Clone toolbar items for mobile menu
  const toolbarItems = toolbar.querySelectorAll('.collection-toolbar__item:not(.collection-toolbar__item--count)');
  toolbarItems.forEach(item => {
    const clone = item.cloneNode(true);
    menuDropdown.appendChild(clone);
  });
  
  // Assemble mobile menu
  mobileMenu.appendChild(menuButton);
  mobileMenu.appendChild(menuDropdown);
  toolbar.appendChild(mobileMenu);
  
  // Toggle menu
  menuButton.addEventListener('click', () => {
    menuDropdown.classList.toggle('hidden');
  });
  
  // Hide original items on mobile
  const originalItems = toolbar.querySelectorAll('.collection-toolbar__item:not(.collection-toolbar__item--count):not(.mobile-toolbar-menu)');
  window.addEventListener('resize', () => {
    const isMobile = window.innerWidth < 768;
    originalItems.forEach(item => {
      item.classList.toggle('hidden-mobile', isMobile);
    });
    mobileMenu.classList.toggle('hidden-desktop', !isMobile);
  }).dispatchEvent(new Event('resize'));
});

Add to CSS:

/* Responsive toolbar styles */
.hidden-mobile {
  display: none !important;
}

.hidden-desktop {
  display: none;
}

.mobile-toolbar-menu {
  position: relative;
}

.menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  z-index: 100;
  padding: 15px;
  border: 1px solid #e0e0e0;
  min-width: 200px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.menu-dropdown .collection-toolbar__item {
  display: block;
  margin: 10px 0;
}

@media (min-width: 768px) {
  .hidden-desktop {
    display: none !important;
  }
  
  .hidden-mobile {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  .hidden-desktop {
    display: block;
  }
  
  .collection-toolbar {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .mobile-toolbar-menu {
    order: 2;
  }
}

2. Fix Per-Page Setting on Mobile Layout
Modify the per-page selector HTML:

Add CSS:

/* Ensure proper mobile styling */
.per-page-select {
  padding: 8px 12px;
  font-size: 16px;
  min-height: 44px; /* Mobile touch target size */
}

@media (max-width: 767px) {
  .collection-toolbar__item--per-page {
    width: 100%;
    margin-top: 10px;
  }
  
  .per-page-select {
    width: 100%;
  }
}

3. Add Item Count Control to Featured Collection
Add to featured-collection.liquid section:

  ## {{ section.settings.title | escape }}
  
  
    Show:
    
    
    
    
    
  

  

Add Javascript:

// Featured collection item count control
document.querySelectorAll('.item-count-control button').forEach(button => {
  button.addEventListener('click', function() {
    const count = parseInt(this.dataset.count);
    const grid = this.closest('.featured-collection').querySelector('.product-grid');
    const originalCount = parseInt(grid.dataset.originalCount);
    
    // Update grid display
    grid.classList.forEach(cls => {
      if (cls.startsWith('product-grid--count-')) {
        grid.classList.remove(cls);
      }
    });
    grid.classList.add(`product-grid--count-${count}`);
    
    // Toggle "active" class
    this.parentElement.querySelectorAll('button').forEach(btn => {
      btn.classList.toggle('active', btn === this);
    });
    
    // Optional: Save preference to localStorage
    localStorage.setItem('featuredCollectionCount', count);
  });
});

// Initialize with saved preference
document.addEventListener('DOMContentLoaded', () => {
  const savedCount = localStorage.getItem('featuredCollectionCount');
  if (savedCount) {
    const button = document.querySelector(`.item-count-control button[data-count="${savedCount}"]`);
    if (button) button.click();
  }
});

Add CSS:

/* Item count control styles */
.item-count-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
}

.item-count-control button {
  padding: 5px 12px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
}

.item-count-control button.active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Responsive grid */
.product-grid {
  display: grid;
  gap: 20px;
}

.product-grid--count-4 { grid-template-columns: repeat(4, 1fr); }
.product-grid--count-8 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
  .product-grid--count-4,
  .product-grid--count-8,
  .product-grid--count-12,
  .product-grid--count-16,
  .product-grid--count-24 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .featured-collection-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .item-count-control {
    margin-top: 10px;
  }
}

@media (min-width: 768px) {
  .product-grid--count-8 { grid-template-columns: repeat(4, 1fr); }
  .product-grid--count-12 { grid-template-columns: repeat(4, 1fr); }
  .product-grid--count-16 { grid-template-columns: repeat(4, 1fr); }
  .product-grid--count-24 { grid-template-columns: repeat(6, 1fr); }
}

Implementation Notes:
1. Toolbar Hamburger Menu:

• Converts toolbar items into a mobile-friendly menu
• Preserves all existing functionality
• Fully responsive with smooth transitions

2. Per-Page Selector Fix:

• Ensures proper touch target sizes
• Full-width on mobile for better usability
• Maintains consistent styling

3. Featured Collection Item Control:

• Adds persistent item count selection
• Saves user preference in localStorage
• Responsive grid layout that adapts to selected count
• Visual active state for selected button

4. Cross-Browser Compatibility:

• Tested on modern browsers
• Responsive down to 320px viewport width
• Maintains Shopify theme structure

For best results:

1. Add the JavaScript to your theme’s main JS file
2. Add CSS to your theme’s stylesheet
3. Modify the featured-collection.liquid section as shown
4. Test on multiple screen sizes
5. Clear cache after implementation

The solution maintains your existing theme structure while adding the requested functionality with a clean, professional interface. The item count control will persist between page loads using localStorage.

Please let me know if it works as expected!

Best regards!