Setting up the Navigation Menu
Paul Cracknell | Jun 29, 2009 | Comments 23
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.
Go to Settings > Multi Level Navigation
Click on the appearance tab at the top of the page.
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 a {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
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.
Filed Under: Setup Breathe
[...] 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 [...]
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
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.
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
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
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
Also, how do you make the top menu (that came w/ original template) and the second menue (navigation) have DIFFERENT tab names…?
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
Hey Paul,
Thanks for your help. One last question!
How do I make the font on the multi level navigation tabs Larger?
-Chris
Also, how do I change the font size on the title bar on a regular post? Thanks for your help.
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
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.
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
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?
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.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.Is it possible to move the search box to the lower bar (aligned ‘right’ like the way it is in the top bar)?
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
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
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.
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
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!
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.