Images as background for manu items in Navigation

Hi there,

You can try some CSS like this:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li:first-child a {
        background-image: url(http://BACKGROUND-IMAGE-URL);
    }
    .main-navigation .main-nav ul li:nth-child(2) a {
        background-image: url(http://BACKGROUND-IMAGE-URL);
    }
    .main-navigation .main-nav ul li:nth-child(3) a {
        background-image: url(http://BACKGROUND-IMAGE-URL);
    }
    .main-navigation .main-nav ul li a {
        background-size: cover;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

HI there,
I tried adding that css but the images do not show.
You can inspect the MENU items and see the css applied, but something is stopping them from showing.
Here is a link to the DEV site I am working on.
http://staging.joyfulbalancewellness.com/
Any ideas on what next steps I could take?
Cheers!

Hi there,

the images need a background-size property. I edited Leo's code above to include a rule to apply it to all buttons.

Ok cool thanks for that.
I have made some tweaks and am still struggling with the sizing and what happens on hover.

Is there a way to make the background images be the same size while the number of the letters in the name of the menu item change? Right now, if there are more letters in the menu item name, then the image gets bigger.

And is there a way to add a :hover effect to the background image and not the text? Right now the spin hover I have applied makes everything go around.

Thanks again for your help!

You would need to place the background in a pseudo element instead like so:

@media (min-width: 769px) {
  .main-navigation .main-nav ul li a {
    position: relative;
  }
  /* Create pseudo for all menu items and set first image */
  .main-navigation .main-nav ul li a:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 60px; /* fix size of image */
    height: 60px;
    background-image: url(first-menu-item-image-url);
    background-size: cover;
  }

  /* Swap BG for other items */
  .main-navigation .main-nav ul li:nth-child(2) a:before {
    background-image: url(http://BACKGROUND-IMAGE-URL);
  }

  .main-navigation .main-nav ul li:nth-child(3) a:before {
    background-image: url(http://BACKGROUND-IMAGE-URL);
  }
}

Excellent - that looks really neat now. Thank you.
How can I apply a hover effect to the background pseudo element now?
I am trying

	.main-navigation .main-nav ul li a:before:hover{
	  -ms-transform: rotate(179deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
    transform: rotate(179deg);
	transition: 0.1s ease-in-out;	
}

But that does nothing.
If I remove the "before" then it applies the effect to everything, text included.
Thanks!

Hi John,

When we apply CSS to pseudo element, the hoverneeds to be in front of the before.

So your CSS would be:

.main-navigation .main-nav ul li a:hover:before{
    -ms-transform: rotate(179deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
    transform: rotate(179deg);
    transition: 0.1s ease-in-out;	
}

Plus pseudo elements are inline by default, inline elements can't be transformed. We have to make it as inline-blockorblock.

.main-navigation .main-nav ul li a:before: {
    display: inline-block;
}

Let me know :)

Hi Ying,

Thank you for that.You are helping me get closer to my end goal!!
I have applied those changes and now have a slightly different issue as the hover effect is not rotating as I would expect - they seem to fly out diagnonally as opposed to spinning.
Is there a different css class needed to transform pseudo images?
Or is there something else needed in order to make the background pseudo images rotate 360 degrees?

Thanks again!
John

OK so there are two transform properties.

In the original CSS i provided change:

transform: translate3d(-50%, -50%, 0); to transform: translate3d(-50%, -50%, 0) rotate(0);

Then in your hover rotation CSS you would use:

transform: translate3d(-50%, -50%, 0) rotate(179deg);

OK really nice thank you.
I had to adjust the positioning to keep it sitting in position:

top: 10%;
    left: 10%;
    transform: translate3d(-50%, -50%, 0) rotate (0deg);

And the hover to:
transform: translate3d(-1%, -1%, 0) rotate(179deg);

Any ideas why I needed these figures and not the originals you sent?
And once again thank you so much for amazing detailed support. Really appreciated.

Translating and Rotating absolute positioned items can do some funky things... can't explain why specifically that would be required.

Glad to be of help.