Inserting image into Navigation items

Topics: Customizing Orchard
Jul 18, 2012 at 2:28 AM
Edited Jul 18, 2012 at 5:51 AM

I'm just starting out with Orchard and I'm a bit confused as to the correct way to insert and use images for navigation menu items. The Navigation node in the Dashboard doesn't allow to upload an image into the  "nav ul li" created from each additional item so then how can this be done? How can I dig into the source html to add CSS classes for custom styling like a background-image that would change on hover/active, etc? I don't see any of the source files in my project all I see is in Layout.cshtml:

@if (Model.Navigation != null) {
<div id="layout-navigation" class="group">
    @Zone(Model.Navigation)
</div>
}

 

but I don't know what that's doing behind the scenes. Would someone care to explain or point me in the right direction? 
Thanks in advance. 

Jul 18, 2012 at 10:30 PM

I've been looking for a way to do this for a while now with still no luck, anybody have an idea?

Jul 19, 2012 at 11:21 AM

Hi parliament718, welcome to Orchard. The zone named Navigation is just a logical name for a zone inside the theme, you can put anything in there. As for Orchard 1.5 you need to add a menu widget to it (/Admin/Widgets). I guess you can go to '/Admin/Navigation' to enter custom HTML for a menu item to add a picture. Have not used it myself yet, but just try it out.