Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 9, 2015 at 2:56 am #392825
    Richard

    Hi, This may be outside of the support you give…but I’ll give it a go anyway.
    I want to change the hover on the menu so that instead of changing colour when you hover over it a small background box comes up with the item in the box

    So the menu item would be red and the box underneath would be white still with the small red bar underneath…

    February 9, 2015 at 2:39 pm #393063
    Yigit

    Hey Richard!

    Can you please post a screenshot and show the changes you would like to make? I am not sure if i understood you clearly. If you would like to change the background color of menu item on hover, please go to Enfold theme options > Advanced Styling tab and edit “Main menu links” and check ” Apply only to mouse hover state”

    Regards,
    Yigit

    February 13, 2015 at 3:20 am #395486
    Richard
    This reply has been marked as private.
    February 13, 2015 at 9:33 am #395550
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .av-main-nav > li > a{
    padding: 0;
}
.av-main-nav > li > a .avia-menu-text {
    background: white;
    color: red;
    padding: 3px 6px;
    margin: 0 10px;
}

.av-main-nav > li:hover > a .avia-menu-text, .av-main-nav > li.current-menu-item > a .avia-menu-text {
    border-bottom: 1px solid red
}
.avia-menu-fx{
    display: none;
}

    Cheers! 
    Josue

    February 14, 2015 at 9:38 am #396119
    Richard

    Hi Josue

    Thank you for that but can the boxes come up as a hover…ie the box appears when the cursor clicks on one of the items in the menu?

    regards
    Richard

    February 14, 2015 at 10:29 am #396122
    Josue

    Hi Richard!

    Change it to:

    .av-main-nav > li > a{
    padding: 0;
}
.av-main-nav > li:hover > a .avia-menu-text {
    padding: 3px 6px;
    margin: 0 10px;
}
.av-main-nav > li:hover > a .avia-menu-text {
    background: white;
    color: red;
}
.av-main-nav > li:hover > a .avia-menu-text, .av-main-nav > li.current-menu-item > a .avia-menu-text {
    border-bottom: 1px solid red
}
.avia-menu-fx{
    display: none;
}

    Cheers!
    Josue

    February 14, 2015 at 11:34 am #396129
    Richard

    Hi Josue

    Perfect….thank you for taking the time on this one

    Regards
    Richard

    February 15, 2015 at 8:48 am #396290
    Josue

    You are welcome Richard, always glad to help :)

    Regards,
    Josue

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