Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 14, 2017 at 7:04 pm #838878
    mcraig77

    I need to change the style of my menu buttons. I would like Sign Up to have a thicker line and a different color when regular and rollover. I would like Log In to be red when regular and darker red when rollover.

    Please advise

    August 15, 2017 at 6:48 am #839095
    John Torvik

    Hey mcraig77,

    You can add this custom CSS code at Enfold Theme Options > General Styling > Quick CSS

    
.avia-menu-text {
  border: 1px solid #000 !important;
  background: #bbb !important;
}

    Best regards,
    John Torvik

    August 15, 2017 at 7:04 am #839098
    mcraig77

    Ahoy John,

    That code changes all the buttons colors. See screenshot. I would like Sign Up to have a thicker line and a different color when regular and rollover. I would like Log In to be red when regular and darker red when rollover

    Please Advise

    August 15, 2017 at 6:26 pm #839492
    Sarah

    Hi there!

    Please use the code below instead. Please feel free to edit the colors and border sizes to fit your preference.

    /* SIGN UP AND LOGO TRANSITION */
#top .av-menu-button#menu-item-3405 > a .avia-menu-text,
#top .av-menu-button#menu-item-3406 > a .avia-menu-text {
   transition: all 0.4s ease-in-out;
}

/* SIGN UP BUTTON */
#top .av-menu-button#menu-item-3405 > a .avia-menu-text {
   border: 4px solid black;
   background-color:gold!important;
   color:black;
}

#top .av-menu-button#menu-item-3405 > a .avia-menu-text:hover {
   border: 4px solid green;
   background-color:green!important;
   color:white;
}

/* LOG IN BUTTON */
#top .av-menu-button#menu-item-3406 > a .avia-menu-text {
   border: 4px solid red!important;
   background-color:red!important;
}

#top .av-menu-button#menu-item-3406 > a .avia-menu-text:hover {
   border: 4px solid darkred!important;
   background-color:darkred!important;
   color:white;
}

    Let us know if that is what you need.

    Best regards,
    Sarah

    August 15, 2017 at 8:25 pm #839551
    mcraig77

    When I change the color text (black or any othe color) to a hex code (#606163) nothing show up…

    /* SIGN UP BUTTON */
#top .av-menu-button#menu-item-3405 > a .avia-menu-text {
   border: 4px #606163;
   background-color:gold!important;
   color:black;
}

    Please advise

    August 15, 2017 at 8:33 pm #839562
    Nikko

    Hi,

    I checked your site and the code works and it’s using the black font color, also I think this part of the code:

    border: 4px #606163;

    should be changed to:

    border: 4px solid #606163;

    Best regards,
    Nikko

    August 15, 2017 at 8:44 pm #839570
    mcraig77

    Great Thanks!

    August 15, 2017 at 10:56 pm #839614
    Nikko

    Hi,

    Glad we could help. Let us know if you need more assistance :)

    Best regards,
    Nikko

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