Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 7, 2017 at 4:59 pm #789104
    jbinmn

    Hi –

    Is there a way to make a grid row cell clickable? Rather than use a full-width submenu to scroll my frontpage down to color section bookmarks, I’d like to be able to click in a grid row cell. I’ve read articles on adding a full-width button to the cell without a background and this partially solves my problem. However, the transparent button takes up space in my cell and the cell is only clickable in the full-width button area.

    Thanks!

    May 8, 2017 at 1:27 am #789256
    Mike

    Hey jbinmn,
    Sorry the full width button solution is the only thing I can come up with. Please feel free to request – or vote if already requested – such feature on Enfold feature request form.

    Best regards,
    Mike

    May 8, 2017 at 4:55 pm #789706
    jbinmn

    Thanks for the reply. I submitted a feature request. Would you please help me with 2 things regarding the full-width button:

    1. How do I set the color to be transparent? I found some Quick CSS code to do that in a support article, but can’t seem to find it now.
    2. Is there a way to control the full-width button height? Currently, I”m using 180px of white space to position my text correctly in my grid row cell. I’d like to replace the 180px of white space with a 180px tall, transparent button.

    Finally, is there a way to ignore a URL’s hover color and/or link indicator (underlined) in a grid row cell? I’d like the URL in a grid row cell to appear as normal text (no underline) and not change color when the cursor hovers over it.

    With those changes, the bulk of my grid row cells would be “clickable”.

    Thanks!
    Jon

    May 9, 2017 at 1:59 am #789931
    Mike

    Hi,
    To set the color of the button transparent and 180px for only the home page we’ll use:

    .page-id-793 .flex_cell_inner .avia-button.avia-button-fullwidth {
    background: transparent !important;
    height: 180px;
}

    To remove the link decoration for only the home page we’ll use:

    .page-id-793 .flex_cell_inner a {
text-decoration: none!important; 
}

    But here’s an option for you, what if you used your cells with images in them and only put a full with button over them, using the button title as the your text? Here’s a test on my localhost, the only thing is the text can only be centered.
    CSS:

    .flex_cell_inner .avia-button.avia-button-fullwidth {
    background: transparent !important;
    height: 180px;
}

span.avia_iconbox_title {
top:130px !important; 
}

    postimage
    postimage

    Best regards,
    Mike

    May 9, 2017 at 3:12 pm #790337
    jbinmn

    Thanks so much for you help! Both options seem to work perfectly. I really appreciate that you made the CSS for the first option page specific. Obviously, I’ll be able to have more control over each page I decide to place a grid row on.

    Please close this ticket and many thanks again for your help!
    Jon

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Grid Row – make a grid cell clickable’ is closed to new replies.