Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 26, 2020 at 12:11 am #1197884
    claychurchill

    Hello,

    On our main menu at https://www.justoneafrica.org/, the “Donate Now” button is set as bordered. I would like the drop-down background to be transparent and have the 3 items similar to the main button, but larger text and more padding than they are now. I would like it to look like 3 individual buttons. It currently has a white background now like the other menu items. I do not want all of them to be transparent, just the donate dropdown. I have searched and I have tried a number of things, but no luck. Is this possible?

    Thank you!

    March 28, 2020 at 2:18 pm #1198571
    Victoria

    Hey Clay,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#menu-item-6327 li a  {
    color: white!important;
    background: #0098cf!important;
    margin: 10px 0;
    border: 2px solid #fff;
    width: 70%;

}
#menu-item-6327 li a .avia-menu-text {
    font-size: 16px;
}
.header_color .main_menu ul ul {
    background-color: transparent;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 29, 2020 at 8:29 pm #1198937
    claychurchill

    Victoria,

    This is fantastic! I tried a few things to get the drop-down buttons background to be white when hovered over, but only the word changes to a white background. I tried adding this code, which is used for the main button.

    #menu-item-6327 li a:hover .avia-menu-text {
    border: 2px solid #0098cf !important;
    background: white !important;
    color: #0098cf !important;
    }

    That is not working. Any thoughts?

    I super appreciate all your awesome support!

    March 31, 2020 at 6:30 pm #1199416
    Victoria

    Hi claychurchill,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#menu-item-6327 li:hover a  {
    color: #0098cf!important;
    background: #fff!important;
}

    Please remove the code:
    #menu-item-6327 li a:hover .avia-menu-text {
    border: 2px solid #0098cf !important;
    background: white !important;
    color: #0098cf !important;
    }

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 31, 2020 at 6:30 pm #1199417
    Victoria

    Hi claychurchill,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#menu-item-6327 li:hover a  {
    color: #0098cf!important;
    background: #fff!important;
}

    Please remove the code:
    #menu-item-6327 li a:hover .avia-menu-text {
    border: 2px solid #0098cf !important;
    background: white !important;
    color: #0098cf !important;
    }

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 31, 2020 at 8:31 pm #1199528
    claychurchill

    Victoria,

    We are so close! This is almost exactly what I was looking for.

    There is still a blue border immediately around the word. The white background is perfect. How do I remove just the blue border around the words?

    Thanks again for the helpful support. I am very grateful!

    Clay

    March 31, 2020 at 10:04 pm #1199556
    Jordan Shannon

    Hi,

    You have to find and remove this in your css:

    li#menu-item-6327 a:hover .avia-menu-text {
    border: 2px solid #0098cf!important;
}

    Best regards,
    Jordan Shannon

    March 31, 2020 at 10:22 pm #1199561
    claychurchill

    Jordan,

    I don’t have that exactly in my custom CSS. I have this one:

    li#menu-item-6327 a:hover .avia-menu-text {
    border: 2px solid #0098cf !important;
    background: white !important;
    color: #0098cf !important;
    }

    If I remove that. The main Donate Now button does not turn white and the while the blue border around the drop downs does go away, the box where that border was turns blue and the text white.

    This is all the code related to 6327:

    /*———- Main Menu – donate button——–*/
    #menu-item-6327 .avia-menu-text {
    color: white !important;
    background: #0098cf !important;
    }
    li#menu-item-6327 a:hover .avia-menu-text {
    border: 2px solid #0098cf !important;
    background: white !important;
    color: #0098cf !important;
    }

    /* ——Donate Button – Drop Down buttons—–*/
    #menu-item-6327 li a {
    color: white!important;
    background: #0098cf!important;
    margin: 9px 0;
    border: 2px solid #fff;
    width: 70%;
    text-align: center!important;
    }
    #menu-item-6327 li a .avia-menu-text {
    font-size: 16px;
    }
    #menu-item-6327 li:hover a {
    color: #0098cf!important;
    background: #fff!important;
    }
    .header_color .main_menu ul ul {
    background-color: transparent;
    }

    March 31, 2020 at 10:47 pm #1199565
    Jordan Shannon

    Hi,

    Remove the top line regarding the border.

    Best regards,
    Jordan Shannon

    March 31, 2020 at 10:55 pm #1199568
    claychurchill

    Bingo! You are a genius!

    Thank you sir and thank you to Victoria, as well. You guys all provide such awesome support.

    A very happy customer,
    Clay

    March 31, 2020 at 11:06 pm #1199569
    Jordan Shannon

    Hi,

    I’m glad this was resolved for you! We’re all happy to help, and if you need anything else please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Sub menu customization’ is closed to new replies.