This is the dawn theme header i want my navigation menu(home,men,women,…) in the center of the header but it is not moving to the center i tried everything in the CSS code but it is not moving to the header somebody please help me. I shared the code below of menu
/* Header menu drawer */
.header__icon–menu .icon {
display: block;
position: absolute;
opacity: 1;
transform: scale(1);
transition: transform 150ms ease, opacity 150ms ease;
}
details:not([open]) > .header__icon–menu .icon-close,
details[open] > .header__icon–menu .icon-hamburger {
visibility: hidden;
opacity: 0;
transform: scale(0.8);
}
.js details[open]:not(.menu-opening) > .header__icon–menu .icon-close {
visibility: hidden;
}
.js details[open]:not(.menu-opening) > .header__icon–menu .icon-hamburger {
visibility: visible;
opacity: 1;
transform: scale(1.07);
}
.js details > .header__submenu {
opacity: 0;
transform: translateY(-1.5rem);
}
details[open] > .header__submenu {
animation: animateMenuOpen var(–duration-default) ease;
animation-fill-mode: forwards;
z-index: 1;
}
@media (prefers-reduced-motion) {
details[open] > .header__submenu {
opacity: 1;
transform: translateY(0);
}
}
/* Header menu */
.header__inline-menu {
margin-left: -1.2px;
grid-area: navigation;
display: none;
width: 100%;
}
.header–top-center .header__inline-menu,
.header–top-center .header__heading-link {
margin-left: 0px;
}
@media screen and (min-width: 990px) {
.header__inline-menu {
display: block;
}
.header–top-center .header__inline-menu {
justify-self: center;
}
.header–top-center .header__inline-menu > .list-menu–inline {
justify-content: center;
}
.header–middle-left .header__inline-menu {
margin-left: 0px;
}
}
.header__menu {
padding: 0 1rem;
}
.header__menu-item {
padding: 1.2rem;
text-decoration: none;
color: rgba(var(–color-foreground), 0.75);
}
.header__menu-item:hover {
color: rgb(var(–color-foreground));
}
.header__menu-item span {
transition: text-decoration var(–duration-short) ease;
}
.header__menu-item:hover span {
text-decoration: underline;
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.2rem;
transition: text-decoration-thickness 0.5s ease, text-underline-offset 0.5s ease;
}
details[open] > .header__menu-item {
text-decoration: underline;
transition: text-decoration-thickness 0.5s ease;
}
details[open]:hover > .header__menu-item {
text-decoration-thickness: 0.2rem;
transition: text-decoration-thickness 0.5s ease;
}
details[open] > .header__menu-item .icon-caret {
transform: rotate(180deg);
}
.header__active-menu-item {
transition: text-decoration-thickness var(–duration-short) ease;
color: rgb(var(–color-foreground));
text-decoration: underline;
text-underline-offset: 0.3rem;
}
.header__menu-item:hover .header__active-menu-item {
text-decoration-thickness: 0.2rem;
}
.header__submenu {
transition: opacity var(–duration-default) ease, transform var(–duration-default) ease;
}
.global-settings-popup,
.header__submenu.global-settings-popup {
border-radius: var(–popup-corner-radius);
border-color: rgba(var(–color-foreground), var(–popup-border-opacity));
border-style: solid;
border-width: var(–popup-border-width);
box-shadow: var(–popup-shadow-horizontal-offset) var(–popup-shadow-vertical-offset) var(–popup-shadow-blur-radius)
rgba(var(–color-shadow), var(–popup-shadow-opacity));
z-index: -1;
}
.header__submenu.list-menu {
padding: 1rem 0;
}
.header__submenu .header__submenu {
background-color: rgba(var(–color-foreground), 0.03);
padding: 1rem 0;
margin: 1rem 0;
}
.header__submenu .header__menu-item:after {
right: 2rem;
}
.header__submenu .header__menu-item {
justify-content: space-between;
padding: 0.8rem 2rem;
}
.header__submenu .header__menu-item:hover {
text-decoration-line: underline;
}
.header__menu-item .icon-caret {
right: 0.8rem;
}
.header__submenu .icon-caret {
flex-shrink: 0;
margin-left: 1rem;
position: static;
}
header-menu > details,
details-disclosure > details {
position: relative;
}
@keyframes animateMenuOpen {
0% {
opacity: 0;
transform: translateY(-1.5rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
overflow: hidden;
}
@media screen and (min-width: 750px) {
.overflow-hidden-mobile {
overflow: auto;
}
}
@media screen and (min-width: 990px) {
.overflow-hidden-tablet {
overflow: auto;
}
}