Fixing the Nordic Theme: How to Prevent Your Shopify Header from Overlapping Your Announcement Bar on Mobile

Hey there, fellow store owners! It's your Shopify migration expert here, diving into a really common head-scratcher that recently popped up in the community forums. We've all been there: you've got your beautiful store, your catchy announcement bar ready to go, and then you check it on your phone… and disaster strikes! Your header is practically eating your announcement bar, making everything look cluttered and unprofessional. Sound familiar?

This exact scenario was highlighted by siva_fds in a recent thread about the Nordic theme. They were seeing their header and announcement bar “collapse into each other” on mobile, and trust me, it’s a pain many of you can relate to. Thankfully, the community stepped up with some fantastic solutions, and I’m here to break them down for you.

Why Your Header & Announcement Bar Might Be Colliding on Mobile

Before diving into fixes, let's understand the root cause. As rajimulislamjoy pointed out, this is often a spacing or z-index issue, especially on mobile. Titan from Shopplaza gave a brilliant explanation: the header is often positioned with a hardcoded top: 40px; value. This assumes your announcement bar will always be around 40px tall. However, on mobile, announcement bar text frequently wraps to two or more lines, making the bar taller than that fixed 40px.

The header’s top offset stays locked, causing it to sit underneath the now-taller announcement bar. v.marychenka further confirmed this, noting Nordic often pins the header at top:var(--announcement-height) which is then typically set to a fixed 40px by the theme. When a "View More" button or longer text forces a second line, the header lands right on top.

Community-Approved Solutions for a Clean Mobile Layout

Here are a few ways the community tackled this, ranging from quick CSS tweaks to a more robust, dynamic approach. Remember to always duplicate your theme before making code changes!

Solution 1: Defining Announcement Bar Height with Custom CSS (Ploqo's Method)

This is a solid starting point shared by Ploqo. It directly increases the minimum height of your announcement bar on mobile, ensuring enough room for your header.

1. Go to your Shopify Admin, navigate to Online Store, then click Edit theme on your Nordic theme.
2. 
3. Click the Theme settings icon (palette/gears) at the top of the left panel, then select Custom CSS.
4. 
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. 
7. Click Save.
8. 

Ploqo's Tip: If the header still overlaps, increase 70px to 90px. This won't affect your desktop layout.

Solution 2: Directly Adjusting Sticky Header Position (ai-code-fixer's Method)

ai-code-fixer offered another direct CSS fix, targeting the sticky header's position. This is useful if your header is in "overlay" mode and fixed on scroll.

1. Go to Shopify Admin → Online Store → Edit Code.
2. Find your base.css file (or similar) and paste this code at the very end:

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

3. Save your changes.

This pushes the sticky, overlay header 70px down from the top on mobile devices (screens up to 767px wide).

Solution 3: Robust Dynamic Adjustment with JavaScript & CSS (Shopplaza Team)

For a truly robust fix that adapts to any announcement bar height changes (like text wrapping or font size adjustments), Titan from Shopplaza proposed a dynamic approach using JavaScript and CSS custom properties.

1. Add the JavaScript: Go to Online Store → Edit Code → theme.liquid. Find a suitable place (e.g., just above the closing tag) and paste this script:

   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);
   

2. Update your CSS: In Theme settings > Custom CSS (or your main stylesheet), add or modify the top property for your header:

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

This recalculates on every load and resize, ensuring your header always sits perfectly below your announcement bar, regardless of content changes!

Bonus Tip: Hiding Elements to Prevent Wrapping (v.marychenka's Workaround)

Sometimes, a specific element within the announcement bar causes wrapping. v.marychenka suggested that a "View More" button could be the culprit. If you're okay hiding such an element on mobile, this can be a quick fix:

1. Go to Theme settings > Custom CSS.
2. Paste this code and save:

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

This hides the .button--simple on screens up to 749px, potentially preventing text from wrapping and keeping the bar's height consistent.

Choosing Your Fix & Final Thoughts

The Shopify community truly shines when tackling these issues! For a quick resolution, Ploqo's or ai-code-fixer's CSS adjustments are often sufficient. If you need a future-proof solution that handles dynamic content in your announcement bar, the JavaScript and CSS Custom Property method from Shopplaza is ideal. And for specific elements causing wrapping, v.marychenka's tip is a clever workaround.

Always test your changes thoroughly on various mobile devices and screen sizes. A polished, responsive design is vital for a great user experience and crucial for conversions. If you're just starting your journey with Shopify, remember that attention to these details can make all the difference!