A user encountered an issue with centering their navigation menu in a store header. They initially tried using CSS flexbox with justify-content: center and display: flex on the .header__inline-menu class, but the menu wasn’t perfectly centered.
Resolution:
The issue was resolved by switching to absolute positioning with transform. The working solution uses:
position: absoluteleft: 50%transform: translateX(-50%)display: flexThis approach centers the menu by positioning it at 50% from the left and then offsetting it back by half its own width. The discussion is now closed with the problem successfully solved.
I applied the code below to center my navigation menu. As you can see, it’s somewhat successful, but I just can’t get the navigation menu perfectly centered. Does anyone have a solution?
@media screen and (min-width: 500px){
.header–middle-left {
grid-template-columns: unset !important;
}
} .header__inline-menu {
display: flex; justify-content: center;
}
The issue has been resolved! I adjusted the code to the following, and it works perfectly.
@media screen and (min-width: 500px){
.header–middle-left {
grid-template-columns: unset !important;
}
}
.header__inline-menu {
display: flex;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Okay great
