(English) concrete5 SooperFish drop down navigation

Leider ist der Eintrag nur auf English verfügbar.


Okay, so it seems as if I am so much of a newb that it’s not working quite like it is supposed to. I have changed my theme and edited my backgrounds and such but with this theme (floating) I am able to keep the layout, see the drop down menu but it doesn’t drop down.

If I use the above code then it only displays the code jargon on the site.

Do I edit any portion of the code to point to the jquery?

I’ll keep trying.

How would I include the another template almost exactly the same as the default in this script?
I guess i would have to add it somewhere in here?


function callback($buffer)
return (str_replace(‘class=”nav”‘, ‘class=”sf-menu” id=”nav”‘, $buffer));


Any help would be really appriciated.


What do you mean by “another template”? A SooperFish CSS template I assume? You only have to replace the CSS file you’ve put in the directory “css”. concrete5 automatically loads those files located in the “css” directory if their extension is “.css”!

Michelle, if you’re talking about the site you’ve entered when you wrote the ast comment, it’s not a jQuery issue in this case. However, I can’t see anything about the SooperFish template. Are you sure you’ve selected the right autonav block template after you added the autonav block?

Hi remo,

WOW, I spent almost two days trying to get this working and you make it look easy 😉

A couple of questions, if you don’t mind.

1 How do you control the hover shading, my template keeps over-riding any sooperfish settings?

2. How would I make the menu span across the full width? When I try to use anything but display:inline it turns into a vertical list.


1. In the example CSS, there’s a CSS style like this:

ul#theme3 li a:hover, ul#theme3 li a:focus

Just look for :hover, usually there aren’t too many of them..

2. That’s probably a bit difficult as every element has a different width. Sooperfish would have to calculate all the items manually and as far as I know, there’s no such option. However, I just created a wrapper for it, I’m not the author of SooperFish and certainly don’t know every line of code in it. You might want to check if the actual author knows a bit more about that: http://www.sooperthemes.com/open-source/jquery/jquery-sooperfish-dropdown-menus


First of all, thank you for all your tutorials!

I’ve followed this one and it works perfectly, however, I have an issue with the second tier sub menu on chrome and IE.

Here is what I’m working on..

The sub menu is only set up for Talent, under Talent there’s a submenu, and under each category is a second submenu.

Firefox displays the second menu no problem, but I can’t seem to get it to display the second level menu on Chrome, or IE. At first I thought it was due to a jquery conflict I have for the Mobile responsive version of the navigation, but after removing that jquery script, the issue is still there.

I’m at a loss, I’ve spent hours going over my css, adding margins, background colors, to figure out where the menu is, but can’t seem to find it.

Any help would be greatly appreciated.

Chris, this is probably because the third level menu is behind the second level menu. Try to add this:

.mainNav ul ul ul {
	margin-left: 50px ! important;

I won’t make the layout look nicer but I think it should show you where the menu is hidden. I’m not sure, but I think it’s a problem caused on my sooperfish css.
You might want to download the latest CSS, it might work better: http://www.sooperthemes.com/open-source/jquery/jquery-sooperfish-dropdown-menus

First of all, this blog post is about SooperFish and not Superfish. While both sound similar, it’s not the same.
I assume that I’ve built more projects based on concrete5 and never had any issues. Also, the concept I’m describing is aimed at developers. If you want an easier solution (maybe for you “userfriendlier”), look at stacks or global areas. I still prefer the method described in this template as I like to keep the navigation in the code but that’s just a personal taste.

You say there are better options but don’t mention anything specific. Your comment feels a bit like a personal opinion and not much more. Why don’t you state some more specific issues you’ve had with S(oo/u)perFish and concrete5?

hi there, thanks for this great tutorial

the only thing im having trouble with is that the dropdownmenu appear unaligned with the parent page.

this means for example “about>ignacio>bio>expertise>” everything beneath “about” appears moved to the right…and it even seems to be part of other menu pages…

how could I solve this?


Hi Frank! The sooperfish method used to initialize the menu has a bunch of different options. One which allows you to change the animation.
Have al look at this code and you’ll see a more advanced example: https://github.com/jjroelofs/jQuery-SooperFish/blob/master/example-advanced.html

No, this template doesn’t have any options in the dashboard, it’s not an add-on but only a block template. It would be possible to create a complete add-on, but that takes more work. My tutorial is a solution focused on developers.

Hey Remo – thanks for this, very useful – good work!

Where would be the best place to add in conditionals for page attributes – primarily I want to add in the ‘exclude from nav’, or even better, ‘exclude children from nav’ attribute.

Usually in auto nav I’d add this to the for loop, but this script is constructed a little differently right?

Hey Richard, yes it works a bit different, it basically wraps the existing template in order not to have to duplicate a lot of code.
However, you can easily make modifications if you copy /concrete/blocks/autonav/view.php and put that content in your view.php. But don’t forget to change the class “nav” to “sf-menu”.

For those who wonder about this (I’ve sent him an e-mail): The issue occurs because the top-level pages have a link as well. If you use a touch device, it will open those links. If someone wants to use SooperFish on a touch device, the link in the top level pages has to be replaced by a “#”, but keep in mind that touch device users won’t see the content you’ve added to the top level pages!

Dear Remo,

Has anyone come up with a solution for disabling the parent link in a dropdown menu using sooperfish? In the past I have used ‘replace_link_with_first_in_nav’ which while not what I wanted was an acceptable solution. The problem I am having now is that I have two levels of links to skip and ‘replace_link_with_first_in_nav’ only works for one.

Elsewhere I saw the following instructions:


Which are for another nav theme. They instruct to change a line of code to read:

$pageLink = ‘#’;

The ‘#’ is familiar to me since that is how I would make a link unclickable if I was doing the menu in html.

I couldn’t find a place to put this code within the Sooperfish template so I tried putting it in the core autonav. Nothing happened.

I am very happy with how the Sooperfish menu looks right now and I would like to make it work for my needs. Am I heading in the right direction or should I start over with another menu template? Any recommendations?



First of all, do you want an unclickable link or a link that points to the sub page two levels below?
If you want to use ‘replace_link_with_first_in_nav’, you can place the code shown here into header.php of your theme:


This code works a bit different, it doesn’t change the autonav template (which would work too), it redirects you to the correct sub-page, no matter from where you opened the page.

/my-hidden-page (replace_link_with_first_in_nav)
/my-hidden-page/my-hidden-sub-page (replace_link_with_first_in_nav)
/my-hidden-page/my-hidden-sub-page/my-sub-sub-page (this is where we want to be)

If you modify the autonav template, the first two pages will never appear there. However, if you enter one of those URLs directly, you’ll still see that page. The benefit of the solution above is that no matter how you open the page, it will forward you to the correct page..

Hi Remo,

Thank you for your help!

The navigation is now functional. I did want the parent link to be unclickable, but this will be fine for now. Perhaps in the future I can use another menu that has that capability.

Do you have any recommendations?



In this tutorial I tried to remove as much redundancy as possible. You’d have to copy the whole template and use an attribute to mark a page as non-clickable. The view.php would have to be completely different.. It isn’t a big thing to do but it requires a bit of coding. If you’re familiar with PHP I can easily guide you trough it..

Hello, Remo.
I’ve developing new website and trying to incorporate Sooperfish- Glass theme menus.

They work great but they do not indicate the page I’m currently on…(is that “visited”?) How can I have the css indicate the current page so a visitor can see where they are?

I’ve seen a site: http://www.modernalbumdesigns.com that uses Sooperfish Glass theme menus…but the currently selected page is not highlighted in the menu. How can I make it do that?



Hey John!
The approach I’ve taken doesn’t create a full view.php and thus doesn’t allow you to change all the necessary CSS classes.
However, if you’re willing to add some custom CSS, you could easily add something like this: .nav-selected { font-weight: bold; } to your CSS file. “visited” is only for pages that have been visited, not to those being viewed at at the very specific moment.

I used you earlier drop down code for Concrete5 on Code Blog. It looks great when I’m logged in to the admin part of the site, but the minute I log out, it goes back to the original navigation.

When I was troubleshooting, I found this page.

Before I go and change everything using this method, is there something silly that I’m missing making the navigation from the other method not work to the public?

Thank you in advance for your help!

Good to know it works for you. However, I’d recommend that you look into a more complete front-end framework like bootstrap or foundation. They offer a responsive navbar as well as a lot of other functionality like a powerful grid system. I wanted to write a blog post about it for a while but haven’t found the time to do so yet..


I am not a programmer, but I want to make my website look nice. I fiddled with an e107 and it wasn’t that easy, but I got 5 sorta pages up on my website wanderz.net with it. So since I couldn’t figure out how to do images, I looked at concrete5. I loaded it in its own directory on my website. I will move it to the main website after I get everything programmed. They didn’t have a drop down menu like I wanted so… I found your instructions. 🙂 Thank you.

Anyway, I downloaded the zip, made the directories and files, but the downloaded zip that I got did not include “sooperfish-theme-black.css” Is there anyway you could send me a copy of that please? Thanks. 🙂


Those files belong to the script I was using. I didn’t create the sooperfish script, I only added a wrapper around it. You can find all those files here https://github.com/jjroelofs/jQuery-SooperFish/ and more specific https://github.com/jjroelofs/jQuery-SooperFish/blob/master/themes/sooperfish-theme-black.css.
But keep in mind, this tutorial is aimed at programmers, it’s about teaching how to customize the concrete5 autonav, not so much about end-users who want to style their navigation. The easiest solution is probably an add-on like this http://www.concrete5.org/marketplace/addons/superfish/

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *