Setting up the Navigation Menu

Multi Level Navigation

Get the plugin (Multi Level Navigation) and activate it by following the directions with the plugin.

This plugin is particularly powerful in providing a navigation system that works in all browsers, looks good and is fully customisable.  By following the next few steps we will integrate it into the look and feel that compliments the Breathe Theme.

Lets get started.

Once it is activated your navigation will look like this as the default. Blue which does not fit this theme so here is how to modify it.

Multi-Nav-Original-Format

Go to Settings > Multi Level Navigation

Click on the appearance tab at the top of the page.

Multi-Nav-Appearance

Highlight the CSS

Delete all.

Copy and Paste the below CSS back into the box.

#suckerfishnav {font-weight:bold; width:100%; margin:0 0 0px 0;}
#suckerfishnav, #suckerfishnav ul {float:left;list-style:none;line-height:40px;padding:0 ;margin:0; width:100%;}
#suckerfishnav a {display:block;color:#ffffff;text-decoration:none;text-transform: uppercase;padding:0px 0px 0px 15px;}
#suckerfishnav li {float:left;padding:0 0 0 0px;}
#suckerfishnav ul {position:absolute;left:-999em;height:auto; width:151px;font-weight:normal;margin:0;line-height:1; border:0;border-top:1px solid #666666;}
#suckerfishnav li li {width:149px;border-bottom:1px solid #666666;border-left:1px solid #666666;border-right:1px solid #666666;font-weight:bold;font-family:verdana,sans-serif;}
#suckerfishnav li li a {padding:4px 10px; width:130px;font-size:12px;color:#dddddd;}
#suckerfishnav li ul ul {margin:-21px 0 0 150px;}
#suckerfishnav li li:hover {background:#dddddd;}
 #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover {color:#ff0000;}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {text-decoration:none;color:#ff0000;}
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#dddddd;}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul  {left:-999em;}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul  {left:auto;background:#444444;}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {text-decoration:none;}

Settings

Setting tab – First box Speed of fade in effect (drop down box) change to instant update options

Menu Contents

Multi-Nav-Menu

Menu Item #1 Home

Menu Item # 2 Categories (single dropdown)

Menu Item # 3 Archives Month (single dropdown)

Menu Item #4 Links with categories – single dropdown

Of course you can configure this anyway you like.

Related Posts

29 Responses to “Setting up the Navigation Menu”

  1. Jun 30th, 2009 :

    [...] to make it work like this theme does. I have also changed the default CSS for this plugin. See the post that outlines what you need to do to intergrate this into your [...]

  2. Jul 15th, 2009 :

    After installing “Breath”

    I receive the following error message after doing an edit and update page or post:

    Warning: Cannot modify header information – headers already sent by (output started at /home1/nutrisan/public_html/wifi/wp-content/themes/breathe/functions.php:3) in /home1/nutrisan/public_html/wifi/wp-includes/pluggable.php on line 865

    This problem is not encountered when going back to other themes WP 2.8 compatible…

    When breath is deactivated everything comes back to normal.

    I like your theme very much and would appreciate using it.

    Thanks

  3. Jul 15th, 2009 :

    Try this to fix the problem.
    Go to the admin panel APPEARANCE>EDITOR>THEME FUNCTIONS (functions.php) delete the first line only which is…
    < ?php load_theme_textdomain('blank'); ?>
    Hit the UPDATE FILE button at the bottom of the page. Test to see if this fixes the problem.

  4. Jul 17th, 2009 :

    I am getting the following message while accessing the site or while logging in to admin. I cannot change anything since I cannot log in. What do i do?

    Warning: Cannot modify header information – headers already sent by (output started at /home1/nutrisan/public_html/wifi/wp-content/themes/breathe/functions.php:3) in /home1/nutrisan/public_html/wifi/wp-includes/pluggable.php on line 865

  5. Jul 17th, 2009 :

    Download this text file functions.txt
    Get into the Dashboard of WordPress through logging.
    Go to Appearance then click on Themes and then Activate the Breathe Theme.
    Click on Editor under Appearance.
    Click on the Theme Functions (functions.php) on the right.
    Select all the code and press delete.
    Copy all the code from the text file (edit>select all> copy) and then paste it into the top of the functions.php box (ctrl v)
    Click on the Update File at the bottom of the page.
    Try to update a post or anything that bought on the problem. Hopefully this will fix it.
    Please let me know either way.
    Thanks
    Paul

  6. Jul 19th, 2009 :

    Hey Paul.

    GREAT theme, I think it’s awesome.

    But when I take the first step and activate my plug in, the menu bar doesn’t look like the default blue one in your picture.

    My font is much smaller and the tabs take up two lines instead of just one, which makes it look squished together and messy.

    What should I do?

    Thanks Paul,

    Chris

  7. Jul 19th, 2009 :

    Also, how do you make the top menu (that came w/ original template) and the second menue (navigation) have DIFFERENT tab names…?

  8. Jul 19th, 2009 :

    Hi Chirs,
    I have had a look at your site and see what you mean. It appears that the mulit-level navigation is not reading the CSS. Go to SETTINGS> Multi-Level Navigation then click on the APPEARANCE tab at the top. Delete whatever is in the CSS menu box, if there is anything. Cut and paste the CSS from Multi-Level Navigation Setup post (all the stuff in the small text). Click on UPDATE OPTIONS under this box. I think this should then work for you.
    With your Heading I would suggest you change the two around and make Chris Chi’s blog the top level heading. This will then drop the search box back to where it is meant to be on the top bar.
    The top menu are pages. A page is different to a post. Every page you make will be displayed in the top bar. e.g a Default page with wordpress is the About page. Write another page like Contact Us and it will be automatically added to the top bar.
    All your posts will be added to a category that you select when you publish a post. If you don’t create or select a category it will be given the default Uncategorised category. The more categories you have the more drop down boxes you will have under the categories menu.
    Hope this helps.
    Paul

  9. Jul 21st, 2009 :

    Hey Paul,

    Thanks for your help. One last question!

    How do I make the font on the multi level navigation tabs Larger?

    -Chris

  10. Jul 21st, 2009 :

    Also, how do I change the font size on the title bar on a regular post? Thanks for your help.

  11. Aug 16th, 2009 :

    Hi!
    I’ve been trying to edit the settings for “Multi-level Navigation Plugin for WordPress” per your instructions above.

    I’m not getting very far as the SETTINGS option is not even available on my Plugins page?

    what should I do?

    J

  12. Aug 18th, 2009 :

    I think you need to look at the settings on the side bar in the admin area of your wordpress. Go to the side bar which should have Dashboard, Posts, Media, Links, Pages, Comments, Appearance, Plugins, Users, Tools, Settings. This is the settings that I am talking about, then go to Multi-Level Navigation and follow the instructions. There is also a settings tab in this plugin. Hope this helps. If not let me know.

  13. Nov 2nd, 2009 :

    Hi Paul,
    Huge fan of your WP theme, great job! I do have a question though: I’d like to use the Multi Level Navigation exclusively to handle pages as opposed to the top bar page navigation included with the theme. How can I remove the page navigation at the top?

    Best Regards,

    FJ

  14. Nov 24th, 2009 :

    Like ‘FJ’ posted before me, I also would like to use the Multi-Navigation Tool for Pages and sub-pages (via drop-down slider). Is this possible?

  15. Nov 24th, 2009 :

    Anything is possible but unfortunately the Multi Navigation tool is not my plugin and I only used it to enhance the theme. But to point you in the right direction you can however select pages to be included in the drop down, but this is only possible for the second navigation bar. You can disable the top bar picking up pages by finding and deleting this line < ?php wp_list_pages('title_li='); ?> only. Have a play with it you won’t break it.

  16. Nov 24th, 2009 :

    IN the header.php find < ?php wp_list_pages('title_li='); ?> and delete it. This will stop the pages being called to the top navigation bar.

  17. Nov 30th, 2009 :

    Is it possible to move the search box to the lower bar (aligned ‘right’ like the way it is in the top bar)?

  18. Feb 12th, 2010 :

    Hi, nice work …

    If you have firewall hosting recommend to delete these files from the Multi-level Navigation Plugin:

    wp-content/plugins/multi-level-navigation-plugin/scripts/hoverIntent.js.php

    and

    wp-content/plugins/multi-level-navigation-plugin/scripts/superfish_settings.js.php

    If you not delete the IP adress will be listed in the firewall and you can not Aces the site and the hosting. (Cpanel, other web on the hosting …)

    Thx,

    Vicentiu from Romania

    http://www.naevicentiu.ro

  19. ski

    Feb 12th, 2010 :

    Is there any way to have the drop menu feature work on the top bar?

    or a least remove the search box from the header?

    thanks

  20. Feb 12th, 2010 :

    I am looking into updating the theme with a drop down on the top line for the pages. At this time there is no ability for there to be child pages.

  21. Feb 13th, 2010 :

    Hi

    You can remove the search engine by removing the following text.

    Locate wp-content\themes\breathe\header.php

    Locate text: < ?php include (TEMPLATEPATH . "/searchform.php"); ?>

    Delete the text.

    Thx,

    Vicentiu from Romania

    http://www.naevicentiu.ro

  22. Mar 18th, 2010 :

    Hi Paul,
    Firstly, let me tell you I absolutely love this theme and I have seen a lot of them. Also, anyone I have shown my theme to loves it instantly. So… great job and thank you for all your work to create it.
    My one question has to do with this subject… I want to place different things on that bottom area but still not clear how to do it. I would like them to be pages like I have at the top but with different subjects like Resources, Partner With Me, etc. Can you help with that?
    Thanks so much!

  23. Apr 7th, 2010 :

    Thanks for the compliment and the positive feedback it is really appreciated. I have checked out your site and it appears that all your pages are displayed on the top navigation bar. You will benefit from the drop down menus that I have just developed but not released yet so stay tuned. You need to follow the instructions above to activate the plugin Multi Level Navigation. When this plugin is installed it is pretty easy to get your menu on the bottom bar set up. Just use the drop down boxes and it will appear after you save it. If you have setup questions for the plugin there is a forum for the plugin which can be found on the home tab. I hope this helps.

  24. Aug 9th, 2010 :

    Hi Paul,

    What is the best way to be able to have drop downs on both the top and bottom bars?

    I don’t want any more Pages listed on the top bar but want to add a couple more and have them on the bottom.

    Thanks in advance!

    Jimmy

  25. Sep 9th, 2010 :

    Hey Paul,

    Love the theme. But, two snags. Can you get the drop-down menu to ‘drop-up’ (ie go up the way)? And, I’m using the menu for navigating pages, How do I have this without having the pages on the top toolbar as well?

    Thanks for your help,
    Nicol

  26. Sep 14th, 2010 :

    Nicol,
    In the latest version of Breathe you can disable the pages on the top by in the Breathe options. No I can’t make the menus drop up :(

  27. Sep 14th, 2010 :

    Check out this post Setting up the Navigation menu

  28. Sarah

    Oct 27th, 2010 :

    for those who are interested, you CAN make the multi-level work as navigation to only the pages in a CMS site (with Paul’s theme).

    you have to do the following in the Multi-level plugin:

    First off, you’ll end up using ordered lists in the Custom fields in the Menu Contents tab. Custom code #1 for the one navigation line; custom code #2 for the other. (if you’re setting this up for someone who is going to be adding and removing pages and isn’t familiar with coding, you’ll end up having to change the ordered lists for them in the plugin when they change the pages)

    1) under Settings -> Add Second Menu
    2) under Appearance -> Add second menu css (info on the settings tab on how to change suckerfishnav to suckerfishnav_2 for this)
    3) in your header.php file -> remove the line that imports the current nav
    4) in header.php -> add as instructed in the PP Settings tab, and place it between the div tags for the nav.

    I got it to work, but had to go through it twice, step by step. it works in all browsers. I don’t have a vast amount of coding education, but could figure it out with trial and error. see a lot of ppl wanting this fix.. hope this helps!

  29. AnthonyW

    May 5th, 2011 :

    Paul,

    Thank you so much for this! Great theme!!!

Leave a Reply

Name (Required)

Email (Required - will not be published)

Website

Message (Required)