Different style for main nav menu

Different style for main nav menu, a forum discussion on Jojo CMS. Join us for more discussions on Different style for main nav menu on our Themes Support forum.

Back to Forum Index : Back to Themes Support   RSS

10 Feb 2010
Posts: 39

Hello JojoCMS Team

I would like to style one link of the main nav menu different than the others and show a different main nav menu depending on user logged in or not.

How do we achieve this?

Thank You in advance

Core Developer


11 Feb 2010
Posts: 327

There are a few ways to do this.

Firstly, look on Edit Pages on the Navigation tab for permissions. Notice the group 'notloggedin'. If you give 'show' and 'view' permissions to 'notloggedin' users and remove the permissions for 'everyone' then the page will appear on the menu only when the user is not logged in.
To have pages show up for logged in users only, remove the 'everyone' permissions and assign the permissions to 'admin' group, 'registered' group or whatever other groups you have.

You might also be interested in the 'default group' option under Edit Options -> Security. This is a group that is assigned to every person who registers on the site. Don't set this to 'admin', I usually set this to 'members' or 'registered' etc.

If the above isn't useful for showing / hiding pages on the nav, here's a more manual method.

There is a global variable called $_USERGROUPS which is set early on in the script. This is an array of all the usergroups the user belongs to. If they aren't logged in, they will be a member of the 'notloggedin' group, otherwise they will belong to 'admin' or 'registered' or something else. You can test against this in global.php of your theme using PHP's in_array() function, and save the result in a Smarty variable. In your .tpl, test against this Smarty variable.

eg. themes/YOUR_THEME/global.php
if (in_array('notloggedin', $_USERGROUPS)) {
$smarty->assign('userloggedin', false);
} else {
$smarty->assign('userloggedin', true);

eg. themes/YOUR_THEME/templates/template.tpl
{if $userloggedin}
<a href="login/">Login</a>
<a href="logout/">Logout</a>
Rick Rick

11 Feb 2010
Posts: 336

Harvey's solution is great, but if you want to avoid editing files if you want to change which menu item is targetted then you could try this.

If you want to avoid hard coding menu items, you could set the $userloggedin smarty var like Harvey has mentioned, but then instead of manually adding the menu item, simply use a template file such as the one below

<ul id="nav" class="{if $userloggedin}loggedin{else}notloggedin{/if}">
{foreach from=$mainnav item=n}
<li class="p{$n.pageid}{if in_array($n.pageid, $selectedpages)} selected{/if}"><a href="{$n.url}" title="{$n.title|escape:"html"}"{if $n.pg_followto=='no'} rel="nofollow"{/if}>{$n.label}</a></li>

This will add a "loggedin" or "notloggedin" class to the menu as well as classes such as "p1" for the menu item for page id 1.

So if you want to make a specific menu item look different, just find it's page id (eg when you're editing the page) and add a style. For example if you wanted to customise your contact page menu item and it's ID was 8, you could use the css style
#menu.loggedin .p8 {
background: blue;

#menu.notloggedin .p8 {
background: red;

The background colours are just examples. This way when you want to style an individual menu item, simply find it's ID and head over to Options->Design and update some CSS.. no manually editing files.

11 Feb 2010
Posts: 10

Regarding your question about the different link style in menu:

The best way is to check against the page id in the template and assign another css class to the menu item.

{foreach from=$nav item=n}
<li {if $n.pageid == 123) } class="special"{/if}>
<a href="{$n.url}" >{$n.pg_title}</a>

In case that you assign the page id to every menu item, then styling via CSS (as described by Rick) is much better, of course. Keeps your code clean.
Back to Forum Index : Back to Themes Support   RSS
You must be logged in to post a reply

You need to Register or Log In before posting on these forums.