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

    I need some help with Wayfinder. Is it possible to have two different styles on the one Wayfinder? I have a navigation bar with multiple child pages inside parent pages. BUT for one of those parent sections, I'd like a different layout if possible. It's the news section. I want it to look more square. It's exactly like this navigation bar: http://themes.semicolonweb.com/html/canvas/v5/intro.html

    Is this possible or do i need to create two different Wayfinders.

    Any help would be greatly appreciated. Here's my nav code:

    <nav>
      <ul>
    		<li><a href="#"><div>Home</div></a></li>
        <li><a href="#"><div>About Us</div></a>
    			<ul>
    				<li><a href="#"><div>Team</div></a>
    					<ul>
    						<li><a href="#"><div>Employee A</div></a></li>
                <li><a href="#"><div>Employee B</div></a></li>
                <li><a href="#"><div>Employee C</div></a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    		<li class="mega-menu"><a href="#"><div>News</div></a>
    			<div class="mega-menu-content">
    				<ul class="mega-menu-column">
    					<li class="mega-menu-title"><a href="#"><div>Year</div></a>
    						<ul>
                  <li><a href="#"><div>Article 1</div></a></li>
                  <li><a href="#"><div>Article 2</div></a></li>
                </ul>
    					</li>
              <li class="mega-menu-title"><a href="#"><div>Year</div></a>
    						<ul>
                  <li><a href="#"><div>Article 1</div></a></li>
                  <li><a href="#"><div>Article 2</div></a></li>
                </ul>
    					</li>
    				</ul>
    			</div>
    		</li>
        <li><a href="#"><div>Competition</div></a>
    			<ul>
    				<li><a href="#"><div>Winners</div></a>
    					<ul>
    						<li><a href="#"><div>A</div></a></li>
                <li><a href="#"><div>B</div></a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
        <li><a href="#"><div>Contact Us</div></a></li>   
    	</ul>  
    </nav>
    


    Also, is this layout right?

    <!-- WayFinder Layout -->
    <nav>
      <ul><!-- OuterTpl -->
    		<li></li><!-- RowTpl -->
        <li></li><!-- RowTpl -->
        <li><!-- parentRowTpl -->
          <ul><!-- InnerTpl -->
        		<li></li><!-- RowTpl -->
            <li></li><!-- RowTpl -->
            <li>
              <ul><!-- InnerTpl -->
            		<li></li><!-- InnerRowTpl -->
                <li></li><!-- InnerRowTpl -->
                <li></li><!-- InnerRowTpl -->
            	</ul>
            </li><!-- InnerRowTpl -->
        	</ul>      
        </li><!-- RowTpl -->
        <li></li><!-- RowTpl -->
        <li></li><!-- RowTpl -->
    	</ul>  
    </nav>