Images as background for manu items in Navigation

[John]

Hi there,

Happy new year to you all!

Just wondering if you guys had any ideas on how to add images as backgrounds to individual menu items in the Navigation.

So an example we came across which would like to replicate some how is:
https://eric-carle.com/

Is that possible using the Generate Press capabilities or what would you recommend?

Cheers
John

[Leo]

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/

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

[John]

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!

[David]

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.

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

[John]

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!

[David]

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);
  }
}

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

[John]

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!

[Ying]

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 🙂

[John]

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

[David]

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);

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

[John]

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.

[David]

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.

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

[Author]

Posts