Hi,
I’m using Dawn theme v15.4.0 and having a mobile header alignment issue.
On all mobile devices, the hamburger menu and search icon are perfectly aligned on the homepage, but on other pages (product, collection, pages) they shift slightly. Both icons move together, so spacing between them stays the same, but they don’t match the homepage position.
CSS I’m using (works correctly on homepage):
@media screen and (max-width: 749px) {
details-modal.header__search .header__icon–search {
position: absolute;
left: 40px;
}
}
Goal:
The mobile header layout needs to match the homepage exactly on all pages and all mobile devices.
Has anyone experienced this in Dawn 15.4.0 or know the correct way to normalize the mobile header across templates?
Thanks.
Hi @crepscity ,
Could you share the preview link please?
You probably have CSS applied to the other template that is interfering with it.
Regards,
Rodrigo
Hi @crepscity ,
In the home page, you have this here configured in your css:
@media (max-width: 768px) {
.page-width {
padding: 0 var(--beae-site-margin-mobile);
}
}
if you remove that from the home page, you will have the exact same behavior that you have on the other pages.
Do you know what is adding that to the page? It seems like it is being added in this file here: custom-featured-collection.css
Regards,
Rodrigo
Hi, i dont see this code in the file: custom-featured-collection.css.
This file is from an app called Beae Editor.
Hi,
weird!
Anyway, I would test importing the same file on the theme.liquid to see if that does the job.
im currently in contact with them now and there checking it out now
I don’t think that the problem is the app though. I think that you have a custom css in your theme that is just being loaded on your home page. I would just try to apply that to everypage or review that custom-featured-collection.css.
Anyway, let me know if I can help with anything there!
Regards,
Rodrigo
Found the solution. I had to remove this code in header.liquid and now all header icons are consistent through out all pages.
.header {
padding: 10px 3rem 10px 3rem;
}
