MyBB Community Forums

Full Version: Nav Menu styling
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
hi Smile

Im wanting to change my nav menu from the default BB style (breadcrumb) to hover over buttons, how would i go about this, is it a big task or?

thanks Smile
Extremely easy, actually.

The linktree is created from add_breadcrumb(), build_breadcrumb(), and build_forum_breadcrumb() located in ./inc/functions.php

Looking at these functions, they call these templates

eval("\$navsep = \"".$templates->get("nav_sep")."\";");

eval("\$activesep = \"".$templates->get("nav_sep_active")."\";");

eval("\$nav .= \"".$templates->get("nav_bit")."\";");

eval("\$activebit = \"".$templates->get("nav_bit_active")."\";");


More in particular, nav_sep, nav_sep_active, nav_bit, and nav_bit_active. Perhaps look into these templates?
great thanks Smile

will have a look at it
hmm all i have in that template is:

<img src="{$theme['imgdir']}/jump.gif" style="vertical-align:middle;" alt="" />
ok had a look at others too, cant make head & tale of it lol Sad

just though id be able to place roll over buttons in there somewhere but looks a lil confusing \o/
There's one I forgot to mention:

eval("\$donenav = \"".$templates->get("nav")."\";");

So, try nav.
have done, looked at all 5 of them... nav just says:

<div class="navigation">
{$nav}{$activesep}{$activebit}
</div>

aint a clue what that means Sad
nav template is like this :
{$nav}{$activesep}{$activebit}

you may make it like :
{$nav}{$activesep}<button>{$activebit}</button>

AND

nav_bit template is like this :
<a href="{$navbit['url']}">{$navbit['name']}</a>{$sep}

you may make it like :
<button><a href="{$navbit['url']}">{$navbit['name']}</a></button>{$sep}
ahh ok that kinda makes sense... will have a go Smile
when you say <button> is that the actual code? or do i have to replace <button> with something else?
hey it works! Big Grin

just need to add style to my button now Big Grin
how do i add hover effect to it?

heres code for my hover:

.button:hover {
padding: 2px;
color: #ffffff;
background: #000000;
}
ha haa...sussed it Big Grin

ok ive kinda got it working.. but when i click them the link dont work.. just stays on same page?
<button> is actual html code AND you may add a css class for it
<button class="navbutton">...................</button>

.navbutton:hover {
padding: 2px;
color: #ffffff;
background: #000000;
}

you have actual link inside the button code - it should work if there is no mistake !!
oh!! {$activebit} (last part on navigation) is not a link ...
aye weird.. basically all i did was put the <button> tags in, url i didnt touch ..will give it another go see what happens Smile
Could always make it a link.

<a href="/">{$activebit}</a>