/* ========================================================================== DIYSSD Navigation Menu Styles Scoped with 'diyssd-' prefix to prevent conflicts ========================================================================== */ /* Reset and base styles */ .diyssd-nav-container * { box-sizing: border-box; margin: 0; padding: 0; } /* Main navigation container */ .diyssd-nav-container { width: 100%; background-color: #f4f3f2; position: relative; z-index: 1000; font-family: -apple-system, BlinkMacSystemFont, Inter, Roboto, Ubuntu, sans-serif; } /* Navigation bar */ .diyssd-nav { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; max-width: 100%; margin: 0 auto; position: relative; } /* ========================================================================== LOGO STYLES ========================================================================== */ .diyssd-logo { flex-shrink: 0; transition: opacity 0.2s ease; } .diyssd-logo:hover { opacity: 0.8; } .diyssd-logo img { height: auto; width: auto; max-height: 40px; max-width: 250px; display: block; padding-right: 8px; } /* ========================================================================== DESKTOP MENU STYLES ========================================================================== */ .diyssd-desktop-menu { display: none; align-items: center; list-style: none; gap: 0; } .diyssd-menu-item { position: relative; margin: 0; } .diyssd-menu-link { display: flex; align-items: center; padding: 0.75rem 1.25rem; text-decoration: none; color: #374151; font-weight: 500; font-size: 0.95rem; transition: all 0.2s ease; border-radius: 4px; white-space: nowrap; } .diyssd-menu-link:hover { background-color: rgba(0, 0, 0, 0.05); color: #1f2937; } /* Dropdown arrow */ .diyssd-menu-link.has-dropdown::after { content: "▼"; font-size: 0.7rem; margin-left: 0.5rem; transition: transform 0.2s ease; color: #6b7280; } .diyssd-menu-item:hover .diyssd-menu-link.has-dropdown::after { transform: rotate(180deg); } /* Menu dividers for desktop */ .diyssd-menu-divider { width: 1px; height: 20px; background-color: rgba(0, 0, 0, 0.4); margin: 0 0.5rem; } /* ========================================================================== DROPDOWN MENU STYLES ========================================================================== */ .diyssd-dropdown { position: absolute; top: 100%; left: 0; background-color: white; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.08); min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; z-index: 1001; overflow: hidden; } .diyssd-menu-item:hover .diyssd-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .diyssd-dropdown-link { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #4b5563; font-size: 0.9rem; transition: all 0.15s ease; border-bottom: 1px solid #f3f4f6; } .diyssd-dropdown-link:last-child { border-bottom: none; } .diyssd-dropdown-link:hover { background-color: #f9fafb; background-color: #f2f4f5; color: #1f2937; color: #381f2f; font-weight: 400; } /* ========================================================================== MOBILE TOGGLE BUTTON (INDENTED LINES LIST ICON) ========================================================================== */ .diyssd-mobile-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0; transition: all 0.2s ease; } .diyssd-mobile-toggle:hover { background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; } /* Indented list lines */ .diyssd-hamburger { position: relative; width: 24px; height: 2px; background-color: #374151; transition: all 0.3s ease; border-radius: 1px; } .diyssd-hamburger::before, .diyssd-hamburger::after { content: ""; position: absolute; height: 2px; background-color: #374151; transition: all 0.3s ease; border-radius: 1px; } /* Top line - full width */ .diyssd-hamburger::before { top: -6px; left: 0; width: 24px; } /* Bottom line - full width */ .diyssd-hamburger::after { bottom: -6px; left: 0; width: 24px; } /* Middle line (the hamburger element itself) - indented */ .diyssd-hamburger { width: 18px; margin-left: 6px; } /* Active state animation - transform to X */ .diyssd-mobile-toggle.active .diyssd-hamburger { background-color: transparent; transform: translateX(-3px); } .diyssd-mobile-toggle.active .diyssd-hamburger::before { top: 0; left: 0; width: 24px; transform: rotate(45deg); } .diyssd-mobile-toggle.active .diyssd-hamburger::after { bottom: 0; left: 0; width: 24px; transform: rotate(-45deg); } /* ========================================================================== MOBILE MENU STYLES ========================================================================== */ .diyssd-mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1001; } .diyssd-mobile-overlay.active { opacity: 1; visibility: visible; } .diyssd-mobile-menu { position: fixed; top: 0; left: 0; height: 100%; background-color: white; transform: translateX(-100%); transition: transform 0.3s ease; z-index: 1002; overflow-y: auto; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } .diyssd-mobile-menu.active { transform: translateX(0); } /* Mobile menu header */ .diyssd-mobile-header { display: flex; justify-content: flex-end; align-items: center; padding: 1rem; border-bottom: 1px solid #e5e7eb; background-color: #f9fafb; } .diyssd-mobile-close { background: none; border: none; font-size: 1.25rem; color: #6b7280; cursor: pointer; padding: 0.5rem; border-radius: 4px; transition: all 0.2s ease; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } .diyssd-mobile-close:hover { background-color: #e5e7eb; color: #374151; } /* Mobile navigation */ .diyssd-mobile-nav { padding: 1rem; } .diyssd-mobile-section { margin-bottom: 1.5rem; } .diyssd-mobile-heading { font-size: 1.1rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; } .diyssd-mobile-divider { height: 1px; background-color: #e5e7eb; margin-bottom: 0.75rem; } .diyssd-mobile-link { display: block; padding: 0.75rem 1rem; padding: 0.25rem 1rem; text-decoration: none; color: #4b5563; font-size: 0.95rem; margin-bottom: 0.25rem; border-radius: 4px; transition: all 0.2s ease; font-family: -apple-system, BlinkMacSystemFont, Inter, Roboto, Ubuntu, sans-serif; } .diyssd-mobile-link:hover { background-color: #f3f4f6; color: #1f2937; } /* ========================================================================== RESPONSIVE BREAKPOINTS ========================================================================== */ /* Mobile: 640px and below */ @media (max-width: 640px) { .diyssd-nav { padding: 0.5rem 1rem; } .diyssd-logo img { max-height: 32px; max-width: 160px; max-width: 250px; padding-right: 0; } .diyssd-mobile-menu { width: 100%; } .diyssd-mobile-toggle { display: flex; } } /* Mobile Landscape: 641px to 844px */ @media (min-width: 641px) and (max-width: 844px) { .diyssd-mobile-menu { width: 75%; max-width: 450px; } .diyssd-mobile-toggle { display: flex; } } /* Tablet: 845px to 1080px */ @media (min-width: 845px) and (max-width: 1080px) { .diyssd-mobile-menu { width: 75%; max-width: 500px; } .diyssd-mobile-toggle { display: flex; } } /* Desktop: 1081px to 1280px */ @media (min-width: 1081px) and (max-width: 1280px) { .diyssd-desktop-menu { display: flex; } .diyssd-mobile-toggle { display: none; } } /* Large Desktop: 1281px and above */ @media (min-width: 1281px) { .diyssd-desktop-menu { display: flex; } .diyssd-mobile-toggle { display: none; } .diyssd-nav { padding: 0.75rem 2rem; } } /* ========================================================================== ACCESSIBILITY & FOCUS STYLES ========================================================================== */ /* The outline will only be applied when a keyboard is used for navigation. */ body.diyssd-using-keyboard .diyssd-menu-link:focus, body.diyssd-using-keyboard .diyssd-dropdown-link:focus, body.diyssd-using-keyboard .diyssd-mobile-link:focus, body.diyssd-using-keyboard .diyssd-mobile-toggle:focus, body.diyssd-using-keyboard .diyssd-mobile-close:focus { outline: 2px solid #3b82f6; outline-offset: 2px; } /* Prevent body scroll when mobile menu is open */ .diyssd-nav-container.mobile-menu-open { overflow: hidden; } /* High contrast mode support */ @media (prefers-contrast: high) { .diyssd-menu-divider { background-color: #000; } .diyssd-dropdown { border: 2px solid #000; } .diyssd-mobile-divider { background-color: #000; height: 2px; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .diyssd-nav-container * { transition: none !important; animation: none !important; } }

Frequently Asked Questions

Question

Category: Pricing and Discount Policies

Why is pricing now called estimated pricing?

Answer

Aug 28, 2025

DIY SSD,

Staff

Our prices are updated in batches, so the numbers reflect the moment they were last refreshed. Because affiliate prices can shift between updates, they may not always match exactly. Since our prices are meant as a guideline rather than exact figures, we now call them ‘estimated (Est.) pricing’ to make that clearer. To keep things simple, we also removed the cents.

Question

Category: Product Listing and Navigation

I’m confused by all the price lists. Which one should I use?

Answer

Aug 26, 2025

DIY SSD,

Staff

Each price list serves a different purpose:

Exclusive Discounts – Only shows products currently on sale. Best choice if you want the lowest prices right now.
Complete Catalog – The full unfiltered list of every product, regardless of pricing.
Affiliate Pricing – Five separate lists grouped by seller (e.g., Amazon-only, Newegg-only). Helpful if you prefer shopping from a specific retailer.
Expanded Catalog – Same products as the Complete Catalog but with advanced search, sort, and filter tools for deeper comparisons.

Question

Category: Product Listing and Navigation

What changes are included in the August ‘25 update.

Answer

Aug 19, 2025

DIY SSD,

Staff

This update is all about making the site smoother to use, with upgrades in a few key spots.

New Pages

Expanded pricing

Affiliate specific pricing

Amazon
B&H
Best Buy
Manufacturer Direct
Newegg

New Formats

Estimated Price > whole dollars
Estimated Price Date

Pro tip: When your screen gets too narrow to show all the options, the filter buttons automatically move under a "More" button to save space. Flipping your phone to landscape will often resolve the issue.

Extra scoop on these layout tweaks is on the horizon, stay tuned ✨.

Question

Category: Product Listing and Navigation

Why do some links display multiple product models?

Answer

Aug 16, 2025

DIY SSD,

Staff

Some affiliates will combine product models such as size, capacity, or color on a single page. For example:

Affiliate SSD

1 TB
2 TB
4 TB

In this circumstance, when we send you to the page you will see all the choices and the affiliate determines which choice will be the default.

About

Privacy

Terms