Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 23, 2014 at 11:43 pm #323966
    cagraphicdesign

    I am new to Enfold and I would like to create menu items that I have seen on a website that used Enfold. I am not sure if it is an enfold option or was created using customizations. Please have a look at this site and tell me how to recreate it. I created my own icons and color:
    http://theworksmiths.com/

    September 26, 2014 at 9:44 am #325476
    Dude

    Hey cagraphicdesign!

    Yes, you can insert an icon shortcode in the “menu title” field or description box.

    I recommend to use the “Magic wand” icon in the TinyMCE toolbar to generate the icon shortcode (post editor page), then go to the menu page and copy the shortcode into the title or description text field and save the menu.

    Best regards,
    Peter

    September 26, 2014 at 5:32 pm #325696
    cagraphicdesign

    OK. It worked …BUT the client wants the icons in to be white in a blue box similar to the afore mentioned website:
    http://theworksmiths.com/
    It looks like there was some fancy coding there to get the boxes to change with browser size… I don’t need to go that far. I am a graphic designer in uncharted territory so bear with me…
    I assume that since my default design for the header layout menu items is just a thin color bar under each menu there must be some custom coding (and perhaps replacing the bar image file with a box image file to create the box)
    Also, I am creating custom font icons so will I need to add the page title as part of the image?
    I know this may be beyond what theme support offers but any illumination would be helpful
    Thanks for your help,
    Claudia

    September 28, 2014 at 7:28 am #326100
    Ismael

    Hey!

    Please give us a link to the actual page. We would like to check it. You can change the menu background of a menu item with this:

    li#menu-item-3195 {
background-color: red !important;
}

    The id might be different from yours so you have to use google inspector or firebug to get the correct menu id.

    Cheers!
    Ismael

    September 28, 2014 at 4:16 pm #326162
    cagraphicdesign

    Hi All
    This is the actual site that I was trying to replicate
    http://theworksmiths.com/

    But I have created my own solution which I like better.The site I am working on:
    http://www.jodiecharlop.com/

    My solution: I tried to put a short code of a font icon (that I created) but the results made the menu item rectangle double in depth. Instead, I ended up finding a plugin called “Menu Icons” which facilitates inserting icon fonts or images into the menu. I used that in combination with Ismael’s css to change the background color AND I also used “Advanced Styling” > Main Menu Links to create a hover color. I LOVE this result! EXCEPT that the far right menu item is narrower in width than the other two. Any ideas of how to make all three equal?
    Have a look:
    http://www.jodiecharlop.com/

    I appreciate all your support!
    Claudia

    September 29, 2014 at 8:34 am #326361
    Ismael

    Hi!

    Use this to set a minimum width:

    #header_main .container, .main_menu ul:first-child > li a {
min-width: 76px;
}

    Cheers!
    Ismael

    September 29, 2014 at 2:06 pm #326531
    cagraphicdesign

    Thanks…looked great, I am getting the hang of this!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘icons for menu items’ is closed to new replies.