- This topic has 11 replies, 4 voices, and was last updated 1 year, 6 months ago by
David.
-
AuthorPosts
-
January 14, 2021 at 2:35 pm #1619141
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
JohnJanuary 14, 2021 at 5:19 pm #1619257Leo
StaffCustomer SupportHi 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/January 15, 2021 at 12:03 am #1619525John
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!January 15, 2021 at 4:15 am #1619764David
StaffCustomer SupportHi 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/January 15, 2021 at 11:50 pm #1620904John
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!
January 16, 2021 at 7:13 am #1621359David
StaffCustomer SupportYou 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/January 16, 2021 at 1:20 pm #1621721John
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!January 16, 2021 at 4:42 pm #1621838Ying
StaffCustomer SupportHi John,
When we apply CSS to pseudo element, the
hover
needs to be in front of thebefore
.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-block
orblock
..main-navigation .main-nav ul li a:before: { display: inline-block; }
Let me know 🙂
January 16, 2021 at 8:55 pm #1621934John
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!
JohnJanuary 17, 2021 at 6:07 am #1622204David
StaffCustomer SupportOK so there are two transform properties.
In the original CSS i provided change:
transform: translate3d(-50%, -50%, 0);
totransform: 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/January 17, 2021 at 12:19 pm #1622723John
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.January 18, 2021 at 6:38 am #1623417David
StaffCustomer SupportTranslating 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/ -
AuthorPosts
- You must be logged in to reply to this topic.