Menu Item Hover Background-color

  • Resolved krischan941

    (@krischan941)


    2 years, 6 months ago

    I build a web page with twenty twenty two theme. I customize a little css. I want the menu entries to get a background-color #c27113 when hovering with the mouse. css:

    .wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	background-color: #c27113;
	color: #f6f6f6;

    }`

    How do I get it so it fills out the full navigation bar height and half the pixels left and right to the next menu item?

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Mike Matenkosky

    (@hikinmike)

    2 years, 6 months ago

    You need to add a little padding:

    .wp-block-navigation .wp-block-navigation-item__content {
  padding: .5em 1em;
}
    Thread Starter krischan941

    (@krischan941)

    2 years, 6 months ago

    Thank you for your response. I added those lines and played around with the digits. The colored space gets bigger but the navigation bar itself too (space between items and height). How do I prevent this?

    Actually I use in my css “padding: .5em 1em;”

    • This reply was modified 2 years, 6 months ago by krischan941.
    Mike Matenkosky

    (@hikinmike)

    2 years, 6 months ago

    Try this

    .wp-block-navigation__container {
  gap: 0;
}
    Thread Starter krischan941

    (@krischan941)

    2 years, 6 months ago

    Nothing changed.

    Mike Matenkosky

    (@hikinmike)

    2 years, 6 months ago

    The menu items are now closer together.

    Thread Starter krischan941

    (@krischan941)

    2 years, 6 months ago

    Ah yes, it hasn’t updated my site on first reload. Thanks! I also tweaked padding settings in Gutenberg editor in some blocks and now it behaves as expected. Have you any idea how I can increase the height of my navigation bar and retain the new hover behaviour?

    Mike Matenkosky

    (@hikinmike)

    2 years, 6 months ago

    You should be able to increase the top/bottom margin/padding in your header section.

    Thread Starter krischan941

    (@krischan941)

    2 years, 6 months ago

    If I do this than the background color when mouse-hovering doesn’t fit the full space anymore (website updated, 8px top margin). Here you can find an example setting and see my site structure: https://imgur.com/a/UCuJKAo

    • This reply was modified 2 years, 6 months ago by krischan941.
    Mike Matenkosky

    (@hikinmike)

    2 years, 6 months ago

    If you want to increase the height of the navigation/hover color, then you need to edit the padding I posted above. I used short hand writing the padding. First number (.5em) is top/bottom and 1em is the left/right. So if you want to just increase the height, change the .5em. If you want to have separate top and bottom, then something like padding: .5em 1em .2em 1em (padding: top right bottom left).

    Thread Starter krischan941

    (@krischan941)

    2 years, 6 months ago

    Thank you very much for your help.

    Thread Starter krischan941

    (@krischan941)

    2 years, 6 months ago

    resolved

    warrenbest

    (@warrenbest)

    2 years, 1 month ago

    twenty twenty-two How to change menu link hover color or when you click on a link it changes to different color. I experimented for hours looked for information and came up with no solution. All it shows you is your underlying link. the only thing I was able to accomplish is to change all the links to a different color.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Menu Item Hover Background-color’ is closed to new replies.