We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 35983
    • 7 Posts
    Hi!

    I need the main menu with items of level 1 only. Level 2 will be placed in a different div and it’s not a point here. The main menu display must obey 2 restrictions:
    1) When level 1 page is current, the menu’s item is bold and plain text, not a link.
    2) When level 1’s children pages are current (i. e. level 2 pages, they are absent in the main menu), the main menu’s item is bold and link.

    Restriction 1 is simple to implement. I use the call:
    [!Wayfinder? &startId=`1` &level=`1` &hereTpl=`ActiveMenuItem`!]


    I can’t make the 2nd restriction work. As of now, the parent of the current level 2 item is a link but plain text - same as all other items.

    Could anyone help?
      • 35527
      • 11 Posts
      First point: Does your CSS make items with "ActiveMenuItem" bold?

      Second point: That should be hereClass=`ActiveMenuItem` not hereTpl
        - moltis
        • 35983
        • 7 Posts
        No, it must be hereTpl, since I need to get rid of a link for the current item.

        How about the 2nd restriction?
          • 22427
          • 793 Posts
          May be you need both:
          [tt]&hereTpl[/tt] to get rid of the link, and [tt]&hereClass[/tt] to style the item’s text.
            • 35983
            • 7 Posts
            No, &hereTpl is enough to satisfy restriction 1 because the code will contain class "active" for the current item.

            My question is - how to satisfy restriction 2?
              • 35527
              • 11 Posts
              This is the code I use for Wayfarer, and it works fine with making the actives above it highlighted along with my CSS.
              [[Wayfinder?
                &startId=`0`
                &level=`3`
                &outerTpl=`menu.outer`
                &innerTpl=`menu.inner`
                &rowTpl=`menu.row`
                &innerRowTpl=`menu.innerRow`
                &firstClass=`first`
                &lastClass=`last`
                &hereClass=`active`
              ]]


              However, I can’t really show it in effect since I’m running on XAMPP while I develop it.

              &hereClass will make the active item and all items above it have the class "active" in addition to other classes.
                - moltis
                • 35527
                • 11 Posts
                Basically, ottogal is right. You need both.

                &hereTpl to remove the link on the current item and &hereClass to style the active tree.
                  - moltis
                  • 35983
                  • 7 Posts
                  moltis, ottogal - thanks a lot! Indeed, it works. At first it didn’t since when I was at the level 2 the code generated for its parent was
                  <li class="here">
                  <a ...> link </a>
                  </li>
                  

                  and my CSS rule looked like
                  .here {font-weight: bold;}


                  I don’t know why "bold" didn’t refer to <a> as well in this example. Do you have an idea? Anyway, I just added
                  .here a {font-weight: bold;}
                    • 35527
                    • 11 Posts
                    Because the general rule for links (in this case not being bold) overrides the bold you added to text in that section. It’s a quirk of CSS.
                      - moltis
                      • 35983
                      • 7 Posts
                      Thanks, moltis. The question is exhausted.