Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 29, 2018 at 11:05 pm #1003306
    accutherm

    Hi, I created a mega menu with columns for my website navigation. The columns have a short description in them. How would I go about creating a link under the description like on the 2017 demo – specifically like the private screenshot? See the “Demo Page Overview” Hover link… That is what i’m trying to figure out how to create. I don’t see any documentation on how to achieve this.

    August 30, 2018 at 7:37 am #1003409
    Jordan Shannon

    Hey accutherm,

    Please go to Appearance > Menus and click Screen Options and check “Description” and edit your text in description field

    Best regards,
    Jordan Shannon

    August 30, 2018 at 8:43 pm #1003790
    accutherm

    Hi Jordan, but how do I make the link like in that sample? I know how to add text.

    August 31, 2018 at 10:29 am #1004001
    Victoria

    Hi accutherm,

    That looks like menu title and description and the link of the next menu item.
    Here is how it’s done
    Image 2018-08-31 at 11.29.33.png

    Can you show us what you’ve got so far?

    Best regards,
    Victoria

    • This reply was modified 5 years, 10 months ago by Victoria.
    August 31, 2018 at 7:39 pm #1004204
    accutherm

    Ah ok, I see now how to do it. Thanks @Victria.

    Question: How do I change the rollover rectangle color on hover? How about changing the color of the arrow and text? You can see my menu under “Departments”

    September 3, 2018 at 2:04 pm #1004962
    Victoria

    Hi accutherm,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .header_color .main_menu .menu ul li>a:hover .avia-bullet {
  border-color: #fff;
}
#top .header_color .main_menu .menu ul li>a:hover,
#top #wrap_all .av-main-nav ul > li:hover > a {
  color: yellow;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 4, 2018 at 8:22 pm #1005744
    accutherm

    Not quite the code I was looking for. In the demo when you hover over the link there is a rectangle behind the text like the demo. How do I achieve this? Sorry I should have been more specific. I attached a screenshot of the hover state

    September 6, 2018 at 3:34 am #1006398
    Ismael

    Hi,

    Thanks for the update. You can use this css code.

    #top .header_color a:hover .avia-bullet {
    border-color: #88bbc8;
}

#top .header_color .main_menu .menu ul li>a:hover {
    color: #333333;
}

.header_color .main_menu .menu ul li a:hover, .header_color .av-subnav-menu ul a:hover {
    background-color: #f8f8f8;
}

    Best regards,
    Ismael

    September 6, 2018 at 9:15 pm #1006812
    accutherm

    Thanks, that code works when I add the !important; to each element. How would I change the color of the triangle not on hover?

    September 6, 2018 at 10:23 pm #1006820
    Jordan Shannon

    Hi,

    Where can I view that arrow?

    Best regards,
    Jordan Shannon

    September 7, 2018 at 8:05 pm #1007288
    accutherm

    screenshot

    September 10, 2018 at 10:52 am #1007853
    Ismael

    Hi,

    Thanks for the update. This css code should change the color of the menu item bullet or arrow.

    .header_color .avia-bullet {
    border-color: red;
}

    Adjust the color value as needed.

    Best regards,
    Ismael

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