So i updated from 3.3.1 i think to 3.4 and it ruined my underline element. I will show you the difference it did.
I also want to ask is there any way to make a “Shop the look” and “complete the fit” like Prestige theme have? if anyone can provide these 3 solutions i would be really grateful!
before:
after:
I forgot to mention its the Atelier theme thanks!
By default Atelier doesn’t underline menu items on hover, so you must have some code or setting that does it. If you turn that off, and then click on the header, go to the settings, scroll down to “custom css”, paste this code:
.menu-list__link-title:hover {
text-decoration: underline;
text-underline-offset: 5px;
}
it will correctly underline
Could you share the link to your page?
yeah but i want with my animations and etc. my current underline code /* ================================================================ */
/* — PREMIUM UNDERLINE (text-bredd + smooth hover/fade) — */
/* ================================================================ */
/* Länkar ska bara vara lika breda som texten */
.header .menu-list__link,
.header .menu-list__link-title,
.header .header__menu-item a {
position: relative;
display: inline-block;
width: fit-content; /\* exakt text-bredd \*/
}
/* Underline pseudo-element */
.header .menu-list__link::after,
.header .menu-list__link-title::after,
.header .header__menu-item a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px; /\* avstånd från text \*/
width: 100%;
height: 1.5px;
background-color: #000;
transform: scaleX(0);
transform-origin: center;
/\* Smooth transition på både scale och color \*/
transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1),
background-color 0.35s ease;
}
/* Hover – expand linjen */
.header:hover .menu-list__link:hover::after,
.header:hover .menu-list__link-title:hover::after,
.header:hover .header__menu-item a:hover::after {
transform: scaleX(1);
background-color: #000;
}
/* Släpp hover – linjen blir vit */
.header .menu-list__link:not(:hover)::after,
.header .menu-list__link-title:not(:hover)::after,
.header .header__menu-item a:not(:hover)::after {
transform: scaleX(0);
background-color: #fff;
transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
/* ACTIVE PAGE – alltid underline svart */
.header .menu-list__link.active::after,
.header .header__menu-item a[aria-current=“page”]::after {
transform: scaleX(1);
background-color: #000 !important;
}
my current underline code /* ================================================================ */
/* — PREMIUM UNDERLINE (text-bredd + smooth hover/fade) — */
/* ================================================================ */
/* Länkar ska bara vara lika breda som texten */
.header .menu-list__link,
.header .menu-list__link-title,
.header .header__menu-item a {
position: relative;
display: inline-block;
width: fit-content; /\* exakt text-bredd \*/
}
/* Underline pseudo-element */
.header .menu-list__link::after,
.header .menu-list__link-title::after,
.header .header__menu-item a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px; /\* avstånd från text \*/
width: 100%;
height: 1.5px;
background-color: #000;
transform: scaleX(0);
transform-origin: center;
/\* Smooth transition på både scale och color \*/
transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1),
background-color 0.35s ease;
}
/* Hover – expand linjen */
.header:hover .menu-list__link:hover::after,
.header:hover .menu-list__link-title:hover::after,
.header:hover .header__menu-item a:hover::after {
transform: scaleX(1);
background-color: #000;
}
/* Släpp hover – linjen blir vit */
.header .menu-list__link:not(:hover)::after,
.header .menu-list__link-title:not(:hover)::after,
.header .header__menu-item a:not(:hover)::after {
transform: scaleX(0);
background-color: #fff;
transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
/* ACTIVE PAGE – alltid underline svart */
.header .menu-list__link.active::after,
.header .header__menu-item a[aria-current=“page”]::after {
transform: scaleX(1);
background-color: #000 !important;
}