-
AuthorPosts
-
September 23, 2014 at 11:43 pm #323966
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 #325476Hey 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,
PeterSeptember 26, 2014 at 5:32 pm #325696OK. 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,
ClaudiaSeptember 28, 2014 at 7:28 am #326100Hey!
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!
IsmaelSeptember 28, 2014 at 4:16 pm #326162Hi 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- This reply was modified 10 years, 2 months ago by cagraphicdesign.
September 29, 2014 at 8:34 am #326361Hi!
Use this to set a minimum width:
#header_main .container, .main_menu ul:first-child > li a { min-width: 76px; }
Cheers!
IsmaelSeptember 29, 2014 at 2:06 pm #326531Thanks…looked great, I am getting the hang of this!
-
AuthorPosts
- The topic ‘icons for menu items’ is closed to new replies.