Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 2, 2016 at 1:53 pm #576410
    stevegoh422

    Hi Guys,

    I have make some CSS adjustments to my site’s menu bar so that I can have inverted hover colours.

    Unfortunately, when I am on my child page, the menu item of the parent page seems to disappear. I believe it has something to do with the CSS codes but I have tried many ways and I just simply can’t get it right. I need my menu bar to be purple like the rest when I am on any of the child pages. Please advise what should I do.

    I will attach my site’s details here. Thanks!

    February 2, 2016 at 5:09 pm #576554
    Yigit

    Hey stevegoh422!

    Please change following code 

    #avia-menu li:hover a {
    background: #6d4099;
}

    to following one 

    #avia-menu li:hover > a {
    background: #6d4099;
    color: white;
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Then go to Enfold theme options > Advanced Styling and edit “Main Menu sublevel Links ”

    Best regards,
    Yigit

    February 2, 2016 at 5:53 pm #576595
    stevegoh422

    Hi Yigit,

    Thank you for the prompt reply.
    However, I’ve tried you the solution you’ve provided but it seems that it cannot solve the problem.

    Please see the child page attached, the last menu item (parent), “Visit Us” is still white and missing.

    February 2, 2016 at 6:04 pm #576602
    Yigit

    Hi!

    There are many CSS conflicts. I believe at this point it would be the best if you removed your custom CSS code and let us know how you would like your menu items to look on initial, active and hover states so we can provide you new code

    Regards,
    Yigit

    February 2, 2016 at 6:23 pm #576620
    stevegoh422

    Hi Yigit,

    I have removed all the color-related CSS codes as told. Below are the effects that I would like to achieve:

    Normal
    Menu Font Color: Purple
    Menu Background Color: White

    Hover
    Menu Font Color: White
    Menu Background Color: Purple

    ———————————————————————————

    Sub-Menu Font Color: White
    Sub-Menu Background Color: Purple

    ———————————————————————————

    On Child Page
    Menu Item Font Color: Purple

    Please let me know if it is achievable.
    Thanks

    February 2, 2016 at 6:43 pm #576629
    Yigit

    Hey!

    Normal
    Font color is already purple and background is white

    Hover
    Please go to Enfold theme options > Advanced Styling and edit “Main menu links” and set background color to purple and font color to white and make sure to check “Apply only to mouse hover state”

    Submenu
    Please go to Enfold theme options > Advanced Styling and edit “Main Menu sublevel Links” twice and check “Apply only to mouse hover state” for hover state

    then please add following code to Quick CSS 

    ul.sub-menu li.current-menu-item > a {
    background: purple!important;
    color: white!important;
}

    Cheers!
    Yigit

    February 2, 2016 at 7:12 pm #576640
    stevegoh422

    Thank you so much! That’s exactly what I need!
    Appreciate your patience and help, Yigit! You may close this topic now.

    Cheers
    Steve

    February 3, 2016 at 8:32 am #576957
    Rikard

    Hi Steve,

    Great, glad we could help :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Menu Item Disappears On Child Page’ is closed to new replies.