Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 23, 2023 at 4:30 pm #1402167
    GWS

    Hi
    We have created 6 buttons using the button row element but would like it to appear as a solid bar with no spaces between the button. In other words, 6 text links on a solid background. I’ve tried using CSS for this but can’t seem to get it to work. Any suggestions are appreciated. Thanks.

    March 24, 2023 at 3:45 pm #1402328
    Nikko

    Hi GWS,

    Can you try adding this CSS code in Enfold > General Styling > Quick CSS:

    #top #wrap_all .avia-buttonrow-wrap {
    display: flex;
    justify-content: center;
}

#top #wrap_all .avia-buttonrow-wrap .avia-button {
    margin-left: 0;
    margin-right: 0;
}

    and see if it helps.

    Best regards,
    Nikko

    March 24, 2023 at 4:42 pm #1402363
    GWS

    Nikko,

    Thank you for your reply. That almost worked great. The curved border was still showing and also I want the container background to be the same as the buttons so it looks like a ‘bar’. What I ended up with is below. I gave the element a custom style, value-prop-menu, but when I use the custom style on the 2nd style it doesn’t work. Does “avia-builder-el-1” only apply to that particular element? I want to be able to use the button row elsewhere without these styles.

    .value-prop-menu .avia-buttonrow-center {
    margin-top: 0;
    background-color: #00853e!important;
    opacity: .9!important;
    }
    body .container_wrap .avia-builder-el-1 {
    margin-top: 0;
    background-color: #00853e!important;
    opacity: .9!important;
    }

    March 24, 2023 at 4:48 pm #1402365
    Nikko

    Hi GWS,

    I see, since you have a Custom CSS Class name value-prop-menu, please try to replace the code I gave with this one:

    #top #wrap_all .value-prop-menu {
    display: flex;
    justify-content: center;
}

#top #wrap_all .value-prop-menu .avia-button {
    background: #00853e;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    opacity: 0.9;
}

    Best regards,
    Nikko

    March 24, 2023 at 5:06 pm #1402377
    GWS

    That works and is cleaner than what I had. Thank you, Nikko. Feel free to close this ticket.

    March 24, 2023 at 8:33 pm #1402394
    Nikko

    Hi GWS,

    I’m glad that we could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Button Row – Solid background color with no spaces between buttons’ is closed to new replies.