Support » Theme: Twenty Twenty-Two » Menu Item Hover Background-color

  • Resolved krischan941

    (@krischan941)


    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)
  • You need to add a little padding:

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

    (@krischan941)

    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 1 year, 8 months ago by krischan941.

    Try this

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

    (@krischan941)

    Nothing changed.

    The menu items are now closer together.

    Thread Starter krischan941

    (@krischan941)

    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?

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

    Thread Starter krischan941

    (@krischan941)

    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 1 year, 8 months ago by krischan941.

    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)

    Thank you very much for your help.

    Thread Starter krischan941

    (@krischan941)

    resolved

    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.