MyBB Community Forums

Well this is an example of the text from from header_welcomeblock_member template:

<div id="nav_outside">
<ul id="navigation-1">
   <li><a href="http://www.vampirecounts.net/portal.php" title="Home" target="_self" >Home</a>
   </li>
    <li><a href="http://www.vampirecounts.net/index.php" title="Forum" target="_self">Forum</a>
      <ul class="navigation-2">
         <li><a href="http://www.vampirecounts.net/index.php" title="Index" target="_self" >Index</a>
         </li>  
         <li><a href="http://www.vampirecounts.net/showthread.php?tid=4076" title="Carpe Noctem Staff" target="_self">Staff</a>
         </li> 
         <li><a href="http://www.vampirecounts.net/showthread.php?tid=5" title="Forum Rules" target="_self" >Rules</a>
         </li>
         <li><a href="http://www.vampirecounts.net/search.php?action=getnew" title="New Posts" target="_self" >New Posts</a>
         </li>
         <li><a href="http://www.vampirecounts.net/search.php?action=getdaily" title="Today's Posts" target="_self">Today's Posts</a>
         </li>
         <li><a href="http://www.vampirecounts.net/memberlist.php" title="Memberlist" target="_self" >Memberlist</a>
         </li>
         <li><a href="http://www.vampirecounts.net/usermap.php" title="Member's Locations" target="_self" >Member's Locations</a>
         </li>
         <li><a href="http://www.vampirecounts.net/calendar.php" title="Calendar" target="_self" >Calendar</a>
         </li>
         <li><a href="http://www.vampirecounts.net/misc.php?action=help" title="Help Topics" target="_self" >Help</a> 
        </li>
      </ul>
   </li>
   <li><a href="http://www.vampirecounts.net/usercp.php" title="User CP" target="_self">User Control Panel</a>
      <ul class="navigation-2">
         <li><a href="http://www.vampirecounts.net/usercp.php" title="User CP" target="_self">User CP</a>       
        </li>
        <li><a href="http://www.vampirecounts.net/usercp.php?action=editlists" title="Buddy List" target="_self">Buddy List</a>
        </li>
         <li><a href="http://www.vampirecounts.net/usercp.php?action=subscriptions" title="Subscribed Threads" target="_self">Subscribed Threads</a>
        </li>
         <li>{$admincplink}
         </li>
         <li>{$modcplink}
         </li>
      </ul>
   </li>
   <li><a href="http://www.vampirecounts.net/private.php?fid=1" title="Inbox" target="_self" >Inbox </a> 
      <ul class="navigation-2">
          <li>{$lang->welcome_pms_usage}
          </li> 
      </ul>
   </li>
    <li><a href="http://www.vampirecounts.net/links_fantasy.php" title="Links" target="_self" >Links</a>
      <ul class="navigation-2">
    <li><a href="http://www.vampirecounts.net/links_fantasy.php" title="Warhammer Fantasy Links" target="_self" >Warhammer Fantasy</a>
      </li>
    <li><a href="http://www.vampirecounts.net/links_40000.php" title="Warhammer 40,000 Links" target="_self" >Warhammer 40,000</a>
      </li>
    <li><a href="http://www.vampirecounts.net/links_general.php" title="General Discussion Links" target="_self" >General Discussion</a>
      </li>
      </ul>
   </li>
    <li><a href="http://www.vampirecounts.net/invocation.php" title="The Invocation" target="_self" >The Invocation</a>
      </li>
    <li><a href="http://www.vampirecounts.net/search.php" title="search" target="_self" >Search</a>
      </li>
   <li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a>
   </li>
</ul>
</div>/

Inside each <li> that you want to have a popup text, either before of after the link code, add this

<span>Text here</span>

And obviously replace Text here with the text you want to appear.

Then in your CSS, add this.

ul#navigation-1 li, ul.navigation-2 li {
        position: relative;
}

ul#navigation-1 li span, ul.navigation-2 li span {
        position: absolute;
        top: -20px;
        left: 0;
        background: #111;
        padding: 3px;
        display: none;
}

ul#navigation-1 li:hover span, ul.navigation-2 li:hover span {
        display: block;
}

That should do it.

Ok, I tried it but it didn't work. In the template I entered:

 <li><a href="http://www.vampirecounts.net/testsite/portal.php" target="_self" ><span>A collection of things which interest me, and might interest you</span>Home</a>

I also entered the text you gave me in the global.css under the existing data for the menu. I tried it and nothing happened? Do you need any more information?

Oh, and thank you very much for helping me by the way

Put the <span></span> text after the </a>.

Instead of

<li><a href="http://www.vampirecounts.net/testsite/portal.php" target="_self" ><span>A collection of things which interest me, and might interest you</span>Home</a>

It would be

<li><a href="http://www.vampirecounts.net/testsite/portal.php" target="_self" >Home</a><span>A collection of things which interest me, and might interest you</span>

Hey,

Well I have amended that, and have managed to get the text to pop up, however it is in the wrong place. Basically the text pops up over the button as per this screenshot:

[attachment=18091]

How do I put this above the navigation bar in the centre, and on one line?

Cheers

Try adding this to the ul#navigation-1 li span, ul.navigation-2 li span in the CSS

min-width: 300px;

If it still does that you can try adding more px.

Hi again!

I have been playing around with this but still having problems.

Basically the text is popping up in regards to the location of the hovered over button. This means that if I hover over something halfway down one of the lists, the text cuts into the list.

Also it doesn't centre , but positions left but left of the list again which means when you hover over things towards the right it goes off the page.

Basically I want to be able to position the popup text by the box that encompasses the navigation bar, namely this:

}

#navigation-1 {
background:url(images/Seperator.gif) top left repeat-x;
padding:1px 0;
margin:0px;
list-style:none;
width:100%;
height:21px;
border-top:1px solid #525252;
border-left:1px solid #525252;
border-right:1px solid #525252;
border-bottom:1px solid #525252;
font:normal 8pt verdana, arial, helvetica;

Any ideas how to do that?

Cheers

Hi,

No help with this?

I would really appreciate if someone could help me with this last little bit........

Anyone - I would be prepared to use javascript if needs be?