Archived topic
Icons in nav menu - hover settings
5 replies · Started by paddyd on March 3, 2021
I've added the social icons to the header using a hook element (and GB buttons) and all is fine...except that they shift when hovered over, which they shouldn't be doing.
I've added a CSS class of "nav" to them to try to target them, but can't seem to make it work.
If I change the following to work for the menu (ie: padding 0 0 0 20px) then it breaks the other buttons.
.gb-button-wrapper a.gb-button:hover, .gb-button-wrapper a.gb-button:active, .gb-button-wrapper a.gb-button:focus {
padding: 15px 20px;
border: none;
}The buttons do have spacing set on them - 20px left and bottom margin of 20px in order to get them to line up with the rest of the menu (other things I tried didn't work - not sure if that's the "correct" way, but it did work)
Hi Paddyd,
nav does work, try this:
.gb-button.nav:hover {
padding: 0 0 0 20px;
}Let me know :)
Aha. I’d tried that but left the colon out. 😜
Hi there,
Have you sorted this out?
If not, try this CSS:
.gb-button-wrapper a.gb-button.nav:hover {
padding: 0 0 0 20px !important;
}This is so the CSS surely wins on precedence.
Thanks, Elvin. Ying's solution without the .gb-button-wrapper class didn't work. However, this works:
.gb-button-wrapper .gb-button.nav:hover {
padding: 0 0 0 20px;
}
It doesn't appear to need the a tag or the important to work.
Nice one. Glad you got it sorted. :)
