Customizing 1.5.1 Menu

Topics: Core, Customizing Orchard, General
Sep 13, 2012 at 5:21 PM

objectiv: customizing the navigation-menu in 1.5.1

In 1.4.2 there were some parameters which helped to customize the 'Szmyd' menu! Are there such means available in the new (1.5.1) core-navigation?
I'm certainly able to create a 'vertical' menu by using the 'technical widget name' when creating the 'menu-widget' like:
.widget-Info_Menu  {display:block; width:60px;}

E.g. I would like to have the sub-menus moved to the right in order to still be able to read the 1st level menu. I'm of course able to do this in nativ MVC3 by adding classes also to  the sub-levels (see below CSS samples).
I could not find a way to, e.g., add classes to sub-levels!

- are there any means to do this in Orchard 1.5.1 ... or do I miss something?
- any suggestions ?

thanks for your time and clarification, ed

sample items from my MVC3 menu:
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;

/*Seconda Level*/
#navigation .sub-level {
    background: #999;
/*Third Level*/
#navigation .sub-level .sub-level {
    background: #099;

Sep 13, 2012 at 6:28 PM

Can you explain what's preventing you from doing it? What did you try and what happened?

Sep 13, 2012 at 8:01 PM

... do I have another senior moment!?

- well, per default the menu widget shows up horizontal
- using CSS ".widget-Info_Menu {display:block; width:60px;}" I can turn it vertical ('Info_Menu' being the technical name for the widget)

e.g. for a two-level menu how do I now address the 2nd level? like:
-  .SubLevelClass  .sub-level {background: #999;},
OR, as I did in MVC3
- #navigation .sub-level {background: #999; }

In case I just add my 2nd-level CSS within '.widget-Info_Menu' I get of course a screwed screen!

Do I not need a specific class=" " on the 2nd level ? , OR
is there another way how I address this second level?

below is my generated code for the 2nd level; again: how can I 'address' this level. I must miss some CSS means!?!

I'm not sure whether I answered your question

thanks for your time, ed 
<script class="shape-tracing-wrapper" shape-id="52" shape-type="MenuItemLink" shape-hint=""></script><li>
<script class="shape-tracing-wrapper" shape-id="52" shape-type="MenuItemLink" shape-hint=""></script>
    <a href="/info_21">P_21</a>
<script class="shape-tracing-wrapper" end-of="52"></script>
</li><script class="shape-tracing-wrapper" end-of="52"></script>


Sep 14, 2012 at 1:51 AM

Well, first you'll want to disable shape tracing. It should make CSS debugging considerably easier.

Can you address the second level by using a selector such as .widget-Info_Menu ul li ul?

Sep 14, 2012 at 4:53 AM

... well a true senior moment ...... and thanks for the 'shape tracing' hint.

ALL, of corse, is fine now!

thanks again for your time spent, ed