Cage Data, Inc.

Adding CSS IDs to your Navigation Elements in Mura CMS

• Home
•  »  Blog
•  » Adding CSS IDs to your Navigation Elements in Mura CMS

Sometimes just having text for your sub navigation just isn't enough.  I recently had a client who wanted their sub-navigation to use logos for the two product families as the links and then have the products within the two product families to be displayed below that as plain text links. Normally in website design this would be pretty simple; just use CSS to give the text an indent of something like -9999px or something like that, and use a background image setting the width, height, and block display of the anchor element.  The problem however is that this was within Mura CMS, which out of the box does not give individual IDs to elements in the navigation.

So I realized that I needed to tweak Mura a little bit to get this to work.

Before we go any further I want to make one thing clear so that no body who reads this will make the mistake I have made before:

Do not EVER make any changes to the requirements directory or any files and subfolders within.  You will not be able to update your Mura install using the automatic updater if those files have been edited.

So now with that out of the way lets get into the code.

After some digging through the contentRenderer.cfc (where much of your tweaking will really ever be done), I found that most of the navigation is essentially just built off of the nested nav (method: dspNestedNav) so I only had to change that method for my solution to come to fruition.  When I say edit that method I do not mean directly in requirements/mura/content/contentRenderer.cfc.  When you add a new site to Mura it creates a few different files that you can write your own methods in that will be update safe.  One of them is contentRenderer.cfc, so if you navigate to {site-id}/includes you should see a contentRenderer.cfc containing mostly commented out code.  If you notice in the cfcomponent tag though it extends the contentRenderer that we shouldn't be editing.

So now we need to copy our dspNestedNav function out of requirements/mura/content/contentRenderer.cfc and into our blank one.  After that there is really only one line that need to be changed.  If you scroll all the way to the bottom of the method you should see a line containing a list element.  This is the list element we need to add our ID to.  So right after <li add in id="#createCSSID(rsSection.menutitle)#".  That's it.  You can use any of your favorite inspection tools (Firebug, Webkit Developer Tools, etc.) to find out what your CSS selector would be. For me it was .sidebar#left #navStandard li#sysMotorsilk a{}.

Below you will find the entire code snipper for the dspNestedNav function available for download as a GitHub Gist here.