[Support request] Images as background for manu items in Navigation

Home Forums Support Images as background for manu items in Navigation

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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
    John

    #1619257
    Leo
    Staff
    Customer Support

    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/

    #1619525
    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!

    #1619764
    David
    Staff
    Customer Support

    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.

    #1620904
    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!

    #1621359
    David
    Staff
    Customer Support

    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);
      }
    }
    #1621721
    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!

    #1621838
    Ying
    Staff
    Customer Support

    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 🙂

    #1621934
    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

    #1622204
    David
    Staff
    Customer Support

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

    #1622723
    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.

    #1623417
    David
    Staff
    Customer Support

    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.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.