Shopify Theme Customization: Mastering Mobile Header Layouts & Hamburger Icons on Atlantic Theme

Unlocking Advanced Mobile Customization in Your Shopify Atlantic Theme

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. This creates a safe, working copy of your store that you can experiment with without affecting your live site. Trust me, it'll save you a headache later and is the hallmark of any professional Shopify developer. If you're looking to start your own e-commerce journey or migrate an existing store to a platform that offers this level of customization and flexibility, starting a Shopify store is an excellent choice.

Customizing Your Mobile Menu Icon (The Hamburger)

The standard three-line hamburger icon is functional, but sometimes you want a cleaner, more minimalist look, like two lines. The community offered a couple of great ways to achieve this, each with its own advantages.

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. This means the change is fundamental and less likely to be overridden by other styles.

1. Go to Online Store > Themes.
2. Find your duplicated theme and click Actions > Edit Code.
3. In the code editor, search for a file named icon-hamburger.svg. This file is typically located in the snippets/ directory or sometimes directly in the assets/ folder, depending on your theme's structure.
4. Open the .svg file. You will see XML-like code defining the lines of the icon. A typical three-line hamburger SVG might look something like this (simplified):
   

5. To change it to two lines, simply locate and delete the code defining the middle line. In the example above, you would remove the line containing M17 6H0V5H17V6Z (or similar coordinates).
6. Click Save. Your hamburger icon should now display two lines.

Method 2: Overriding with CSS (Quick & Effective)

Maximus3 provided a clever CSS-only solution that overrides the SVG path directly. This is faster if you don't want to dig into the SVG file itself, but it's important to understand how it works.

1. Go to Online Store > Themes > Edit Code.
2. Open theme.liquid (usually under the Layout folder).
3. Scroll to the very bottom of the file, just before the closing tag, or ideally within the section before any other stylesheets, or in your main CSS file (e.g., assets/theme.css or assets/custom.css).
4. Paste the following CSS code:
   

   The d: path(...) attribute directly sets the SVG path data. The value provided here defines two horizontal lines. The !important flag ensures that this style takes precedence over any other conflicting styles defined by the theme.

5. Click Save.

While effective, be aware that overriding SVG paths with CSS can sometimes be less robust than editing the SVG file directly, especially if the theme updates or has complex SVG structures.

Rearranging Your Mobile Header: Logo Left, Icons Right

Achieving a custom mobile header layout often involves using CSS Flexbox, a powerful layout module. Pratham_Jani and tim_tairli provided excellent guidance here.

Using Flexbox for Layout Control

The goal is to instruct the mobile header container to display its items (logo, menu, search) in a specific order and alignment. This is typically done by targeting the main mobile header container with CSS.

1. Go to Online Store > Themes > Edit Code.
2. Open your main CSS file, typically found in assets/theme.css, assets/base.css, or a file specifically for custom styles if your theme has one (e.g., assets/custom.css). Alternatively, you can add this to the "Custom CSS" section within your theme's settings if available.
3. Add the following CSS code. Note that class names like .header__mobile, .header__logo, and .header__icons are common but might vary slightly in your Atlantic theme version. You may need to use your browser's developer tools (right-click > Inspect) to identify the exact class names for your theme's mobile header elements.
   

   @media (max-width: 768px) { /* Apply these styles only on screens up to 768px wide */
     .header__mobile {
       display: flex; /* Enable Flexbox for the container */
       flex-direction: row; /* Arrange items in a row */
       justify-content: space-between; /* Distribute items with space between them */
       align-items: center; /* Vertically align items in the middle */
     }
     .header__mobile .header__logo {
       order: 1; /* Place the logo first */
       margin-left: 0 !important; /* Ensure no unwanted left margin */
       width: auto; /* Adjust width as needed */
     }
     .header__mobile .header__icons {
       order: 2; /* Place the icons second */
       margin-right: 0 !important; /* Ensure no unwanted right margin */
     }
     /* Additional adjustments for specific Atlantic theme classes */
     .main-header--tools-left {
       justify-content: flex-end !important; /* Relocate menu/search buttons to the right */
     }
     .store-title.store-logo {
       margin-left: 0rem !important; /* Amend logo position */
       width: 33%; /* Amend logo width if needed */
     }
     .tool-container, .main-header--tools-left {
       gap: 0.5rem; /* Add more gap for touch targets */
     }
   }
   

4. Click Save.

Explanation of the CSS:

• @media (max-width: 768px): This media query ensures that these styles only apply to screens smaller than or equal to 768 pixels, which is a common breakpoint for mobile devices.
• display: flex;: Initializes the container as a flex container.
• flex-direction: row;: Arranges the direct children (logo, icons) in a horizontal line.
• justify-content: space-between;: Distributes space evenly between items, pushing the first item to the start and the last item to the end, achieving the logo-left, icons-right effect.
• order: 1; and order: 2;: These properties explicitly control the visual order of flex items, ensuring the logo comes before the icons regardless of their order in the HTML.
• !important: Used to ensure these custom styles override any default theme styles. Use sparingly, but it's often necessary for quick overrides.

Addressing H4 & H5 All Caps

Regarding the question about H4 & H5 headings appearing in all caps, this is almost certainly due to a CSS property called text-transform: uppercase; applied to those heading tags in your theme's stylesheet. To change this, you would add the following to your custom CSS file:

h4,
h5 {
  text-transform: none !important; /* Or 'capitalize' for initial caps, 'lowercase' for all lowercase */
}

Best Practices for Shopify Theme Customization

• Use Browser Developer Tools: This is your best friend for identifying correct CSS selectors and testing changes live before applying them to your theme code.
• Test on Multiple Devices: Always check your changes on various mobile devices and screen sizes to ensure responsiveness and a consistent user experience.
• Keep Notes: Document your changes, especially if you're directly editing theme files. This helps with debugging and future updates.
• Consider Future Theme Updates: Direct edits to theme files (like SVG icons) might be overwritten if you update your theme to a newer version. CSS overrides are generally safer in this regard, but still require re-evaluation after updates.

Conclusion

Customizing your Shopify theme, especially for mobile, can significantly enhance your brand's appearance and user experience. By understanding how to manipulate SVG icons and leverage CSS Flexbox, you gain powerful control over your store's design. Remember to always work on a duplicated theme, use your developer tools, and test thoroughly. These steps will empower you to create a unique and highly functional online store that truly stands out!