For the hamburger icon, you can paste this in the body of theme.liquid
<style>
.svg-icon.icon-menu path {
d: path("M17 5H0V3.5H17V5ZM0 11H17V9.5H0V11Z");
}
</style>
You could potentially change the actual rendered path in the header file to make sure it doesn’t have any negative impact like layout shift.
For putting the logo on the left, and the menu and search on the right would probably not be a good idea with css alone, and rearranging the actual html elements in the header file might be a better fit.
Any particular place in the body, or at the end of the feed. And should the word be style on the final line of your code?
Sorry yes that was a typo. Should be </style> and you can put it right before </body>
might need !importantbefore the semicolon.
<style>
.svg-icon.icon-menu path {
d: path("M17 5H0V3.5H17V5ZM0 11H17V9.5H0V11Z") !important;
}
</style>
If the theme does not allow to relocate logo on mobile, try this – can go into header section “Custom CSS”, or “Theme settings” (cog icon)->“Custom CSS”, or together with the code above, right before the </style> tag.
@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 */
}
}
Yes, all three of those are possible without needing to touch a third-party app. Here is how to do each one.
1. Change the hamburger from 3 lines to 2
You will need to edit the SVG icon directly in your theme code. Go to Online Store > Themes > Edit Code and search for a file called icon-hamburger.svg or look inside snippets/ for anything named around hamburger or menu. You will see something like this:
Simply delete the middle line (the y1="12" one) and save. That gives you a clean 2-line icon.
2. Move the menu and search icons to the right, logo to the left
Atlantic’s mobile header is typically controlled in header.liquid or sections/header.liquid. Look for a block that wraps the mobile header layout, it usually has classes like .header__mobile or similar.
The layout is controlled by flexbox. Add this to your theme’s CSS (Online Store > Themes > Edit Code > assets/theme.css or wherever Atlantic keeps its custom styles):
@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;
}
}
The exact class names may differ slightly in Atlantic, if you paste the current mobile header HTML here I can give you the exact selectors to target.
Worth noting: before editing any code, duplicate your theme first so you always have a clean backup to roll back to if anything breaks.
