/* ========================================================================== 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: 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.

Question

Category: Pricing and Discount Policies

Why do some affiliates want you to add an item to your cart before showing the sale price?

Answer

Aug 16, 2025

John,

Editor In Chief

The primary reason for this practice is to comply with Minimum Advertised Price (MAP) policies set by manufacturers. These policies dictate the lowest price at which a retailer can advertise a product, but not necessarily the price at which they can sell it.

Pricing Strategy Benefits

Circumventing MAP restrictions: By showing the price only in the cart, retailers can technically sell items below the MAP without violating advertising agreements.
Protecting brand value: This approach helps maintain a product's perceived value and prevents price erosion.
Encouraging engagement: It prompts potential customers to take an additional step, potentially increasing the likelihood of a purchase.
Limiting price comparisons: It makes it harder for competitors and price comparison tools to track and match prices.

Diy Solid State Drive does not endorse this strategy and would prefer affiliates openly post their best price with requiring customers jump through hoops.

Question

Category: Product Listing and Navigation

Where is the home button located?

Answer

Aug 16, 2025

DIY SSD,

Staff

The site logo serves as a universal home button, allowing users to return to the homepage at any point. This is a common web design convention, providing a familiar and efficient way to navigate.

About

Privacy

Terms