I set up buttons on the home page like “Shop Now” or in the heading “Home, Labels, Contact, Track Order” manually, using CSS by choosing its top, bottom, right, left positions. It looks great on smaller screens, however I noticed that if you open the website on a larger monitor, then all of it moves somewhere else. What I mean by that is for example that all the menu items (Home, Labels and so on) from the heading are not centered anymore. Get Yours button on banner image is not in the center of banner text. Anyone know how to fix it?
1 Like
Hi @LoKo6264 ,
If you know how to code you need to use the Media Query.
Example:
@media only screen and (max-width: 1000px) {
.header__icons {
align-items: center;
}
}
I hope it help.
Unfortunately it didn’t move it to the center
That’s all my code for the header:
.header__heading-logo,
.header__icon,
.header__menu-item {
position: relative;
top: -27px;
}
.header__menu-item {
font-size: 20px;
color: #000;
font-weight: 700;
transition: color 0.3s;
}
.header__menu-item:hover {
color: purple;
}
.header__active-menu-item:hover span,
.header__menu-item:hover span {
text-decoration: none;
}
.header__active-menu-item {
text-decoration: none !important;
}
.header-wrapper {
height: 70px;
}
.header__inline-menu {
position: absolute;
left: 36%;
top: 53%;
}
I tried your solution by deleting last part of .header_inline-menu, where I set up the header icons to the center and replacing it with your code, but it did not move to the center as you can see. I’m not sure if I should use .header__icons for it instead of inline menu, because as I was checking it moved my cart icon instead. I tried doing it in the theme.liquid as well, but it didn’t move it to the center as well.
Oh, sorry that is just an example. I mean you need to put in the Media Query so the styles wont change when changing the screen.
Okay, I did it writing this code, maybe it could help someone in the future:
@media only screen and (min-width: 990px) {
.header__inline-menu {
display: flex;
justify-content: center;
width: 280%;
position: relative;
top: 5px;
}
}
1 Like