Header Navigation Link Button Hover Complex Code

[ellacoker]

Hello,

I would like my header buttton links to go into a blob shape on hover - kind of similar to screenshot attached. however, i would like each link to be a different blob shape. I am unsure how to achieve this. I have tried n-th childs but it doesnt seem to be working! Please see screenshots attached. Any help appreciated. Ella

URL: https://sausagesociety.myshopify.com/

PW: ellaella

[BiDeal-Discount]

Hi @ellacoker 

Let try like this:

.header__inline-menu ul li:nth-child(2) a:hover{
 border-radius:  30px 60px 20px 50px;
}

Do the same with other list items.

[tim]

Here is your HTML structure (a bit reduced)

<ul>
  <li>
    <a ... class="header__menu-item list-menu__item link link--text focus-inset">
      <span>.../span>
    </a>
  </li>
  <li>...</li>
  ...
</ul>

Therefore, .header__menu-item is always first child of its immediate parent;  it's actually  the only child.

so you need to apply :nth-child to <li> elements, as @BiDeal-Discount suggested:

li:nth-child(1) .header__menu-item:hover { border-radius: 50px 20px 40px 10px }
li:nth-child(2) .header__menu-item:hover { border-radius: 30px 60px 20px 50px }
li:nth-child(3) .header__menu-item:hover { border-radius: 70px 10px 30px 60px }
li:nth-child(4) .header__menu-item:hover { border-radius: 40px 30px 60px 20px }