We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 29332
    • 80 Posts
    I’m trying to add WayFinder to a specific section in my style sheet, but instead it separates into another "row". (See wrong_nav image)
    Here is my MODx code:
    <div class="roundedcornr_box_133584">
       <div class="roundedcornr_top_133584"><div></div></div>
          <div class="roundedcornr_content_133584">
          	<span style="vertical-align:bottom;"> <!-- this makes sure all text or images sits at the bottom of the blue box -->
              <p></p> <!-- this leaves a space between the top of the blue box and the text. -->
    
                <img src="images/logo-crop.png" width="91px" height="75px" /> <!--do not make the logo larger than this size! -->
                
    <!-- these are the navigation buttons -->
               <div id="slidetabsmenu"> 
                     [!Wayfinder? &startId=`0` &rowTpl=`menuRows` &level=`1` &rowClass=`slidetabsmenu`!] 
               </div>
            
            </span>
     </div>
       <!--<div class="roundedcornr_bottom_133584"><div></div></div> --> <!-- this is the bottom rounded corners for blue -->
    </div>
    <div class="roundedcornr_box_white">
    	<!--<div class="roundedcornr_top_white"><div></div></div> --> <!-- this is the top rounded corners for white -->
    
          <div class="roundedcornr_content_white">
              
            <p>
              <h1>[*pagetitle*]</h1>
               <br/>
              [*#content*]
            </p>
    
        </div>
       <div class="roundedcornr_bottom_white"><div></div></div>
    


    Here is the css code:
    #slidetabsmenu {
    float:left;
    width:100%;
    font-size:90%;
    line-height:normal;
    border-bottom: 1px solid gray;
    }
    
    * html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
    margin-bottom: 1em;
    }
    
    #slidetabsmenu ul{
    list-style-type: none;
    margin:0;
    margin-left: 10px;
    padding:0;
    }
    
    #slidetabsmenu li{
    display:inline;
    margin:0;
    padding:0;
    }
    
    #slidetabsmenu a {
    float:left;
    background:url(tab-left.gif) no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
    text-decoration:none;
    }
    
    #slidetabsmenu a span {
    float:left;
    display:block;
    background:url(tab-right.gif) no-repeat right top;
    padding:3px 14px 3px 5px;
    font-weight:bold;
    color:#3B3B3B;
    }
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #slidetabsmenu a span {float:none;}
    /* End IE5-Mac hack */
    
    #slidetabsmenu a:hover span {
    color: black;
    }
    
    #slidetabsmenu #current a {
    background-position:0 -125px;
    }
    
    #slidetabsmenu #current a span {
    background-position:100% -125px;
    color: black;
    }
    
    #slidetabsmenu a:hover {
    background-position:0% -125px;
    }
    
    #slidetabsmenu a:hover span {
    background-position:100% -125px;
    }
    


    So basically, I want it to be set up like the current_nav picture, not the wrong_nav picture.
      Teaching myself MODx