Hi There!
Does anyone have a solution to this?
I made a menu and I want to change the background color and add a border when hovering over an item.
That all works. However, the issue is that I’ve made a group containing both an icon and some text and given the hover conditional to the group. When I hover the contents of the group shift down by the size of the boarder…
Is there anyway to prevent this? I don’t want anything to pop or move, I just want a border to be added. I’m uploading an example gif.
Thanks for you help!
Am I seeing a border appearing in this first group when you hover it? 
Borders tend to shrink the content…
You can put this group (the button) inside a higher group. Vertical-center both. And change the background color of this higher group as you hover it. Making it appears to be the border changing the color.
Thanks for the idea, this worked!
I added a bit longer delay for the background group since you end up hitting it with your mouse first, but it looks pretty good now.
Also Bubble if you’re reading this, this would be nice as an option.
I think that the border should be created outside the element instead inside it… this change will prevent such behavior…
What do you mean?
Currently I have one group 47px tall, which changes it’s background color when hovered.
Inside that group I have another group, 45 px tall which also changes it’s background to a different color.
Inside that group I have my various texts and icons for the menu item.
I have to setup conditionals for both groups, I’m not using a border for either group.
Is this what you had in mind?
@esmaricq I think the simpler way would be to create the original group with a border the same color as the background, then just change the border color instead of adding a border, if that makes sense.
Beautiful, this works perfectly! Great idea
1 Like
