custom CSS menu hover question

[wtflovelife]

Hi! I put the front-end un/pw above in place of the admin un/pw so you can see what I am talking about in the below.

I have added the following code to the custom CSS so that I have a different “hover” effect on my menu

nav .menu > li.current-menu-item > a {
    border-radius: 40px;
    -webkit-border-radius: 40px;
    border: 1px solid #6ac21d;
}

.full-center #main-navigation ul.menu > li > a:hover {
    border-radius: 40px;
    -webkit-border-radius: 40px;
    border: 1px solid #6ac21d;
}

.full-center #main-navigation ul.menu > li > a {
    height: 35px;
    line-height: 30px;
    margin: 0 2px;
}

But if you look at the site – you can see it “jumps” slightly when you hover. What did I do wrong? THANK YOU

[Rui Guerreiro – SUPPORT]

Hi,

It seems that extra pixel from the border, not sure how to stop it.
Will forward it to our head developer.

-Rui

[wtflovelife]

Thanks so much! Standing by 🙂

[Swift Ideas – Ed]

Change the last of those 3 to this:

.full-center #main-navigation ul.menu > li > a {
    height: 35px;
    line-height: 30px;
    margin: 0 2px;
    border: 1px solid transparent;
}

That should do it!

– Ed

[wtflovelife]

It’s perfect! thank you so much guys!

[Rui Guerreiro – SUPPORT]

Great. Thanks Ed.

-Rui