Menu hover animation

Illdy
1

Hi, i was trying to recreate the effect i saw here on the foo button on my nav menu

so i copied over

#header .top-header .header-navigation ul li:hover a {
  border-bottom: 3px solid #FFF;
  border-left: 3px solid #FFF;
  -webkit-transform-origin: 0 100%;
}

to start testing but the border is very close to the text. Is there a clever way to implement some margin?

I could also use some help on that before-after thingy, if possible. (noob here)

Thanks

2

made some progress, now the css is something like

#header .top-header .header-navigation ul li a {
    padding: 5px;
}

#header .top-header .header-navigation ul li:hover a
{
  border: 3px solid #FFF;
  -webkit-transition:0.5s;
}

#header .top-header .header-navigation ul li:hover::before {
  border-bottom: 3px solid #FFF;
  border-left: 3px solid #FFF;
  -webkit-transform-origin: 0 100%;
}

#header .top-header .header-navigation ul li:hover::after {
  border-top: 3px solid #FFF;
  border-right: 3px solid #FFF;
  -webkit-transform-origin: 100% 0;
}

Still no animation and when selecting a menu entry it becomes bigger, making the others move

3

Hey there

IM so sorry to say but such questions are falling out of the support policies, this is not a theme related question,
We receive “good” amount of theme related support questions and our number one goal is to fulfill this questions with quality, hope you understand me :slight_smile:

4

Sure, that’s absolutely reasonable.

Just to clarify, i gathered some more informations and managed to correct part of my mistakes, i’m not quite there but it would be extremely helpful to know whether what i’m trying to do is possible with custom css alone or if i need to modify the bootstrap, as some of the “commands” (no idea on the correct term) seems to get overriden.

Thanks

5

Most probably it possible with css only
Is there anything else or can i close this case?

6

Close please and thanks again

7

You are welcome and thank you for understanding :slight_smile: