Home Forums Community Forum Changing button color in top navigation menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • donkeyboy24
    Participant
    Post count: 2

    I’m trying to change the background color of the button I made in the menu item that goes in the top navigation bar, but I can’t get it to change.

    When I go into Menu -> Avada Menu Options (for the nav item), I can only set it to default style – which for this item, I don’t want as the default color.

    So, as a workaround I tried applying CSS, but whatever I try, it doesn’t change the background color of the button. Here’s what I’ve tried:

    #menu-top-navigation li#menu-item-615 a span { background-color:#cccccc!important;}
    #menu-top-navigation li#menu-item-615 a span.button-default{ background-color:#cccccc!important;}

    None of these change the background color though.

    Here is the code for reference:

    <nav class=”fusion-secondary-menu” role=”navigation” aria-label=”Secondary Menu”><ul role=”menubar” id=”menu-top-navigation” class=”menu”><li role=”menuitem” id=”menu-item-615″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-615 fusion-menu-item-button” ><span class=”menu-text fusion-button button-default button-small”>Service Request</span></nav>

    When I’ve targeted just the anchor tag, it does change the background color, but it only changes the container around the button. The button remains the same color.

    Any thoughts of suggestions would be greatly appreciated.

    tommoore
    Participant
    Post count: 4

    I’d love to know the answer to this as well please.

    greenixmktg
    Participant
    Post count: 4

    ^bump^

    iamstephao
    Participant
    Post count: 1

    Just figured this out! Go to Avada>Theme Options>Fusion Builder Elements>Button Element. You should be able to change color, typography, etc. (Will change the buttons throughout the site, but other buttons are easier to customize.)

    greenixmktg
    Participant
    Post count: 4

    Here you go…

    Change the menu Item # to yours and then colors to suit:

    #menu-item-909 a .fusion-button{
    color: white !important;
    background: red !important;}
    #menu-item-909 a:hover .fusion-button{
    color: white !important;
    background: #0a025F !important;}

    dotdj
    Participant
    Post count: 1

    Hello Green 🙂 And thanks for the code!

    Unfortunately not work. I try to put in Avada css personalized and in page css, but not work.
    My menu ID is simply “8”.
    Have you some updates about this?
    Thank you so much :

    ASAPSolutionsPro
    Participant
    Post count: 3

    Hey guys I found the answer. @dotdj the trick is to go to you live site or preview the page, right click on the element, inspect and then copy selector. I then put this in the Avada custom CSS and it’s working like a charm.

    Item 89 is the Get Started Button and Item 93 is the Login Button.
    Here’s what I got my menu to look like http://tinyurl.com/vckpsmc

    Here is the code:
    #menu-item-89 > a > span {
    background: #ffc708 !important;
    color: black !important;
    }
    #menu-item-93 > a > span {
    border-style: solid !important;
    border-width: 3px !important;
    border-color: #ffc708 !important;
    }

    ms_webcasa
    Participant
    Post count: 2

    None of this worked. I even changed the button element in Avada theme options but the buttons in the topmost menu are staying the same default green as the theme??

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