We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 31490
    • 23 Posts
    I’m going round in circles with my 2nd Wayfinder navigation and I’m hoping someone may be able to save my sanity.

    I have a straightforward main navigation: Home, Products, About etc

    As a subnavigation from the Products menu, I have a side navigation which is constant on every internal page of the site. I have managed to call up this side nav, but I simply can’t find a way to style it. I have read lots of the Wayfinder documentation and have tried to follow Kongondo’s example from his amazing Wayfinder tome, but my menu has absolutely no reaction to the styling! It’s driving me nuts!

    This is my original code (I know, I should have kept the CSS more straightforward - hindsight is a wonderful thing):
    <!-- Inner Navigation -->
                    <div class="inNav">
                    	<div class="navTop"><!-- --></div>
                        <div class="navMid">
                        	<ul id="innerNav">
                            	<li><a href="#" class="rugs selected"></a></li>
                                    <li><a href="#" class="bits"></a></li>
                                    <li class="last"><a href="#" class="feed"></a></li>
                            </ul>                    
                        </div>
                        <div class="navBot"><!-- --></div>             
                    </div>
                    <!-- End Inner Navigation -->


    At this stage, I’m just trying to style the ’innerNav’ id - I haven’t even got as far as thinking of styling the individual <li>s as although I’m sure it’s possible, I’m not sure that I’m up to it!

    This is the chunk I have created and I have called it ’sideNav’:
    <ul[+wf.classes+]>[+wf.wrapper+]</ul>


    And this is what I have included in my template.
    <!-- Inner Navigation -->
                    <div class="inNav">
                    	<div class="navTop"><!-- --></div>
                        <div class="navMid">
                        	[[Wayfinder? &startId=`2` &level=`2` &outerTpl=`sideNav` &outerClass=`innerNav`]]
                        </div>
                        <div class="navBot"><!-- --></div>             
                    </div>
                    <!-- End Inner Navigation -->


    It works in theory, but it’s just not calling up any of the ul styling from the ’innerNav’.

    Can anyone tell me where I may be going wrong?

    Thank you in advance.

    Vicky
      • 4310
      • 2,310 Posts
      <ul id="innerNav">[+wf.wrapper+]</ul>

      [[Wayfinder? &startId=`2` &level=`2` &outerTpl=`sideNav`]]
        • 31490
        • 23 Posts
        That works! Thank you so much. Is is possible to style each <li> individually do you think? I’m just wondering if I should persist in trying, or if I should simply compromise the design.
          • 4310
          • 2,310 Posts
          Lots of other ways, but you could...
          Create a chunk named rowNav
          put this code in it :
          <li><a class="[+wf.attributes+]" href="[+wf.link+]" title="[+wf.title+]"></a>[+wf.wrapper+]</li>

          Change your Wayfinder call to :
          [[Wayfinder? &startId=`2` &level=`2` &outerTpl=`sideNav` &rowTpl=`rowNav`]]

          Then add your class names as required in the Link Attributes field for each document in the Manager.
            • 31490
            • 23 Posts
            Crikey, you’re a genius - it would have taken me weeks to figure that out, and yet you make it appear so straightforward. Thank you so much. I don’t want to push my luck with your advice, but I’m wondering if there is also a way to include the <li class="last"> on the final item. I’m sure it can be done, as I can see it all the way through Kongondo’s examples, but i haven’t worked it out.

            I’ve also changed the ’selected’ link in my css file so that it is now ’active’, but it doesn’t seem to have the desired effect. The css I’m using is: #innerNav li a.feed.active and this same syntax works for the top navigational links with Wayfinder. Should I also be including something in the call for this?
              • 4310
              • 2,310 Posts
              <li[+wf.classes+]><a class="[+wf.attributes+]" href="[+wf.link+]" title="[+wf.title+]"></a>[+wf.wrapper+]</li>

              Should do it, based on your original code/css
                • 22427
                • 793 Posts
                The css I’m using is: #innerNav li a.feed.active
                .active is a class of the <li> element, not of the <a>. May be I’m wrong, but I think that should read
                #innerNav li.active a.feed
                (BTW: Don’t mix up this class .active with the pseudoclass :active for <a> elements.)
                  • 31490
                  • 23 Posts
                  You’re a marvel! Thank you so much for all your help - can’t tell you how much I appreciate it.