CONFIGURING MENUS
Once you have installed the Multi Level Navigation plugin, you must retrieve a file from the theme folder called suckerfish.css. Open it up in a text editor, copy the contents, then head over to your WordPress admin area, go to “settings” then “Multi Level Navigation”, which will take you to the settings of the plugin. Click on the “appearance” tab (see below), and paste the contents of suckerfish.css inside the window below. All of this styling code controls the look of your drop down menu and can be tweaked to alter the colours and font. Remember to “update options” at the bottom of the page before leaving this window.
ADDING ANOTHER MENU HEADING OR DROPDOWN COLUMN
To add another menu heading without a drop down column, just create a new page in the WordPress dashboard. To add a menu heading with several dropdown page headings, go to the Jinger 2 theme folder and open dropdown.css. Copy all the code, then go to the “Menu Contents” tab in the Multi Level Navigation plugin settings (see above). Once inside menu contents, scroll down to the “custom code 1″ window and paste the contents of dropdown.css here. By editing the code you can dictate how many menu items appear in the column, and whether you have fly-outs. Insert the URL’s you want the menu items to point to where you see the default http://jingerstudios.com/blog/ and edit the main title of the menu item where you see EXAMPLE. To edit each submenu title, edit where you see Jinger Studio 1, 2, 3 etc.
Next, scoot up to the top of the page, and assign one of the menu items to Custom 1. This will ensure that the drop-down column appears in the menu bar. WordPress allows you to dictate exactly where in the menu bar you’d like your ‘custom’ drop-down to appear – for example, you can assign “custom 1″ to appear at the far left of your menu bar by placing it in the “menu Item #1″ box.
ASSIGNING PAGES TO THE CUSTOM DROPDOWN COLUMN
When creating a page (to appear in your custom drop-down column), you need to assign a ‘parent page’ for this page. You do this by altering ‘Attributes’ on the right hand side of your page editing screen in the WordPress admin area.
For example, when creating the “BLOG THEME” custom drop-down column for this site, I assigned each page I wanted to appear in this column the parent page of “RESOURCES” which is a page that appears in my main menu bar. By assigning a parent page, I ensured that all these pages I created for my custom drop-down menu did NOT appear in the main menu bar.
To make sure that each of these pages is “linked” to your drop-down column, you must copy the permalink from each page you create (you’ll see the permalink displayed just under the main title in your page editor screen in the WordPress admin) and paste the permalink into the code of your “custom 1″ drop-down menu (Place your page permalink where you see green highlight below).
ADJUSTING THE COLOR AND FONT OF MENUS
There are two ways you can play with the “look” of the drop down menus. Firstly you can go to Pixopoint and completely redesign the menu – this website will then provide you with new suckerfish code to paste in the appearance window of your Multi Level Navigation plugin settings. Whilst this can work great, it is also fraught with problems for some people, so I personally prefer to edit the existing code and tweak the colors and font from within the settings window. To change the color of the hover text from orange, swap out the #FF9900 value and insert your preferred color code. To change the font, insert another font family name where-ever you see “georgia, Times” To change the color of the Menu text from white, edit the color code in the line: #suckerfishnav a.
ADJUSTING THE COLOR OF THE “SEARCH” BAR
To change the color of the word “SEARCH” on the menu bar, go to the theme folder, open the file style.css in a text editor and find the following code:
Alter the FF9900 value to your preferred color code then save the file and make sure you replace the old style.css file on your web server with this new one.
