Creating a Customised Menu

[SphericalOwner]

I've posted this exactly as I have it. You will obviously have to change the urls, the image and the colour of the text to suit.

Just to remind you what menu you are copying



CSS

Code:

  /*My Own Navigation2 Menu*/
    .nav2 {
      display: block;
      margin-bottom: 5px;
      height: 1%;
      background: transparent;
    }

    .nav2:after { content: ""; display: block; clear: both; }

    .nav2 ul { list-style: none; margin-left: -40px; }

    .nav2 li { float: left; }

    .nav2 li a {
      color: #efe5be;
      padding: 10px;
      padding-top: 15px;
      padding-left: 50px;
      display: block;
      text-decoration: none;
      font-size: 16px;
      background: url(https://i58.servimg.com/u/f58/19/62/66/66/a3214010.png) no-repeat;
    }

HTML

First of all you would have to hide the original menu that is already there by going into ...

Display - Templates - General - Overall Header

Find this at about 250 and remove one of the letters which will also hide it.

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                        <tr>
                            <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                        </tr>
                    </table>

I simply removed the R at the end of GENERATED_NAV_BAR making it GENERATED_NAV_BA

Once you have done that then under all that code put

Code:

    <div class="nav2">
    <ul>
        <li class="subnav2"><a href="http://zandranna.forumotion.com/portal?pid=1">About Me</a></li>
        <li class="subnav2"><a href="http://zandranna.forumotion.com/portal?pid=2">Site Map</a></li>
    <li class="subnav2"><a href="http://zandranna.forumotion.com/">Forums</a></li>
    <li class="subnav2"><a href="http://zandranna.forumotion.com/memberlist">Friends</a></li>
      <li class="subnav2"><a href="http://zandranna.forumotion.com/h1-da-rulz">Da Rulz</a></li>
        <li class="subnav2"><a href="http://bbwdirectory.boards.net/" target="_blank">Directory</a></li>
    </ul>
    </div>

So it will then look like this...

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                        <tr>
                            <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BA}</td>
                        </tr>
                    </table>
                 
                  <div class="nav2">
<ul>
    <li class="subnav2"><a href="http://zandranna.forumotion.com/portal?pid=1">About Me</a></li>
    <li class="subnav2"><a href="http://zandranna.forumotion.com/portal?pid=2">Site Map</a></li>
 <li class="subnav2"><a href="http://zandranna.forumotion.com/">Forums</a></li>
 <li class="subnav2"><a href="http://zandranna.forumotion.com/memberlist">Friends</a></li>
  <li class="subnav2"><a href="http://zandranna.forumotion.com/h1-da-rulz">Da Rulz</a></li>
    <li class="subnav2"><a href="http://bbwdirectory.boards.net/" target="_blank">Directory</a></li>
</ul>
</div>