Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 20, 2019 at 4:29 am #1080643
    paulchiao

    Hi, wonderful team,

    please help me, I need to change the activated menu border

    please refer to my website in private content, and it also includes an example website, which has the effect of the main menu as I requested.

    currently, you can see on my website,
    the active menu has a border below the word
    actually, I need this border to be displayed above the word

    second,
    the submenus also display a top border while your mouse is hovering on the main menu
    we need to remain this effect as it is.

    please, could you help me by providing with quick CSS?

    Thanks in advance
    Paul

    March 22, 2019 at 7:50 am #1081744
    paulchiao

    no support???

    March 23, 2019 at 8:17 am #1082083
    Vinay

    Hi,

    Thank you for contacting us and sorry for the late reply.

    The required CSS to style the navigation like the example site is below

    /* Underline color on hover */
#top #avia-menu .menu-item:hover > a > .avia-menu-fx {
    background-color: #2997ab;
    position: absolute;
    top: 0px;
}

/* Active menu underline color */
#top #avia-menu li.current-menu-item > a > .avia-menu-fx {
    background-color: #2997ab;
}

    You can find most of the customization codes in our docs :)

    You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

    Best regards,
    Vinay

    March 24, 2019 at 5:08 am #1082210
    paulchiao

    @Vinay
    thanks for your help,
    but unfortunately, it is not the effect we hoped.

    since I know little about CSS, I can not understand how to revise them
    could you do me a favor and help me check again?

    March 25, 2019 at 3:21 pm #1082699
    Victoria

    Hi paulchiao,

    Do you mean you want the border on top of the menu item too?

    Best regards,
    Victoria

    March 25, 2019 at 4:53 pm #1082758
    paulchiao

    Hi Victoria,

    for the main menu and submenu, I want the css effect of both hover and activated statue to be just the same as the website in private content

    yes,
    I need the border to be displayed on top and it should be 3px thick when you hover on the main menu, or when the menu is activated.

    the submenu should have a top border too only for hover.

    thanks in advance.

    March 26, 2019 at 12:51 am #1082920
    Vinay

    Hi,

    Thank you for contacting us.

    I have checked your example site and the code I provided produces the same result.

    I’m not sure what you see on your end? If you still have any issue please upload a screenshot/mockup of the end result you want to one of the below sites and share the link here so we can help you better :)

    https://snag.gy/
    https://ctrlv.cz/en/
    https://imgur.com

    Best regards,
    Vinay

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