Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 23, 2015 at 2:07 pm #463383
    zedduo

    Hi.

    I know how to place an icon next to the menu item, by copying the icon short code next to the menu text in the menu options. But i need to know how I do place the icon directly on top of the menu text? I tried fiddling with the CSS but Im not sure which item to target.

    see example

    • This topic was modified 9 years, 5 months ago by zedduo.
    June 24, 2015 at 10:12 am #463859
    Josue

    Hi!

    Can you apply the icons first and then post a link to your site so we can provide you with the precise CSS code?

    Cheers!
    Josue

    June 24, 2015 at 10:32 am #463874
    zedduo

    Thanks Josue!

    The link is below.

    • This reply was modified 9 years, 5 months ago by zedduo.
    June 24, 2015 at 10:37 am #463881
    Josue

    Hey!

    Try with this:

    .avia-menu-text .av_font_icon {
    position: absolute;
    top: -25px;
}

.html_header_top.html_header_sticky.html_large #header_main .container, .html_header_top.html_header_sticky.html_large.html_main_nav_header .main_menu ul:first-child > li a {
    line-height: 170px;
}

    Regards,
    Josue

    June 24, 2015 at 11:48 am #463926
    zedduo

    Awesome thanks!

    Can it be centred? Do I need to add text-align to .av_font_icon?

    June 24, 2015 at 12:13 pm #463950
    Josue

    Change the icon code to:

    .avia-menu-text .av_font_icon { position: absolute; top: -25px; left: 0; right: 0; margin: 0 auto;}

    Regards,
    Josue

    • This reply was modified 9 years, 5 months ago by Josue.
    June 24, 2015 at 1:00 pm #463983
    zedduo

    Fantastic! Thank you so much!!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘How to place an icon on top of a menu item’ is closed to new replies.