Preventing menu items from moving when hovered over

  • Hi guys,

    I am a little bit confused about something on my wordpress site, https://nbbankruptcy.ca/

    If I hover my mouse over a menu item the text drops down slightly but I have no idea why. If I hover over the menu item for the page I am on the drop does not occur.

    I could fix this up but I’m not exactly sure which CSS rule is causing this to occur. Any feedback and/or pointers would be greatly appreciated.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

  • you just got some janky css. easy fix. add this to your custom css or at the bottom of your child theme’s style.css file.

    .wpc-menu > li:hover > a {
    top: 0;
    margin-bottom: -6px !important;
}

    or add this to make those movements real smooth. everyone likes smooth…

    .wpc-menu > li:hover > a {
    top: 0;
    margin-bottom: -6px !important;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.wpc-menu > li > a {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
    Thread Starter imaginexwp

    (@imaginexwp)

    Thanks a lot!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Preventing menu items from moving when hovered over’ is closed to new replies.

Tags