窗口缩小或移动设备上Logo重叠，需保留指定Logo的技术求助

Hey there! Let's get that overlapping logo issue sorted out for your site. Since you want to retain the logo with "Nurture Vitality" text and remove the other one when the screen is resized (like on tablets or mobile devices), here are practical solutions tailored to common website setups:

1. CSS Media Query (Most Common Fix) #

This method lets you hide the unwanted logo only on smaller screens, keeping your desktop layout intact. Here's how to do it:

• Open your browser's DevTools (press F12 or right-click the unwanted logo and select "Inspect").
• Identify the unique selector for the logo you want to remove (e.g., a class like .site-logo--secondary or an ID like #mobile-logo).
• Add this CSS code to your site's stylesheet (or custom CSS section in your CMS):

/* Hide unwanted logo on screens smaller than 768px (adjust breakpoint as needed) */
@media (max-width: 768px) {
  .site-logo--secondary { /* Replace with your actual selector */
    display: none !important;
  }
}

• Adjust the max-width value to match the screen size where the overlap starts happening.

2. CMS/Theme Settings Adjustment (If Using a Platform like WordPress) #

If your site is built on a CMS with a custom theme:

• Navigate to your site's admin dashboard, then look for "Appearance" > "Customize" (or similar theme settings).
• Check for logo-related options—many themes let you set a separate mobile logo or disable secondary logo display entirely.
• Disable the option for the secondary logo, or set the "Nurture Vitality" logo as the sole logo for all screen sizes.

3. Static HTML/Direct Code Edit (For Static Sites) #

If you're working with a static HTML site:

• Open the HTML file where the logos are rendered.
• Locate the code for the unwanted logo (it might look like <img src="path/to/other-logo.png" alt="Other Logo">).
• Either delete that element entirely, or wrap it in a CSS class that hides it on mobile (using the media query method above is safer than deleting if you want to keep it for desktop).

Quick Tip #

Always test your changes across different screen sizes after applying them—use your browser's DevTools responsive view to simulate tablet and mobile devices, or test on actual devices if possible.

内容的提问来源于stack exchange，提问作者Deney Raike