hi everyone
, I would like to change the position of my menu (home, catalog, contacts) to the left of the logo in line with it, and not below the logo. Keeping the logo centred.I have attached a photo of how it is and how I would like to have it from my old website.
Does anyone know how to do it using dawn theme? Thank you!
https://babystar-7626.myshopify.com/
A more important priority for the site at least for the frontpage should be to to check the video size across device sizes and either increase the threshold for lazyload images, or use a LQIP technique ,or both , for below the fold images when making users load a 1MB-video above the fold.
For desktop loading a total of 2MB might be fine but for some reason on mobile the site will load a 15MB video file on the frontepage!
A CSS bandaid to rearrange the header is to use CSS grid to reposition the elements.
Add the following to the sites custom.css, or style.css , or base.css or relevant file.
This only applies to those areas, turning on other heading UI settings may be incompatabile.
Always backup code before making changes
@media screen and (min-width: 990px) {
.header--top-center {
grid-template-areas: "navigation heading left-icon icons";
}
}
@media screen and (min-width: 990px) {
.header:not(.header--top-center) *>.header__search,.header--top-center>.header__search {
justify-self: right;
}
A permanent fix is an advanced customization restructuring the HTML of that area in the relevant files for the header code.
1 Like
Thanks a lot Paul! It worked nicely! I have understood that the video size is too big. Not also as a MB but also I would like it narrower like my old website. Do you have any suggestion for it? THX
Coffee offered 