Nordic Theme Header Overlap on Mobile? Community-Backed Fixes for Shopify Stores

Ever been there? You’ve put a ton of effort into making your Shopify store look fantastic on desktop, only to pull it up on your phone and find things are… well, a little wonky. It's a common story, and one that recently popped up in the Shopify community involving the popular Nordic theme. Our fellow store owner, siva_fds, reached out because their header and announcement bar were collapsing into each other on mobile, creating a cluttered mess. If this sounds familiar, you're in the right place!

The issue, as siva_fds described, was a classic mobile display headache: "I’m using the Nordic theme, and when I add an announcement bar to the header, the header and announcement bar collapse into each other, making the layout look cluttered, especially on mobile." This is a problem many face, and thankfully, the community jumped in with some fantastic insights and solutions.

Understanding the Overlap: Why It Happens

Before we dive into the fixes, let's understand the root cause. As @shopplaza_team from Shopplaza brilliantly explained, the core issue often lies with how the Nordic theme positions the header. It's typically set with a hardcoded pixel value, like position: absolute; top: 40px;. This 40px assumes your announcement bar will always be exactly that tall.

The snag? On mobile, announcement bar text that fits perfectly on one line on desktop often wraps to two or more lines on narrow screens. This makes the announcement bar taller than the assumed 40px. But since the header's top offset remains stubbornly at 40px, it starts sitting underneath the now-taller announcement bar. Voilà! The dreaded overlap.

Another common culprit, as pointed out by @v.marychenka, could be a "View More" button within your announcement bar. This button, when it wraps to a new line on mobile, can also push the announcement bar's height beyond that fixed 40px, leading to the same collision.

Here's a visual of the problem from siva_fds's original post:

Quick Fixes: CSS Adjustments for Mobile

Several community members offered immediate CSS solutions that can often resolve the problem quickly. These are great for a direct fix, but remember they might need tweaking if your announcement bar content changes significantly.

Option 1: Adjusting Announcement Bar Height (Ploqo's Method)

@Ploqo provided a clear, step-by-step guide to adjust the announcement bar's minimum height on mobile. This ensures the bar itself has enough room, pushing the header down.

Here's what it looks like before and after this fix:

Steps:

1. Go to your Shopify Admin > Online Store.
2. Click the ... (three dots) button next to your Nordic theme, then select Edit code.
3. Click on Theme settings (the gear icon) at the top of the left panel.
4. Click Custom CSS.
5. Paste this code at the end of the box:

@media screen and (max-width: 749px) {
  html {
    --announcement-height: 70px !important;
  }
  .announcement-bar {
    min-height: var(--announcement-height);
  }
}

6. Click Save.

Pro-tip: If your header still covers part of the bar, change 70px to 90px or another suitable value. Your desktop header will remain unaffected.

Option 2: Shifting the Header's Top Position (ai-code-fixer's Method)

@ai-code-fixer suggested targeting the header's position directly, particularly if it's using position: absolute. This code snippet also goes into your Custom CSS:

Steps:

1. Go to your Shopify Admin > Online Store.
2. Click the ... (three dots) button next to your Nordic theme, then select Edit code.
3. Click on Theme settings (the gear icon) at the top of the left panel.
4. Click Custom CSS.
5. Paste this code at the end of the box:

@media only screen and (max-width: 767px) {
  .shopify-section-header-sticky.header-overlay.always-fixed {
    top: 70px !important;
  }
}

6. Click Save.

This snippet specifically targets sticky, overlay headers on mobile (up to 767px width) and pushes their top position down by 70px.

Option 3: Hiding a Problematic Button (v.marychenka's Method)

If your specific issue is caused by a "View More" or similar button in your announcement bar wrapping on mobile, @v.marychenka had a clever, targeted suggestion: hide that button on mobile if it's not essential or has no link yet.

Steps:

1. Go to your Shopify Admin > Online Store.
2. Click the ... (three dots) button next to your Nordic theme, then select Edit code.
3. Click on Theme settings (the gear icon) at the top of the left panel.
4. Click Custom CSS.
5. Paste this code at the end of the box:

@media screen and (max-width: 749px) {
  .announcement-bar .button--simple { display: none; }
}

6. Click Save.

Important Note: This is a temporary fix. If you add a link to that button later, you'll want to remove this CSS rule so your customers can access it.

The Robust Fix: Dynamic Offset with JavaScript & CSS

While the CSS tweaks are great for quick solutions, @shopplaza_team offered what I'd call the "gold standard" fix. This method makes the header's offset dynamic, so it always adjusts to the announcement bar's actual height, no matter how much content it has or how many lines it wraps to. This is crucial for a truly responsive and future-proof design.

This approach involves a small piece of JavaScript to calculate the announcement bar's height and apply it as a CSS variable, which the header then uses.

Step 1: Add JavaScript for Dynamic Height Calculation

You'll need to add this JavaScript code to your theme. A good place for this is typically within your theme.liquid file, just before the closing tag, or in a new JavaScript file if your theme structure allows for it.

function updateAnnouncementOffset() {
  var announcementBar = document.querySelector('.section-announcement');
  if (announcementBar) {
    document.documentElement.style.setProperty('--announcement-bar-height', announcementBar.offsetHeight + 'px');
  }
}
window.addEventListener('load', updateAnnouncementOffset);
window.addEventListener('resize', updateAnnouncementOffset);

This script does two main things: it finds your announcement bar, measures its height (offsetHeight), and then sets a CSS custom property (--announcement-bar-height) on the element. It runs when the page loads and whenever the window is resized (which handles orientation changes on mobile and text wrapping).

Step 2: Update Your Header CSS

Now, you need to tell your header to use this dynamic height. You'll add this CSS to your Custom CSS section (similar to the previous options) or wherever the existing top: 40px rule for your header lives.

.shopify-section-header {
  top: var(--announcement-bar-height, 40px);
}

This code tells the .shopify-section-header to position itself from the top using the --announcement-bar-height variable. The 40px after the comma is a fallback in case the variable isn't set for some reason, ensuring your header still has a default position.

Before You Start: A Critical Reminder

Whenever you're making code changes to your Shopify theme, it's always, always, always a good idea to duplicate your theme first. This creates a backup, so if anything goes wrong, you can easily revert to your previous version without impacting your live store. Shopify Support, as @v.marychenka noted, generally won't troubleshoot custom code from forums, so backing up is your safety net.

Getting your mobile experience right is non-negotiable in today's e-commerce world. A seamless, clutter-free mobile design can make all the difference in converting visitors into loyal customers. Whether you opt for a quick CSS adjustment or the more robust dynamic solution, the goal is a perfectly aligned header and announcement bar, giving your customers the best possible first impression on their phones. Keep testing on different devices, and don't be afraid to experiment to find the perfect fit for your unique store. If you're just starting your journey into e-commerce, remember that setting up a solid foundation with Shopify can be incredibly empowering, and this community is always here to help you navigate the nuances of theme customization.