Mastering Mobile Menus: Customizing Your Shopify Atlantic Theme's Header

Hey everyone! As a Shopify expert and someone who loves digging into what real store owners are talking about, I often come across some fantastic discussions in the Shopify Community. Recently, a thread popped up that I just had to share insights from, because it tackles a couple of very common pain points when it comes to theme customization, especially on mobile.

Our fellow merchant, dlgillihan, was looking for some specific tweaks to their Atlantic theme: changing the mobile menu (that trusty 'hamburger' icon) from three lines to two, and then rearranging the mobile header so the logo is on the left and the menu/search icons are neatly tucked away on the right. They also had a quick question about H4 & H5 headings always appearing in all caps. Sound familiar? Let's dive into how the community tackled these!

First Things First: Always Duplicate Your Theme!

Before we even think about touching a single line of code, there's one golden rule that Pratham_Jani wisely pointed out:

Worth noting: before editing any code, duplicate your theme first so you always have a clean backup to roll back to if anything breaks.

This is non-negotiable! Always go to Online Store > Themes, find your current theme, click Actions > Duplicate. Trust me, it'll save you a headache later.

Customizing Your Mobile Menu Icon (The Hamburger)

The standard three-line hamburger icon is functional, but sometimes you want a cleaner look, like two lines. The community offered a couple of great ways to achieve this:

Method 1: Directly Editing the SVG File (Recommended for Cleanliness)

This approach, suggested by Pratham_Jani, is often the cleanest because you're modifying the source of the icon itself. Here's how:

1. Go to Online Store > Themes > Actions > Edit Code.
2. In the code editor, search for a file named something like icon-hamburger.svg. It might be in the snippets/ directory or directly under assets/.
3. Once you find it, you'll see SVG code that looks something like this (though exact coordinates might vary):
   

4. Your goal is to remove one of the lines. Look for the `path` element that draws the middle line. In Pratham_Jani's example, they mentioned looking for `y1="12"` if it were individual line elements, but in a combined `path` (like the example above), you'd look for the middle segment. For instance, if you have three `M` commands, delete the middle one. If it's a single `d` attribute, you'll need to identify and remove the middle 'bar' coordinates.
5. A common pattern is three horizontal lines. If your SVG is structured with separate path segments for each line, you'd delete the middle one. If it's a single path string, you'd modify the d attribute. For example, if the original `d` attribute looked like M0,3 H24 M0,12 H24 M0,21 H24 (for a 24-unit wide icon with lines at y=3, 12, 21), you'd remove the middle `M0,12 H24`.
6. 
7. Save your changes.

Method 2: CSS Override with SVG Path (Quick & Dirty)

Maximus3 offered a clever CSS-based solution that overrides the SVG path directly. This is a good option if you can't easily find or want to avoid editing the `icon-hamburger.svg` file.

1. Go to Online Store > Themes > Actions > Edit Code.
2. Open theme.liquid.
3. Paste the following code right before the closing tag. Maximus3 clarified that the closing tag should indeed be and that !important might be necessary for some themes to ensure the override takes effect.

4. 

5. Save your changes.

This CSS code directly defines the SVG 'd' (path data) attribute for the menu icon, effectively redrawing it with two lines. The `!important` ensures it overrides existing styles.

Rearranging Your Mobile Header: Logo Left, Icons Right

This is another popular request for a cleaner mobile aesthetic. The Atlantic theme often uses flexbox for its header layout, which makes this kind of rearrangement quite achievable with CSS.

Approach 1: Targeting .header__mobile (Pratham_Jani's Method)

Pratham_Jani's solution uses flexbox properties to reorder elements. This is a robust way to do it.

1. Go to Online Store > Themes > Actions > Edit Code.
2. Find your theme's main CSS file. This is usually assets/theme.css, assets/base.css, or sometimes assets/theme.scss.liquid. You can also add it to a dedicated 'Custom CSS' section if your theme has one (often found in Theme settings > Custom CSS).
3. Add the following CSS code to the bottom of the file:
   

   @media (max-width: 768px) {
   .header__mobile {
   flex-direction: row;
   justify-content: space-between;
   }
   .header__mobile .header__logo {
   order: 1;
   }
   .header__mobile .header__icons {
   order: 2;
   }
   }

4. Important Note: The exact class names like .header__mobile, .header__logo, and .header__icons might vary slightly in your specific Atlantic theme version. If this code doesn't work, you'll need to use your browser's developer tools (right-click > Inspect) to find the correct class names for your mobile header elements.
5. Save the file.

Approach 2: Alternative CSS Selectors (tim_tairli's Method)

tim_tairli provided another set of CSS rules that might work, especially if your theme's classes are slightly different or if you prefer a different breakpoint.

1. Follow step 1 and 2 from Approach 1 (finding your CSS file or Custom CSS area).
2. Add this code:
   

   @media (max-width: 959px) {
     .main-header--tools-left {
       justify-content: flex-end !important; /* relocate the menu/search buttons */
     }
     .store-title.store-logo {
       margin-left: 0rem ! important;        /* amend logo position -- can be negative to move it left */
       width: 33%;                           /* amend logo width */
     }
     .tool-container,.main-header--tools-left {
       gap: 0.5rem;                          /* more gap to allow for fat fingers */
     }
   }

   

3. This code uses different class names (`.main-header--tools-left`, `.store-title.store-logo`, `.tool-container`) and a wider mobile breakpoint (`max-width: 959px`). It also includes a `gap` property for better spacing, which is a nice touch for mobile usability!
4. Save the file.

Maximus3 also raised a valid point that sometimes rearranging the actual HTML elements in header.liquid might be a more robust solution than pure CSS, especially to avoid potential layout shifts. However, for many common reordering tasks, CSS flexbox is perfectly adequate and less intrusive.

Tackling All-Caps Headings (H4 & H5)

dlgillihan also asked about preventing H4 & H5 headings from being all caps. This is a common theme styling choice, and it's easily overridden with CSS.

1. Go to Online Store > Themes > Actions > Edit Code.
2. Open your main CSS file (e.g., assets/theme.css) or use the Custom CSS section in theme settings.
3. Add the following CSS:
   

   h4,
   h5 {
     text-transform: none !important;
   }

4. The text-transform: none; property will ensure that your H4 and H5 headings display exactly as you type them, without being forced into uppercase. The `!important` flag is added to override any existing theme styles that might be setting them to uppercase.
5. Save the file.

So there you have it! A deep dive into customizing your Atlantic theme's mobile experience, straight from the community's insights. Remember, while these code snippets are powerful, always test your changes thoroughly on different devices to ensure everything looks and functions as expected. Happy customizing!