Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 23, 2018 at 10:43 am #945341
    dweddell

    Hi

    I wish to style individual menu items in the nav.
    I have a number of menu items aligned to the right and wish to:

    1) remove separator for these items only
    2) change font size for these menu items
    3) change font colour for these menu items

    I’ve tried styling menu item, e.g. li#menu-item-222 {float: right;}, but any changes to fonts or borders don’t seem to work?

    kind regards

    Duncan

    April 24, 2018 at 10:16 am #945802
    Ismael

    Hey dweddell,

    Thank you for using Enfold.

    Look for the Screen Options in the Appearance > Menus panel and enable the Custom CSS Class. Apply a unique css class attribute to each menu item.

    Best regards,
    Ismael

    April 24, 2018 at 10:30 am #945813
    dweddell

    Hi Ismael

    I’ve tried this., but I cant get it to work.

    If you look a the menu item ‘A University Login’ I’ve applied the class:

    .unilogin {
    font-size: 30px!important;
    color: red!important;
    border: none!important; }

    but for some reason this is not working?

    kind regards

    Duncan

    April 24, 2018 at 3:36 pm #945975
    dweddell

    Hi Ismael

    Got it sorted!

    For others, to style an individual menu item simply insert menu item id (e.g. menu-item-222) into .av_seperator_small_border .av-main-nav > li > a > .avia-menu-text so you get code something like this in your custom css

    .av_seperator_small_border .av-main-nav > li#menu-item-222 > a > .avia-menu-text
    {
    colour:
    border:
    font-size:
    }

    Kind ergards

    Duncan

    April 25, 2018 at 10:38 am #946492
    Vinay

    Hi,

    Glad you got it sorted and thank you for sharing your solution :)

    If you need any further help please open a new ticket.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Styling Individual Menu Items’ is closed to new replies.