Update 28th Sept 2009: All of the info in this post (except the basics of using jQuery) will be obsolete with Thesis 1.6. Nav classes will be different and dropdowns will be built in.
There has been quite a lot of requests lately for tutorials regarding Thesis nav menus. So, here’s some info for y’all!
This information is significantly XHTML and CSS, so it’s useful for any website really.
Basic Nav Structure
The structure of the Thesis nav menu, depending on the pages and links you have selected to show up, is
<ul id="tabs">
<li class="current_page_item"><a href="http://example.com/">Home</a></li>
<li><a href="http://example.com/about/">About</a></li>
<li><a href="http://example.com/archives/">Archives</a></li>
</li>
So the elements you might want to customise with CSS include,
.custom ul#tabs {styles for whole nav menu here}
.custom ul#tabs li {styles for each item here}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {styles for current page or category here}
.custom ul#tabs li a {styles for each item link here}
.custom ul#tabs li a:hover {styles for each item hover link here}
.custom ul#tabs li.current_page_item a, .custom ul#tabs li.current-cat a {styles for current page or category links here}
.custom ul#tabs li.current_page_item a:hover, .custom ul#tabs li.current-cat a:hover {styles for current page or category link hover here}
Nav CSS Reset
I’ve been thinking for a while that given the huge amount of Thesis customisation I do, I could do with some custom CSS templates to save me time typing. Some of that could involve a nav reset, so I’ll write one for you and probably use it myself.
.custom ul#tabs {border-bottom:none; border-left:none;}
.custom ul#tabs li {margin-bottom:0; border:none; background:none;}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {padding-bottom:0; background:none;}
.custom ul#tabs li.rss {}
.custom ul#tabs li a {}
.custom ul#tabs li a:hover {text-decoration:none;}
.custom ul#tabs li.current_page_item a, .custom ul#tabs li.current-cat a {}The above removes any borders and fancy stuff… pretty much everything except the padding, main layout and fonts [ref]If you want that stuff in there let me know. Personally, I don’t reset those things very often.[/ref].
Dropdown Menus
Update 15 April 2009: The behaviour of Thesis nav menus regarding sub-pages may have changed as of 1.5br4. So, this whole dropdown menu approach may be deprecated as of that version. I will update this post when I know for sure.
Update 16 April 2009: The nav menu is handled differently now and there is no page hierarchy, but Chris plans to add it back in. If you are dependent on a submenu now, don’t upgrade to 1.5 before you recode your menu (dropdowns and submenus will need to be coded from scratch again).
Update 21 April 2009: Chris has said that the functionality needed for dropdowns is back in 1.5r6 so the information below should be good to go again (I haven’t tried 1.5r6 yet myself though).
Update: Just confirming that the final release of v1.5 has an option to use the old nav menu: you can’t rename tabs and reorder them, but you can do dropdowns. There will probably be future work to combine these features.
I know, this is what you’re all here for right? There’s a reason they’re not already an option in Thesis and why more sites don’t have them… actually there’s two.
- They are a total pain for cross-browser compatibility [ref]Yes, Internet Explorer, we are definitely looking at you.[/ref].
- Some people question the usability: for those who are less dexterous than the rest of us, it can be difficult to hold your mouse in the one spot and then move it smoothly to make sure the dropdown stays open (if it’s on a hover action rather than a click action).
Regarding the latter: as computers and mouses [ref]No I don’t want to call them mice; they’re not animals.[/ref] improve it might be less of an issue; you might think your demographic won’t have a problem with it; you might think the argument is from purists who are inhibiting your creativity and your site architecture.
Regarding the former: I do not promise that these methods will work in every situation. In fact, the first definitely won’t, and I’ve had some fun issues with overlapping when using z-indexes [ref]Maybe that should be “indices”, feel free to let me know.[/ref] with the second method. However, I like these ways because they are simple and clean, and lets face it, dropdown menus are a luxury — you probably don’t put your most important info in there.
Setting Up Pages
The friendly way to use Thesis’ native menu to make dropdowns is to use pages and child pages. Set these up in the Edit Page area.
Add page parent individually when editing a page.
You can also batch edit WordPress pages. To do that, select the pages you want to edit with the check-boxes next to them, then go to the top dropdown, select Edit, hit Apply and edit away. Save the changes with the button in the bottom right.
Once you have parent and child pages, add them to the Thesis menu on the Thesis Options page.
Structure and Style
Doing the above give us a nice nested list structure. For example,
<ul id="tabs">
<li class="current_page_item"><a href="http://snoopy.local/mu" title="Home" rel="nofollow">Home</a></li>
<li class="page_item page-item-2"><a href="http://snoopy.local/mu/about/" title="About">About</a></li>
<li class="page_item page-item-62"><a href="http://snoopy.local/mu/archives/" title="Archives">Archives</a></li>
<li class="page_item page-item-74"><a href="http://snoopy.local/mu/portfolio/" title="Portfolio">Portfolio</a>
<ul>
<li class="page_item page-item-70"><a href="http://snoopy.local/mu/portfolio/photos/" title="Photos">Photos</a></li>
<li class="page_item page-item-76"><a href="http://snoopy.local/mu/portfolio/resume/" title="Resumé">Resumé</a></li>
</ul>
</li>
</ul>It also gives us a dirty looking nav.
So we need some CSS.
.custom ul#tabs li ul {display:none; position:absolute; list-style:none;}
.custom ul#tabs li ul li {float:none;}display:none; hides the nested lists from view, while position:absolute; fixes the position of the nested lists so that they don’t push the whole page layout around when we reveal them. list-style:none; and float:none; remove the bullet points and floats that made the sub-menu look so awful.
Dropping Down
To make this menu dropdown via CSS you can simply use the following.
.custom ul#tabs li:hover ul {display:block;}Naturally, anything that simple and elegant doesn’t work in IE6 [ref]”code not functional or elegant, what do Code Monkey think?”[/ref]. The reason being that IE6 only supports the :hover pseudo element on anchors (i.e., the things that start with <a). IE7 is supposed to support :hover, but there have been problems. I haven’t tested this in IE7 because I don’t have it installed at the moment.
If you don’t care about IE, eat your heart out. If you do care about IE you can use some javascript to allow hovering over list items.
When I first used this javascript it worked fine, and still works fine on that site, but some other sites have problems. IE doesn’t seem to register that the li wraps around the whole dropdown ul so when you move off the initial nav item the dropdown disappears again and you can’t select the sub-nav items. See this comment below for a fix.
And if you’re still having problems try adding .custom ul#tabs {margin-bottom:-0.1em;} (suggestion in comment).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul#tabs > li").hover(
function(){
$('ul', this).show();
},
function(){
$('ul', this).hide();
}
);
});
</script>What that code does is grabs jQuery from the Google AJAX libraries (I like getting it from them because your users may already have it cached if they’ve been on a site using it and it’s not on your server, so it can load asynchronously). Then, there’s a function that essentially says,
When the page is loaded, hovering over
ul#tabs licauses theulin this element to be shown, then hidden when you move away from theliagain.
To use it, you should insert it into the head of your site. In Thesis you can do this by putting it in custom_functions.php and wrapping it with function jquery_nav() { ?> at the start and <?php } add_action('wp_head','jquery_nav'); at the end.
This does work in IE6, although I will admit to having some problems hovering over the elements in the nested lists when I had some nearby elements with z-indexes. Otherwise it has been fine.
Almost The End
The other thing is that you might want to make a dropdown that is not just pages and child-pages. There are a few ways to go about it; some more complicated than others. I think the simplest of these ways is to rewrite the nav menu in HTML to suit you.
So, take the example nested code and write out your nav menu with nested lists. You can also add the dynamic current-page classes with PHP as shown in my Snipplr snippet, Nav menu for Thesis. The snippet also shows the code needed to replace the default nav.
The End
Let me know if you have problems with this. I can’t promise I’ll be able to fix them, but it’d be useful for everyone to know the caveats anyway.
can you start writing Hybrid tutorials too ? 🙂
Wow!
What an informative post. Now it’s time for me to get to work and apply what you’ve written about to my nav menus.
Thanks for your excellent tutorial!
Greg
Kristarella, this is terrific. Thanks for taking the time and trouble to put this out there.
Hi Kristarella- This is a great post– I especially love the nav reset css.
But I have an additional question. I want to set up a subpages navigation structure that shows the subpages on the next line (like here-http://www.darrenhoyt.com/2008/02/12/creating-two-tiered-conditional-navigation-in-wordpress/- this same code is in the wordpress codex also, so should be pretty standard), and not necessarily with a hover function– I would be happy if they just showed up when you got to the parent page. All of the code I’ve tried just doesn’t seem to work on thesis for some reason (I tried integrating it into a custom_thesis_nav_menu function). I’ve got my question as a thread in the forums but haven’t gotten any response, but I do have the code I’m using and some links there. Any thoughts?
Here’s the forum thread: http://diythemes.com/forums/tr.....stion.html
Thanks! and I love your work!
This is one of the best tutorials I’ve seen in a long time! Well done @kristarella!
Kristarella, I LOVE that you put this one together. When I first customized Thesis, it took me ages to figure out all the details of the CSS through trial and error. I never could get dropdowns to look right, so gave it up – but I might give this method a whirl now : )
I still think you deserve a halo 🙂
Thanks for this! I’ll be doing away with my current nav bar this morning 🙂
That is a great tutorial Kristarella, Thanks
I am embarrassed, but I didn’t even know about bulk editing function 🙂
Will play with that soon
Thank you thank you , I have been wanting a drop down menu and you are amazing for putting this together.
Can’t wait to play with this. The thesis community is the best!
This is one of the primary reasons you were among the first DoubleMule certified Thesis Designers!
The other reason was you publicly stated that mules are superior to horses! Great going!
(Very well, she has not yet publicly stated the mule-vs-horse part, but we are positive she has strong convictions on this matter and a public announcement is likely in the works).
Dinu — Hybrid is actually rather similar to Thesis in terms of using hooks, and you could write your own menu and hook it in almost the exact same way as I showed in the latter part of the post. I probably won’t be writing any Hybrid tutorials because I’m still annoyed that I almost paid for a one year membership just to see the documentation on Filters, but when I got someone with a membership to check what was on the page it said “this page is a placeholder”.
portcitysally — You can show a secondary nav according to which page you’re on by doing all the steps up to where I say we have a “dirty looking nav”. Then use this CSS,
.custom ul#tabs {margin-bottom:1em;} .custom ul#tabs li ul {display:none; position:absolute; list-style:none;} .custom ul#tabs li.current_page_item ul, .custom ul#tabs li.current-cat ul {display:block;} .custom ul#tabs li ul li {background:none; border:none;} .custom ul#tabs li ul li a:hover {text-decoration:underline;}Which looks like,
You could further style it to have a bar across the secondary nav or something. Natively the secondary nav starts in line with the current tab, but if you want it to go from the left of the page add to the existing CSS,
.custom ul#tabs {position:relative;} .custom ul#tabs li ul {left:0;}Peter — don’t be embarrassed, I only started using it recently and might not have known it was there if I hadn’t seen Jane Wells demonstrate WP2.7.
Thanks everyone for your comments. FYI, if you’ve already copied the CSS reset, there was an error in the two current-page-item lines where I made
tabsa class instead of an ID. It’s fixed now.Thank you so much! I have really been looking everywhere– and then finally moved on to a vertical navigation. I am very appreciative of your, and the rest of the thesis community’s, generosity and expertise.
Sally
Worked like a charm on the first try! You are a treasure to those of us in the Thesis community!
You can see these tips in action here: Clint Ritchie.com.
THANKS SO MUCH!
Kristarella,
Thanks for the information and code re the secondary nav bars.
I wasn’t sure whether this could be done in Thesis so it’s brilliant to know that it is possible – and it’s even more pleasing to know how to do it.
Thanks again,
Francis
Kristarella, I love your tutorials. Thanks so much for putting this together.
It was brought to my attention that using the above code for non-dropping sub-nav works when on the parent page, but not the sub-pages.
The only solution I could think of was using the following CSS and javascript instead.
CSS:
.custom ul#tabs {margin-bottom:1em;} .custom ul#tabs li ul {display:none; position:absolute; list-style:none;} .custom ul#tabs li ul li {background:none; border:none;} .custom ul#tabs li ul li a:hover {text-decoration:underline;} .custom ul#tabs li ul li.current_page_item a:hover {text-decoration:none;}Javascript (wrapped in function code for Thesis):
function subnav() { ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul#tabs li.current_page_item ul").show(); $("ul#tabs li ul:has(li.current_page_item)").show(); $("ul#tabs li:has(li.current_page_item)").addClass("current_page_item"); }); </script> <?php } add_action('wp_head','subnav');Awesome work as always, Kristarella!
We’ve implemented the code already on a site going live Thursday. I’ll drop by once we flick the switch!
Hey Kristerella 🙂
Thanks for the handy post, I’ve just used it! You might be interested (and others out there) of how I adapted it. I wanted to make sure I would have little chance of conflict with other plugins, so used jQuery.noConflict(); AND (this may be wrong) but I wanted it to apply to all pages, whether they were running the ‘.custom’ class or not (custom template). So my adaptation is as follows, and thanks again Kristen.
function jquery_nav() { ?> <style type="text/css"> ul#tabs li ul {display:none; position:absolute; list-style:none;} .custom ul#tabs li ul li {float:none;} ul#tabs li:hover ul {display:block;} </style> <script type="text/javascript"> jQuery.noConflict(); jQuery(function(){ jQuery("ul#tabs > li").hover( function(){ jQuery('ul', this).show(); }, function(){ jQuery('ul', this).hide(); } ); }); </script> <?php } add_action('wp_head','jquery_nav');Thanks Rob! That’ll be great if anyone has a conflict, or useful if you just want to avoid them all together. 🙂
yeah no worries, just need to wrap some ‘style’ and ‘script’ tags where appropriate
Sorry if this is out of place, I’m not sure where to put it.
My blog has article summaries on the home page, with each heading leading to the full article on a separate page. Much like most blogs I guess.
My question is this…
Is it possible to use some code in the CUSTOM.PHP file so as to automatically add a small banner image under only the first headline on a page.
In other words, on the home page the banner will appear only under the headline of the latest post, but not under other headlines further down.
On the individual pages there will only be one headline and the banner will appear below that in each case.
I’m very weak on PHB so I’ll probably need more than a hint 😉
Lamb — It’s probably a good question for the forums, but since you’re here I’ll answer. 😉 I learned something here too, so it was a good question. The code you need to put in custom_functions.php is,
function banner($post_count = true) { if ($post_count == 1) echo '<img src="' . THESIS_CUSTOM_FOLDER . '/images/banner.jpg" alt="" />'; } add_action('thesis_hook_before_post','banner');Put the banner in thesis/custom/images.
Cool. Thanks very much Kristarella.
What forums are you referring to? I originally posted this question in the DIY forums but didn’t get an answer, then I remembered how responsive you usually are. I looked on your page for a forum link but couldn’t see one.
Anyway, pushing the boundaries a bit further, how would I format that code of yours to include a href so as to hotlink the image? For example the equivalent of:
<a href=”http://domain.com” rel=”nofollow”></a>
TIA
Lamb — Yes, I meant the DIYthemes forum. Next time if you want you can send me the link to the thread via my contact form. 🙂
The part inside single quotes after
echois just HTML, you can put any HTML in there. With a link the code would be,function banner($post_count = true) { if ($post_count == 1) echo '<a href="http://www.example.com" rel="nofollow"><img src="' . THESIS_CUSTOM_FOLDER . '/images/banner.jpg" alt="" /></a>'; } add_action('thesis_hook_before_post','banner');Great! Thanks for that.
Gotta go and do the week’s shopping now, but will try implementing it later on.
Thanks Kristarella. I found I had to add
.custom ul#tabs li ul li a:hover {text-decoration:underline;}so that the underlining hover worked for submenus when the parent page was selected, otherwise, great stuff!Woops, that <code> wrapper didn’t really work to show you the javascript I inserted into the ‘before header’ section … but I suppose you can figure it out. It’s what you suggested in your tutorial above.
Rees: As the Angelica for Inspiration link isn’t appearing in the source code, I suspect that you haven’t checked the checkbox on the Thesis Options page, for which pages to show in the Nav Menu. Don’t worry, as it’s a child page, it won’t force itself into the top level tabs – but you do need to “turn it on” for you then to be able to do something with it 🙂
IT WORKS! I didn’t know I needed to add the ‘hidden’ child menu to the Thesis Nav menu! Thought it would show up on the main menu. Thanks for clearing that up!
Wow, I have been wanting this functionality for a while .. played with the MultiLevelMenu plugin (aka Suckerfish by PixoPoint), but this looks very promising! Thanks for putting this tutorial together!
That said, I just can’t figure it out. My test site is: http://thosemaxwells.com
I have added pages to the Thesis Nav menu.
I put the following in my custom.css file:
.custom ul#tabs li ul {display:none; position:absolute; list-style:none;} .custom ul#tabs li ul li {float:none;} .custom ul#tabs li:hover ul {display:block;} .custom ul#tabs li ul li a:hover {text-decoration:underline;}And I put the following code into the ‘Before Header’ section of Thesis OpenHook Plugin:
$(function(){ $("ul#tabs > li").hover( function(){ $('ul', this).show(); }, function(){ $('ul', this).hide(); } ); });But I am obviously not ‘getting it’ because this doesn’t add a dropdown menu. I have added one page ‘Angelica for Inspiration’ as a child of ‘Memoir Garden’, so I expect that hovering over Memoir Garden should show Angelica for Inspiration link.
Please show me the error of my ways! I am really excited to finally get a good drop down nav menu solution.
Thanks, Kristarella!
(A future question will be how you got the ‘Site RSS’ etc. floating on the right side of the window … that’s cool and elegant! I’ll have to read your page source or ‘firebug’ it to figure it out .. unless you’ve already written about it and can point me to a link.)
Thanks for clearing that up Gary!
Rees, I haven’t written about the boxes on the right, but I guess I should, as it’s one of the most asked about things.
Could you clarify where to place the java script code? The java script isplaced in the custom_functions.php file – But what do you mean by ‘wrapping’ it with the other code?
This bit I don’t get:
In Thesis you can do this by putting it in custom_functions.php and wrapping it with function jquery_nav() { ?> at the start and <?php } add_action(‘wp_head’,’jquery_nav’); at the end.
Barry — I avoided the block out again in the tutorial to save space and reader attention, but the result in custom_functions.php would be:
function jquery_nav() { ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul#tabs > li").hover( function(){ $('ul', this).show(); }, function(){ $('ul', this).hide(); } ); }); </script> <?php } add_action(’wp_head’,'jquery_nav’);Thanks Kristarella! that was fast.
Barry
For some reason, this bit of code, pasted into the custom_function file, produces an error message. The css code for the drop down menu worked like a charm – with Firefox, but not with IE. So, I added the above javascript to custom_functions.php, but it doesn’t work. Could there be something mising or out of place in the code.
Thanks for your help.
Barry
Barry — It looks like WordPress replaced some of the single quote marks, or prime marks in my code. Make sure that in the last line, all the ‘ marks are plain ones, not curly ones.
INdeed! That was it. Good eye.
In IE 7, the hover is very sensitive; sometimes it ‘grabs’ the submenu items; but you have to play with the mouse a bit to get it to work.
Anyway, thanks again, a very big help.
Barry
Usability expert Jakob Neilsen recommends adding a delay into rollover effects, of about a half-second if I recall correctly. I’m not a js person, so can’t give you the code, but you can probably google for a js timer to add into the code. That’s what I’ll do when I get around to using the above code.
Thanks again for the tutorial, @kristarella
The hoverIntent jQuery plugin would help with the delay.
Awesome tutorial Kristarella!
I was just wondering… how can you implement category navigation bar with drop down as seen on PMA – http://prettymuchamazing.com/.
Would really appreciate the help…
Thank you Kristarella
Thanks so much for this really helpful post!
Unfortunately, I am only able to see one child page (of two) in the drop down. Everything else I’m implemented has been ace.
Any advice?
Bruce — thanks for the tip. I’m not sure how I feel about the usability of dropdowns in general. I’d prefer them to be on a click function instead of hover to avoid problems with IE and with user dexterity. I wrote this because it was asked for so often.
Gary — thanks for that! I might not write about it, but I hope people see your comment and investigate it.
Alex — I wrote the menu on PMA all from scratch. It uses similar jQuery (slightly more complex to get other menus to go up when you click on a new one), but you can have a look at that in the source code. The structure of the nav itself is written in custom_functions.php, it doesn’t use the native Thesis nav.
Libba — Is the menu item selected in the Thesis Options? Is it a first level child or a grandchild? The CSS I’ve written isn’t equipped to do dropdowns in dropdowns and I don’t think I will write it because it will need to be hacked to bits to get it to work in IE6 & 7. You would need to write a menu like the one on CSSplay.
Thanks Kristella!
I’ve been trying to do this for so long! I’ve applied it to my test site, http://lab.photosbyrowell.com, but the drop down navigation (hover over Gallery) shows behind my flash. Do you know how to make it show above the flash?
Rowell — It shows above the flash when I look at it (Firefox, Mac), but perhaps if it doesn’t in a different browser you could try adding
z-index:100;to the styles of theli ul.Initially, it didn’t show on pc (firefox or IE). For documentation purposes, the flash on my homepage was embedded with kml flash plugin for wordpress. I had to set the z-index for the property holding the flash to a lower value than the z-index for the li ul styles for the navigation.
On top of that, “wmode=”transparent”” had to be applied to the kml tag.
Thus giving me the abilities to have a drop down menu. Just need to make it pretty. Any ideas Kristarella?
No dropdown menu needed here. What I do have is eight primary menu choices and I would like to use the same 94 pixel wide button image as background for each of them. I have created three button images for “normal”, “current page” and “hover” usage. Where in the CSS should I put them?
At the moment, I am using the Multi-Level Navigation plugin but I would like to use the native Thesis menu structure using your excellent tutorial above.
Hi Kristarella –
I echo the thanks from the others. Appreciate your patience.
Question – I chose not to use drop down menus as I have the same usability issues with them. I did follow your code to make a secondary nav, left justified. Worked great, thanks!
I am trying to make both the selected page and the subpage/subcat the same color. I’ve managed to get the subs a color when they appear, but not the top level items. What am I missing?
Side question – any site or book recommendations to learn CSS better?
The site of my sandbox is here:
smartbugmedia
CSS I have is here:
/* Resets navigation styles */
.custom ul#tabs {margin-bottom:1em; position:relative;}
.custom ul#tabs li ul {left:0; display:none; position:absolute; list-style:none;}
.custom ul#tabs li.current_page_item ul, .custom ul#tabs li.current-cat ul {display:block;}
.custom ul#tabs li ul li {background:none; border:none; background-color:#0C0}
.custom ul#tabs li ul li a:hover {text-decoration:underline;}
This isn’t working on any page except the homepage for me??
I have done the simple steps above. I took the css given as well as the javascript items but its not working properly.
I am only getting the drop down menu to work on the homepage of the site. But when I am on any other page the drop down doesn’t even exist.
And I am not referring to the ‘non-dropping sub nav’ item you mentioned above in your comment. This is the the basic drop down that you explained in your post above.
What could possibly cause the drop down to work on only the homepage?
And I didn’t use any wp conditional of if is_home on anything so its not that.
@Jake,
Did you put the script in the head section of the Thesis options?
Thank you, from a total Thesis beginner who has always wanted drop down categories!!! I’ve filed this with your other useful stuff, ready for when my skills improve. This last DIY newsletter was awesome; I’d have paid book price for it and would be grateful if you could thank the compiler.
@Rowell
Yes, its in the head section.
I will provide a link shortly so it can be seen.
Rowell — the only suggestion for styling I’d have at this point is giving
ul#tabs li ula background colour.Rick — you would use the following CSS, possibly in conjuction with the nav reset in the post.
.custom ul#tabs li a {width:94px; background:url(images/nav-bg.jpg) center center no-repeat;}
.custom ul#tabs li a:hover {background:url(images/nav-hover-bg.jpg) center center no-repeat;}
.custom ul#tabs li.current_page_item a, .custom ul#tabs li.current-cat a {background:url(images/nav-current-bg.jpg) center center no-repeat;}
Ryan — if you’re using the jQuery from my previous comment you need to give
.custom ul#tabs li.current_page_itemthe styles you’re after.Jake — I’m not sure. It could be breaking because of some other javascript on your other pages… That’s my only guess right now. If it looks like you have javascript on the non-home pages you could try Rob’s no conflict method.
hello Kristarella,
I appreciate your tutorial,I am new to Thesis. I have a problem under IE6, the drop down menu fades away before I could click anything. How to solve this issue? Thanks in advance.
Yes yvonh, it doesn’t work in IE. (There seems to be a little space between the main nav menu item and the dropdown menu items. If you jump your mouse quickly you’ll see you can land on the drop down menu items. I wonder if there is a way to get rid of that small (1px) gap.)
yvonh, reesmaxwell — I have varying experiences of this in IE. Sometimes it’s fine, sometimes you can’t seem to catch the the dropdowns with your mouse. I believe it’s because the first
liisn’t interpreted by IE as wrapping around the whole dropdownul. There’s nothing that can be done really except to use a different plugin or hack up your own custom menu with the code from CSS Play. Like I said in the post, there are usability questions with this, IE is one of them. If you really care about IE6 I wouldn’t use dropdowns at all.Hi,
that’s what I am currently doing. Unfortunately, my client doesn’t see things this way.( usability issue) and most of his audience uses IE6 (damn !). I am going to hack the menu a little bit. All things are not bad, once I’ll master this trick that’ll be all benefit for my own websites.
yvonh, reesmaxwell —
You can get rid of that little gap by adding the following css:
.custom ul#tabs { margin-bottom:-1px;}
Miron! So cool! I’m gonna try it now (gotta boot up Fusion/XP and take a look in IE 6). Hey… this might just solve the issue for IE! (A boy can dream!)
So I’m sticking with the horizontal menu for now .. just noticed that things seem to be broken with Thesis 1.5 beta rev5. See forum thread here.
Miron, yourmethod is not working with me :(((
But I managed to implement the method from Stu Nicholls and it works fine under IE6. If anyone is interested I can post it here.
Yvonh, it might be good to post it in the forums, because it’s looking like our native Thesis dropdown plans will have to go on hold. The new 1.5 nav features have removed the page hierarchy and may not be available in the next release (although plan to be re-implemented).
Hello Kristarella :o)
I’d like to know how to move the reset navbar from your example at the top of the page, to the top right side of the header.
Julie
Julie, the default nav bar is already above the header, so the easiest way to move it to the right is probably to give
ul#tabsa width (specify a width that is about the width that the tabs take up, otheriwse it doesn’t work in IE) and then float it to the right.Thanks so much; this worked really well for me first time – except for one small thing which I wondered if you had an idea on. The pages that are child pages of my home (static) page, are not showing up as drop down but rather coming up on main nav bar which makes my nav bar go to two lines. and anyway is not what I wanted. Is the static home page not a good one to add child pages too. The rest have come up as hoped. no hitch.
You’ve helped me so much with all your thesis forum input and this site; thanks again for all your support.
Kaz, when you set a page as a static homepage WordPress takes it out of the normal flow, to a certain extent. It may not consider it a parent page anymore, I don’t think there’s anything can be done about it.
Thought as much; can work around it with some different ordering!
Thanks again.
How can I use this method and still keep my menu ‘thesis_hook_after_header’? Everytime I can get it to work it moves all the way to the top.
Also should the custom_functions stuff be before the top most <?php or inside of it?
Jay, I am not sure to understand your pb but if you want to reverse the order of display, you should put the following lines in the custom_functions.php file :
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);
Jay — all custom_functions.php code must be after the initial
<?php. It’s easiest if you haven’t already made changes to just put it at the very end of the file after everything that’s there.The code yvonh gave should help.
I am sorry I was not clearer, yes the code Yvonh posted is what I have been using for moving my nav bar. I can not getthis script for the IE hack to work. Only way I can get it to work is by putting this in my cust-func
$(function(){
$("ul#tabs li.current_page_item ul").show();
$("ul#tabs li ul:has(li.current_page_item)").show();
$("ul#tabs li:has(li.current_page_item)").addClass("current_page_item");
});
add_action('wp_head','subnav');
/* Header Display Above Nav */
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header','thesis_nav_menu');
<?php }
function alert_bar() {
echo 'Find your new DREAM HOME: Take Advantage of the No Registration Required Home Search for the entire MLS';
}
add_action('thesis_hook_before_html', 'alert_bar');
But then the the nav bar goes back to the top, but does work. This is really kicking my a$$.
Jay — I can’t quite tell what is going on there… did you have a function called wp head and
<script>tags that got eaten by WordPress when you posted them? If not you need them for the first part to work.Also, it looks like the end of your code has some curly quote marks instead of regular single quote/prime marks. I don’t know if WordPress has done that just in your comment or whether they’re in your file, in which case you need to replace them with plain single quote marks.
Also the middle
<?php }shouldn’t be there, which leads me to believe you might have posted your stuff in the middle of another function…If you paste your complete custom_functions.php in a pastebin then maybe I can help you debug it. I’d also encourage you to go through the tutorial again and see if you missed any steps because you haven’t mentioned the CSS, which is still essential for the javascript method (which is not an IE hack, but just something that is more likely to work in IE, but is not guaranteed to).
Thanks Kristarella, I posted my whole cust_func @ http://pastebin.com/m17de939c Because I may have some opening and closing going on some place by just putting stuff I grab from the forums there. So maybe you can clean me up. 😉 I tried the single and dbl quotes to no avail, I still very confused by those because of some of the other function calls you may see there such as my analytics, and bloglog calls. Seems ” works sometimes, and so does ‘ but with no consistency.
This is the one that works on my local test sie with Official 1.5 and checking use old nav. It works, but I can not get it moved to below. My live site is not the official release yet.
If I do not put that
<?php }in there nothing below it works for some reason, that is a change I made from your original post.Your help is GREATLY appreciated on this.
Jay — I’ve made some edits on that pastebin, hopefully it will work, but note that you don’t actually have any dropdown code in there at all, so what I said before about going through the tute again still stands.
Have a look at this Tizag PHP tutorial on strings to get a better idea of what single and double quote marks do.
Correct me if I am wrong but the real drop down comes down to css, No? That script is just suppose to make the hover work in IE.
As I have it now, the nav drops down in IE and FF, but on IE (IE v8.0)I can not mouse over or click on and of the child pages. Works like a champ in FF.
I tried your edits, and it is the same results, nav bar goes to the top. and I lose my Alert Bar. Same reason I had to move that
<?php }to below the add action stuff. What I am really wondering is IE stopping the hover and click because it is going into the content area, because it drops it, and shows, but no mouse over. FF allows.So I think I will have to abandon this for now, taking a lot of time, and hate to clutter your thread with this. I was using multi-level_navigation plug before but it really slowed stuff down, too many scripts being called. I appreciate all the help though.
Jay — it depends on how you’re using the CSS and JS as to the situation in IE, but essentially the JS solution I gave will replace the CSS solution (except for needing
ul#tabs li ul {display:none;}). It’s an alternate to the one line CSS solution because it will work in IE (some of the time) as well as FF and Safari, even though they already obeyed the other CSS.I actually have no idea how IE8 reacts to this stuff, I don’t have it installed. In IE6 there was a problem with the CSS in that they only allow
:hoveron anchor elements (links), but they could do a javascript hover function fine. Sometimes there’s a secondary problem that the parentlididn’t seem to encompass the whole subordinateul, it made the hover very flaky and that’s why some people still use the other IE-hackish methods linked to in above comments.All I can say is that the
< php }is definitely in the wrong place because you exit PHP at the start of the subnav function and you don’t open PHP again until after the lines needed to move the nav, so they won’t be parsed as PHP. Also, the function doesn’t end before you use add_action on that function, so the javascript shouldn’t be inserted into theheadof the document either.I have had another go at debugging your custom_functions.php file (http://pastebin.com/m7d508bd6). I found a few syntax mismatches in the later javascript stuff that could have been causing things later in the file not to work as well.
Are you actually trying to achieve a sub-nav that is always open when pages belonging to it are open, rather than a hover dropdown? I think that’s what the javascript you have in your file will do. It won’t do hover dropdowns.
I am wondering how to implement a menu like this one http://www.cssplay.co.uk/menus/final_drop.html work in Thesis.
Susan — You would need to remove the usual nav menu by placing
remove_action('thesis_hook_before_header','thesis_nav_menu');in custom_functions.php.Then you would need to copy the source code from that navigation example, replace the menu items with your own and wrap it in a function that can be inserted into Thesis:
function custom_nav_menu() { ?> COPIED NAV CODE HEREThen you would copy the CSS from that example page into custom.css.
Note that the only real different between that menu and the one I've presented is some hackery to get it to work in IE. The technique I've used in this post works in IE some of the time. I think it might have to do with whether the navigation is in a containing div or not.
Thanks for that info. If I do this, will the navigation no longer update automatically when pages are added via WordPress?
Susan, that’s right. It will be a manually managed menu if you want to use that technique.
Hi Kristarella thank you for your awsome tutorials.
I am wondering how to link to categories and subcategories in the nav bar. I found this code in
Snipplr.
But i don’t know how to make of it dropdown menu, because i want to add subcategories.
Actually now i managed to get the categories working, but i need the subcategories to dropdown.
Your help is appreciated 🙂
Robert — we’ve discussed that exact thing on the forum before. See the code here.
Hi Kristarella could you please tell me how to fix it here i am afraid i don’t have access to the forums since i am just costumizing for a client who is not present at the moment.
Best regards,
Robert
Oh okay, I thought it would be useful to see the whole thread because there was some stuff about sub-sub-categories as well.
The initial code for custom_functions.php is
function cat_nav() { ?> <ul id="cat_tabs"> <?php wp_list_categories('title_li='); ?> </ul> <?php } add_action('thesis_hook_after_header','cat_nav');Then in custom.css the following makes it look like the native Thesis nav (also uses the CSS only method, no javascript, which doesn’t really work in IE, but the JS way only works sometimes too — needs experimenting),
ul#cat_tabs { list-style: none; border: 1px solid #ddd; border-width: 0 0 1px 1px; } ul#cat_tabs li { margin-bottom: -0.1em; background: #efefef; border: 1px solid #ddd; border-left: 0; float: left; } ul#cat_tabs li.current_page_item, ul#tabs li.current-cat { padding-bottom: 0.1em; background: #fff; border-bottom: 0; } ul#cat_tabs li a { display: block; line-height: 1em; color: #111; text-transform: uppercase; letter-spacing: 2px; padding:0.545em 0.818em; } ul#cat_tabs li a:hover { color: #111; text-decoration: underline; } ul#cat_tabs li ul {position:absolute; display:none; list-style:none;} ul#cat_tabs li:hover ul {display:block;} ul#cat_tabs li ul li {float:none;} ul#cat_tabs:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }Thank you very much Kristarella 🙂
Can’t we change the categories display order? They are ordred alphabetically.
Thank you 🙂
Robert — Yep, you can change lots of things about that function. Check out the full reference in the codex
Thank you i will try to sort them by ID, because i want them to be sorted by the time i added them.
Hey crew,
Regarding the IE problems I have come up with a solution that has worked nicely in testing so far. I didn’t want to add a whole new chunk to the code, but I’ve linked to this comment from the post for those who need it. Use the following javascript instead of that in the post. It wraps the inside of the
liincluding theulwith a span, which IE recognises as going around the whole thing and then the dropdown hover effect is on the span instead of the list item.<script type="text/javascript"> $(function(){ $("ul#tabs li:has(ul)").wrapInner("<span></span>"); $("ul#tabs li span").hover( function(){ $('ul', this).show(); }, function(){ $('ul', this).hide(); }); }); </script>Kristella,
Thanks for the great tutorial. It worked great on my new site: http://www.campfernwood.com. The only thing I can’t figure out is why the nav bar appears to have too great a height on Internet Explorer. Would you mind taking a look? 🙂 Here is a link to my .css (rather than paste some in the comments): http://www.campfernwood.com/wp.....custom.css
Thank you!
Suzi — try setting the height of #nav_area to 24px. It’s hard to say exactly why IE does these things, but hopefully that will help it.
Great stuff Kristarella. I saw your tweet about campfernwood.com and that was exactly what I wanted to do – found this post in the DIYThemes forum and worked it out on a site I am working on. Thanks again!
Thanks Kristarella! Setting the #nav_area to 24px seems to be a good enough fix for the “newer” versions of IE … ps. Sorry I misspelled your name before!! 🙂
Hi Kristarella! Thank you so much for this great tutorial! I’ve read it about 10 times!
I’ve added the CSS for the drop down menu and that’s working great in Firefox, but not in IE7. So now I’m trying to add the javascript (using the new “scan” script included in the 3/26/09 entry) and I get the following error:
“Parse error: syntax error, unexpected $end in /home/allone1/public_html/wp-content/themes/thesis_15/custom/custom_functions.php on line 52″
I’m not sure I’m putting the javascript in the right place in my custom_functions.php file. This is what my custom_functions.php file says (Sorry I’m still not sure how to do the coding part right to highlight the code in blue):
\n\n\t<a rel=\”nofollow\” href=\”http://delicious.com/save?url=\&title=\” onclick=\”window.open(\’http://delicious.com/save?v=5\&noui\&jump=close\&url=\&title=\’, \’delicious\’, \’toolbar=no,width=550,height=550\’); return false;\” title=\”Bookmark this post on del.icio.us\”>Bookmark this article on Delicious\n\n\n\n\n\n\t$(function(){\n\t\t$(\”ul#tabs li:has(ul)\”).wrapInner(\”\”);\n\t\t$(\”ul#tabs li span\”).hover(\n\t\tfunction(){\n\t\t\t$(\’ul\’, this).show();\n\t\t},\n\t\tfunction(){\n\t\t\t$(\’ul\’, this).hide();\n\t\t});\n\t});\n\n<?php } add_action(\u2019wp_head\u2019,\’jquery_nav\u2019);\n\n\n}
Can you or anyone else help me figure out what I’ve done wrong. My site is http://www.latonyaharrison.com and right now, the site is DOWN because of the parsing error. I might take the javascript out so that I can still have the site up and running while trying to figure this out.
Thanks so much!
Kristarella, in case I didn’t to the encoding right – here’s the text of my custom_functions.php file:
<a rel=”nofollow” href=”http://delicious.com/save?url=&title=” onclick=”window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=&title=’, ‘delicious’, ‘toolbar=no,width=550,height=550’); return false;” title=”Bookmark this post on del.icio.us”>Bookmark this article on Delicious
$(function(){
$(“ul#tabs li:has(ul)”).wrapInner(“”);
$(“ul#tabs li span”).hover(
function(){
$(‘ul’, this).show();
},
function(){
$(‘ul’, this).hide();
});
});
<?php } add_action(’wp_head’,’jquery_nav’);
}
And here’s the error I’m getting:
Parse error: syntax error, unexpected $end in /home/allone1/public_html/wp-content/themes/thesis_15/custom/custom_functions.php on line 52
Thank you!
LaTonya — Is the code in the comment encoded properly? It looks like there is a lot missing. There is no opening of the function, no
<script>tags, I think there is an extra});in your javascript and it looks like you’ve pasted your code in the middle of the example function in the file.I would suggest starting from scratch and going through the tutorial again. Note that the javascript I mentioned in a recent comment replaces only the javascript in the post, it doesn’t replace the whole tutorial. If you’re still having problems try pasting your whole custom_functions.php file into Pastebin, give me the link and I can help debug it there.
Hi Kristarella:
Yeah, I actually submitted 2 comments. The first I tried to encode using your encode link, but that one never showed up. For the second comment I sent, I just copied and pasted the code in, but it seems like much of it was removed. I read your commenting policy, so instead of reposting, I was just waiting for my first comment to show up in case it was being held for moderation or something like that. I really appreciate your quick response on this.
I posted my entire custom_functions.php file into pastebin and here’s the link:
http://pastebin.com/m5f117a74.
(Not sure how to add the link here, so just pasted the text).
Thanks so much!
LaTonya — Okay, thanks for explaining that. The comment went straight to spam and didn’t ask me for moderation. I guess if you see the way the code came out you might understand why :-S
Anyway, I’ve looked at the pastebin. The only problem is that you have pasted the function inside the example function. Every function starts with a name and then an opening curly bracket, and closes with a closing curly bracket, but the curly bracket for
custom_bookmark_links()is at the end of the file. If you take a look at the pastebin, I have edited it and it should work now (or at least not give an error).Hi Kristarella! The error is fixed! Thank you!
At first, I still got the same error when I downloaded the revised code and copy and pasted it into my custom_functions.php file. Then I noticed there was a mix of curly and straight quotes in the last line of the code, so I changed those to all straight quotes and the site came back up without an error. Many thanks for your and Barry’s March 30th exchange on curly quotes in this tutorial.)
IE7 users still can’t click on my child pages unless they left click on the parent page first and then hold the left click and drag down to the child page before releasing the click, but this will have to do for now. I have a Pages widget in the sidebar and internal links on each page, so this will do for now.
Thank you! Thank you!
LaTonya — Sorry it’s still not happening in IE. It is a genuinely horrible browser. I’m not able to see why it’s not working without getting into the CSS, I just know that the recently revised javascript worked when I tried it. 🙁
This was so helpful and I implemented it on my Coffee Blog with so much ease.
Thank you!
Jason Coffee
Good work Jason (and everyone customising their nav)! It makes such a big difference and unless you design your header to go with the default nav, no custom header looks complete without a custom nav.
Hi Kristarella,
I just wanted to thank you for putting together such a great tutorial! My site is really only half done but your tutorial made it feel so much closer to completion!
All the best!
Jen
Kristarella, thank you for the very thorough coverage of this issue. While I am not a programmer I can do some editing of CSS and PHP, but I was not able to make the appropriate mods to my new Thesis install. Part of the issue is that there are so many versions and modification.
Is there a way that you can make a summary comment with the final code and step-by-step instructions?
Thanks, Leo
Leo — it depends what you are trying to achieve. This post has info about general nav bar structure, styling the nav bar, making a CSS only dropdown or a javascript dropdown. I can see why you might be confused, but any summary from me will only useful if I know what you want to do.
Kristarella: thank you for the reply, I really got confused by the complexity of the article and the thread form.
I too the time to test each step and after getting myself in trouble a few times, ang getting out of it, I made it work (I am still not sure how it happened).
I see your point that the article is about the general structure of nav bar structure, while I was looking for a quick answer.
One thing that really got me into trouble is where to insert this script, I tried under “Thesis Custom Programming” and I get an error message, and I’ve tried both with and without “wrapping it with function jquery_nav() { ?> at the start and <?php } add_action(‘wp_head’,’jquery_nav’); at the end.”
Thanks, Leo
Leo — No problem, I can see that things get a bit crazy after 100 follow-up comments on the page.
That code should go in custom_functions.php replacing the other similar code in the post and yes, inside a function with an
add_action. Sorry, I’m not familiar with the latest version of Thesis OpenHook (the Thesis Custom Programming thing you mentioned is part of that plugin, not Thesis), so I’m not 100% sure how this code should be applied there. If I get a chance to look at the plugin while I’m upgrading Thesis and WordPress I’ll let you know if I have any new info.The pull down menu issue is one of the main things that have kept me from trying Thesis.
I’m glad that you had done such a good job in explaining the steps. When I have the courage and the time, I will at least try once I can afford the developer version.
Thanks for all of the great Thesis DIY help Kristarella, you really know what you’re doing…not sure if you’ve ever tried using the above javascript fix for IE on a site also using the Dynamic Content Gallery plugin, but on my site they seem to conflict.
After implementing your fix, it seems that the Dynamic Content Gallery plugin will not actually display any of the data and all I see is the loading icon.
Thanks in advance!
Stephanie — Thanks 🙂 You can always upgrade to the developer version later on, only paying the difference between personal and developer, if you want to get started with Thesis and expand to multiple sites later.
Joel — No, I haven’t used that plugin, but it’s not uncommon for different javascript plugins to conflict when they all use the $ function notation. To avoid conflict you can try using jQuery.noConflict.
Thanks Kristarella, After modifying the code (see below) I’m having the same issue with this solution (probably due to my ignorance). In the document head it appears that the jQuery library for this IE fix loads after the library for the visual slider (I think that the order here is the problem). All of this leads me to believe that there are two possible solutions (unless the code below is just plain wrong):
1) Somehow change the order that the scripts load in the document head
or
2) Revert the code below back to its original form and modify the plugin directly with jQuery.noconflict
What do you think? Hope this was clear and thanks again!
jQuery.noConflict(); jQuery(function(){
jQuery("ul#tabs li:has(ul)").wrapInner("");
jQuery("ul#tabs li span").hover(
jQuery.noConflict(); function(){
jQuery('ul', this).show();
},
jQuery.noConflict(); function(){
jQuery('ul', this).hide();
});
});
The code above doesn’t look right, here is the encoded version:
jQuery.noConflict(); jQuery(function(){
jQuery("ul#tabs li:has(ul)").wrapInner("<span></span>");
jQuery("ul#tabs li span").hover(
jQuery.noConflict(); function(){
jQuery('ul', this).show();
},
jQuery.noConflict(); function(){
jQuery('ul', this).hide();
});
});
Joel, in the middle of your code you have a second and third
jQuery.noconflict();, but it’s not needed. All that thing is doing is activating the noConflict function and making the javascript work with “jQuery” instead of “$”.Using the code I previously posted, only the dollar signs should be replaced with “jQuery”:
jQuery.noConflict(); jQuery(function(){ jQuery("ul#tabs li:has(ul)").wrapInner(""); jQuery("ul#tabs li span").hover( function(){ jQuery('ul', this).show(); }, function(){ jQuery('ul', this).hide(); }); });Hi Kris,
After other work forcing me to put the new womensmemoirs site on hold, I’m finally back at it. Only have a few things to finish up (like finishing the customized sidebar category images and placement, and uploading the updated [narrower] moleskin background)… and I decided to put back in the dropdown menu feature.
I followed your instructions (nicely summarized here) and I find that there are some problems. I get the secondary menu dropping down, but can only move over the first two links .. after that the list disappears. This is true in Safari and FF (both on Mac). Haven’t tried PCs.
Test site is accessible here: thosemaxwells.com. Nav item with dropdown list: Memoir Garden.
Secondary issues:
1> Dropdown menu is placed ‘under’ the title text. My workaround would be to match the background of the dropdowns to the color of the title text. (Which I’m not doing correctly on my test site.) How to make the dropdown menu lay over the top of the rest of the elements, so that whatever background color I have will overwrite the titles and text that the dropdown menu might lay over. (Wow, terrible grammar there!)
2> If I click on a main nav link which has a dropdown menu (Memoir Garden) then when that page is loaded the dropdown menu is displayed, even if Memoir Garden is not being hovered over. I’d expect it to not be displayed until I hover over the top nav item with the secondary list.
I’m running WP 2.8 and Thesis 1.51.
Any troubleshooting hints would be much appreciated! Thanks Kris!!
Rees — thanks for the link. I didn’t realise that was on the Answers blog. It is a good summary.
First issue should be solved by adding
z-index:20;to the styles for.custom ul#tabs li ul. Otherwise the content headline is overlapping the dropdown because of the way I tried to get the header background and content background to work together. So I guess your primary and first secondary problems are the same?Then the other problem is caused by the following code:
<script type="text/javascript"> $(function(){ $("ul#tabs li.current_page_item ul").show(); $("ul#tabs li ul:has(li.current_page_item)").show(); $("ul#tabs li:has(li.current_page_item)").addClass("current_page_item"); }); </script>I don’t think you need that code at all. That was for a horizontal-style secondary nav that hovers when on the homepage and shows all the time when on a parent or child page.
Kris!
Brilliant! Thanks for your reply! Now the dropdown is over the top of the page elements. (I’m assuming that a z index of 0 is the lowest, and 255 is the highest, or something like that?) And the dropdown works as expected – I can reach all of the elements. I’ll check in IE6, but I think that all got worked out with the -1 top margin code.
Any idea why, when I’m at Memoir Garden or on a submenu page, the dropdown submenu stays displayed? I’d like it to only display on hover.
Rees — That’s correct, 0 is low and higher numbers mean stacked higher on top of other elements. I don’t know what the lowest number you need is, I just picked one and it worked.
When I said:
I meant that in regards to the menu displaying on the page 😉
Odd, I had gotten rid of it under Thesis Options – Stats Software and Scripts – Header Scripts, and now found it was still listed under Thesis Custom Programming (edits ‘custom_functions.php’) .. and I still see the issue when I go to the memoir garden page. Are you seeing this issue still? (At least it doesn’t show the dropdown menu when on a submenu page… just when on the Memoir Garden page.)
Rees, sorry thought you’d just missed that bit. Also remove
.custom ul#tabs li.current_page_item ul, .custom ul#tabs li.current-cat ul {display:block;}from custom.css and it should go away. I think that CSS was part of the other kind of secondary menu as well.Oh my, I have got a lot of extra shtuff in my CSS file! Thanks for spotting that!
It now works great! Thank you so much, Kris!
Bonus question: When on a secondary page the top nav menu item isn’t shown as ‘current’ .. as expected since it isn’t the current page any longer. But, is it possible to have it still be displayed similarly as if it was the current page (no background in my case) since I’m looking at a page that is ‘under’ that primary nav menu item? Not sure that makes sense. Hopefully you get my drift. Without a primary nav menu item being shown as current, then it makes it easy to forget what primary nav menu item you’re surfing under … but maybe this is just one of the reasons why dropdown menus aren’t suggested.
Yep, can do that if we add one of the three lines that was in there before:
<script type="text/javascript"> $(function(){ $("ul#tabs li:has(li.current_page_item)").addClass("current_page_item"); }); </script>Not sure where I was supposed to place that .. I put it under Thesis Options – Stats Software and Scripts – Header Scripts … but still seem to have the same issue. (Well, not that it is an issue, but would be a nice feature.)
Oh. It looks like something has changed in the Thesis nav menu classes. The child page doesn’t get a class of
current_page_itemanymore, but there is a new class ofcurrent_page_parent. So, you put the code in the right place, but it doesn’t work with Thesis 2.8. Remove that javascript and add a style for.custom .current_page_parentgive it the same background colour asli.current_page_item.Yes, having a .current_page_parent makes sense. However, when I add it, there doesn’t seem to be any change. Here is all of the code … it looks like over time I’ve added bits from here and there and I surely have too much here now, but am having trouble sorting the chaff from the seed.
* Kristarella's dropdown menus */
.custom ul#tabs li ul {display:none; position:absolute; list-style:none; background:#BFBBB2; z-index:20;}
.custom ul#tabs li ul li {float:none;}
.custom ul#tabs li:hover ul {display:block;}
.custom ul#tabs { margin-bottom:-1px;} /* Fix for IE6 */
.custom .current_page_parent {background:none;}
/* Clean up secondary nav menu below primary nav menu - from Kristarella.com */
.custom ul#tabs {padding-bottom:1em;}
.custom ul#tabs li ul li {background:none; border:none;}
.custom ul#tabs li ul li a:hover {text-decoration:underline;}
.custom ul#tabs {position:relative;}
.custom ul#tabs li ul {left:0;}
/* Additional secondary nav code as per https:\/\/"www."kristarella.blog/2009/03/thesis-nav-menus/ */
.custom ul#tabs li ul {display:none; position:absolute; list-style:none;}
.custom ul#tabs li ul li {background:none; border:none;}
.custom ul#tabs li ul li a:hover {text-decoration:underline;}
.custom ul#tabs li ul li.current_page_item a:hover {text-decoration:none;}
Hey Rees, I think perhaps the CSS wasn’t specific enough, so try
.custom ul#tabs li.current_page_parent.If you’re not too worried about separating the CSS and commented like that you can condense it to:
/* Nav menu */ .custom ul#tabs {position:relative; padding-bottom:1em; margin-bottom:-1px; /* Fix for IE6 */} .custom ul#tabs li.current_page_parent {background:none;} .custom ul#tabs li ul {display:none; position:absolute; list-style:none; background:#BFBBB2; z-index:20; left:0;} .custom ul#tabs li:hover ul {display:block;} .custom ul#tabs li ul li {background:none; border:none; float:none;} .custom ul#tabs li ul li a:hover {text-decoration:underline;} .custom ul#tabs li ul li.current_page_item a:hover {text-decoration:none;}There was a bit of duplication in the bottom two sections that I deleted. The indentation sort of represents the hierarchy of the code, i.e., what’s inside what. You don’t have to write it like that if you don’t want to.
YES YES YES! Absolutely brilliant! That cleaned it all up, and it works great now! Thanks for cleaning it up too, I can now study it and see what goes with what.
Thanks again, Kris! You’re stellar!
The jQuery.noConflict code work beautifully…thanks Kristarella!
Now I just need to find an easier way to test it in IE6.
Hi Kristarella, I’m trying the IE fix and apparently not solving the problem. I’m on a Mac, so I’m relying on having a friend on Windows check the site. The menus do drop down, but the IE users are unable to click any links to the child pages. Here is what I have in my custom functions:
function jquery_nav() { ?>
$(function(){
$("ul#tabs li:has(ul)").wrapInner("");
$("ul#tabs li span").hover(
function(){
$('ul', this).show();
},
function(){
$('ul', this).hide();
});
});
<?php } add_action('wp_head','jquery_nav');
and here is the code block where I have the nav CSS in the customer CSS file:
/* Header Display Above Nav */
remove_action{'thesis_hook_before_header', 'thesis_nav_menu'};
add_action{'thesis_hook_after_header', 'thesis_nav_menu'};
.custom #content {
background: #F7F4EF;
}
.custom #sidebar {
background: #F7F4EF;
}
.custom ul#tabs li ul {display:none; position:absolute; list-style:none;}
.custom ul#tabs li ul li {float:none;}
.custom ul#tabs li:hover ul {display:block;}
Any tips on what I’m missing or thoughts on why the menu isn’t working with your fix?
Thanks, Jim
Hi, did you get my comment I posted yesterday about the IE fix not working on my dropdown menus?
Sorry Jim, your comment was flagged as spam…
I don’t think the jQuery is being applied to the site at all because you also have Scriptaculous and Prototype loaded on the page. So try using noConflict, as per a previous comment.
Even then, I’m not sure it’s going to work. I’m on a mac as well and I have a Windows testing computer, but I’m not sure that it works like other installations…:hover on things other than links, but not very well or consistently.
I’m not sure why I could get that span thing to work before, but not on your site. I’ve even had the original code work in IE on some sites, but not others. E.g., it works on AmiExpat. You could have a look at her CSS and see what’s different. Also, you could try removing
.custom ul#tabs li:hover ul {display:block;}and just depend on the javascript because I think IE7 may supportThe original point of this tutorial was to use as much of Thesis and nice, slim code as much as possible, but it seems that IE is way too fickle for that. So, if the above suggestions don’t work out you could try the Pixopoint plugin (you may need to battle some ugly CSS) or another,newer, possibly more robust Thesis dropdown menu.
Kristarella,
I’m trying to modify my navbar but I have not been successful.
What I’m trying is, at the complete right of the navbar (where the RSS SUBSCRIBE image goes), I’d like to add my social links. Something like:
Follow us: (twitter icon) (facebook icon) (RSS mail icon) (normal RSS icon) etc
and each of these would be clickable with the desired action.
How would I do that without modifying the core files?
Mark — Usually people do something like that by adding another list before or after the nav and positioning it.
For example, the code I always use for modifying the nav, which goes with the full-width framework, with an added social list is:
function custom_nav() { ?> <div id="nav_area" class="full_width"> <div class="page"> <?php thesis_nav_menu(); ?> <ul id="social"> <li class="twitter"><a href="http://twitter.com/username">Twitter</a></li> <li class="facebook"><a href="http://facebook.com/username">Facebook</a></li> <li class="rss"><a href="<?php echo thesis_feed_url(); ?>">RSS</a></li> </ul> </div> </div> <?php } remove_action('thesis_hook_before_header','thesis_nav_menu'); add_action('thesis_hook_before_content_area','custom_nav');Then I guess the CSS would be something like:
#nav_area .page {position:relative;} #social {position:absolute; right:0; top:0;} #social li {float:left;} #social li a {padding:0.5em 0.8em; display:block;}It would need more CSS than that, but it’s a start for the positioning. For the icons you can either replace the text in the HTML for the links or you can use CSS image replacement.
You would also uncheck the option to display the subscribe link in the nav as you are adding it back in.
Thank you Kristarella,
It somehow worked but it throws my navbar around the header. But I understand how it’s done now which is the point! I thought there would be a hook or something to position it; didn’t think I’d have to rewrite the navbar area!
Quick question for you as a follow up.
I believe I know why my navbar gets messed up when I add your code. It seems I have a misplaced DIV but I can’t figure out from where!
Here is my Chrome’s inspector snippets:
[div class="page"]
[DIV HEADER]
[ul id="tabs"]
[li class="home-item current_page_item"][/li]
[li class="page-item-1"][/li]
[/ul]
[/DIV]
[/DIV]
For some reason, the HEADER DIV is wrapping both the header and the tabs which I guess is wrong? I looked around my code and could not figure out where I made the error :/
My header has a custom logo done by CSS:
/* Header */
.custom #header { border-bottom:none;
height:92px;
padding-top:0;
padding-bottom:0;
background:url(…/images/toplogo.png)
center left no-repeat; }
.custom #header #logo { display:none; }
.custom #header #tagline { display:none; }
What do you think?
Mark — technically you don’t have to rewrite the nav, but I often end up styling the nav differently to the header so I find it useful to put it inside it’s own div anyway, which is why it’s my preferred code. You could just add your social list to the header and position it. The key with the CSS for positioning is that an element surrounding the list has
position:relative;and the social list hasposition:absolute;. You could do that applyingposition:relative;to#headerinstead…Are you using the full-width framework? If so, the code I gave won’t work for adding the nav back in, let alone put the nav in the header. As before, you don’t have to use the full-width framework, I just almost always do, which is why that’s the code I gave.
There is no misplaced div in the code you’ve shown there, it looks like the default header without the site title. I can’t see anything wrong with the CSS for the header… Without seeing the problem I can’t really tell you what’s going on. I think if you’re use the hook
thesis_hook_before_headerorthesis_hook_after_headerthe nav will still be inside the#headerdiv. That is a good part of the reason I prefer the full-width framework and the code I showed.Hey Kristarella,
I finally was able to fix it. I used a very awkward solution (I’ll explain below) but it works lol! I am using full width framework; of course! After you teaching me about it vs the page framework, there’s no turning back. I don’t see why anyone would use a page framework! You can do so much more with a full width!
As for showing you the issue, I’m running on a local server until I finalize my design. It would be so much easier for me to have it on my online server to get help but oh well! 😛
Anyway for my solution, I had to do the following for it to work.
PHP
/* NAV MENU */
function custom_nav() { ?]
[?php thesis_nav_menu(); ?]
[ul id="social"]
[li class="txt"]Subscribe: [/li]
[li class="rssreg"][a href="[?php echo thesis_feed_url(); ?]"][img src=".../images/rssregular_mini.png" /][/a] [/li]
[li class="rssmail"][a href="[?php echo thesis_feed_url(); ?]"][img src=".../images/rssemail_mini.png" /][/a] [/li]
[li class="twitter"][a href="http://twitter.com/username"][img src=".../images/twitter_mini.png" /][/a] [/li]
[li class="rss"][a href="http://facebook.com/username"][img src=".../images/facebook_mini.png" /][/a] [/li]
[li class="youtube"][a href="http://youtube.com/username"][img src=".../images/youtube_mini.png" /][/a] [/li]
[/ul]
[?php }
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_after_header','custom_nav');
CSS
/* NAV MENU */
#social {color: rgb(65, 65, 65); position:absolute; right:21em; top:13.5em; list-style: none; }
#social li {float:left;}
#social .txt {color: rgb(65, 65, 65); padding-top: 0.2em; list-style: none; }
#social .txt li {float:left;}
As you can see, I kind of cheated by using outrageous positioning ’ems’! But I couldn’t make it work any other way 🙁
Is this CSS “validated” or would this code be considered as bad from a SEO point of view?
Mark — Seems okay. I don’t think CSS has too much bearing, if any on SEO. The only thing I would say is that you don’t seem to have anything set to
position:relative;, which may be why you needed those em positions and do they still work if you resize your browser? You might find that the list is positioned according to the whole viewframe and will move around accordingly.Hi Kristarella- This is a great post– I’ve was trying to do this for so long! .
Now I’ll apply it to my test site,
I liked the nav reset css.
Hi Kris!
I am finding that my dropdown menus are not working in IE6. Yes, I know there is no promise of them working, but for a while I thought they were, we just needed to add the -1 spacing so that when a user hovered over the main nav menu and sees the dropdown menu below and tried to move their mouse down that list they don’t get bumped off because of some odd IE6 rendering which was spacing the next entry one px away from the main nav…
Go here and you won’t see any dropdown menu in IE6: thegreenthree.com Can you tell what I’m doing wrong (if you have access to IE6)?
Thanks!
Hi Rees, I can’t see any javascript for the dropdowns in your header. The CSS
ul#tabs li:hover ulwon’t work because IE6 only allows:hoveron anchors/links.Ack! I guess all that optimizing of this set me back. I suppose I should start over with this, take it from the top again, and see where I end up. (Durn. I thought dropdowns were a done deal for me.) Thanks for taking a look.
Below is my menu style sheet how do change it to make a drop down menu ? kind of new to css
please help
/*—:[ nav menu styles ]:—*/
#tabs { list-style: none; border: 1px solid #ddd; border-width: 0 0 1px 1px; }
#tabs li { margin-bottom: -0.1em; background: #efefef; border: 1px solid #ddd; border-left: 0; float: left; }
#tabs .current_page_item, #tabs .current-cat { padding-bottom: 0.1em; background: #fff; border-bottom: 0; }
#tabs a { display: block; line-height: 1em; color: #111; text-transform: uppercase; letter-spacing:
Mario — In short, if you don’t care about IE6 (and maybe even IE7) you just need to add the CSS near the end of the Structure and style section of the post.
.custom ul#tabs li ul {display:none; position:absolute; list-style:none;} .custom ul#tabs li ul li {float:none;} .custom ul#tabs li:hover ul {display:block;}If you do care about IE, you need to use the javascript option instead of that 3rd line of CSS, but even then it doesn’t always work. It usually works when I use it, some people have reported problems.
I love you Kristarella, I just had to say that. You are like my rock star for CSS. I am relatively new to Thesis and the Css community, I would like to have my child pages, have children pages of their own but I have no idea on how to make that happen, can you please help me out?
Kristarella, I really like your site and all the info – thanks! I think I understand how to move the nav bar around and make all sorts of changes to the tabs, but so far I have not been able to make the whole navbar background area change colors. I’m just not sure of all the .custom options…. The idea is to have the background be black from extreme left to right, including the subscribe link. Of course I would then change the font color as well… In other words it would be a lot like your navbar, appearing to be unattached from the container area. Can you point me to a tutorial for this?
Sarah — If you have grandchildren pages and have selected them in the Thesis nav menu options then they should show up automatically in your menu and then you would need to style them so they show up properly. This is off the top of my head since I don’t have a test case for grandchild pages set up right now…
In addition to the other CSS for child dropdowns:
.custom ul#tabs li ul {width:20em;} .custom ul#tabs li ul li {postition:relative;} .custom ul#tabs li ul li ul {position:absolute; left:20em; top:0;}In theory the other CSS and javascript might cause them to dropdown on hover, but it might need some tweaking depending on what code you’re using for that.
Nathan — You can use the function in my header tutorial for a full-width nav. 🙂
Kristarella,
Thx for the dropdown menu and the updates for version 1.5.
It’s saved me allot of time.
Keep up the good work.
Belgium loves you
Would this allow multiple layers in drop-down menus or just one? I need menus to drop down from category buttons to show sub-categories, but also want menus to drop down off the side of sub-category buttons to show sub-sub-categories.
And does the native Thesis menu editor only let you show Pages or can you configure it to show the standard wordpress category display pages, too?
Thanks!
Berin — grandchild links should be visible as a tertiary navigation. Please see the above comment for some CSS to get you started and let me know if it needs any further tweaks.
Yes, you can also display child categories via the thesis nav menu, they just have to be assigned parents in the category manager and then all selected in the nav options. I’m not 100% sure if the option to use the old nav and the child categories work together. Let me know if things go spaz.
Hello Kris,
Thanks so much for a great tutorial on Drop Down Menus, I am a novice but I think that I have followed everything so far. I still have a problem, I get the menu to drop down and I am able to move over the first item and select it, but if I move to the second item or beyond the menu disappears. I did add the z-index:10; but that did not help. Of course this is IE6 as our manufacturer only supports this browser with its software, (still back in the time).
Below is my CSS file
/*Drop Down Nav Menu*/
<.custom ul#tabs li ul {display:none; position:absolute; list-style:none;z-index:10;}
<.custom ul#tabs li ul li {float:none;}
<.custom ul#tabs li:hover ul {display:block;}
<.custom ul#tabs { margin-bottom:-1px;} /* Fix for IE6 */
and my custom_functions.php
/*Thesis Drop Down Menu*/
<function jquery_nav() { ?>
<<script type="text/javascript" src="http://ajax.googleapis.com/aja.....pt>
<
<<script type="text/javascript">
< $(function(){
< $("ul#tabs > li").hover(
< function(){
< $(‘ul’, this).show();
< },
< function(){
< $(‘ul’, this).hide();
< }
< );
< });
<</script>
<<?php } add_action(‘wp_head’,’jquery_nav’);
Do you see anything that may be wrong?
It is a sub file on the server so that I can work on it before going live
Thanks
Russell
Pure and simply awesome. I was racking my brain trying to find a solution like this. Thank You.
Russell — Sorry, your comment got flagged as spam.
Try adding
.custom ul#tabs li {margin-bottom:0;}, if you’re not depending on Thesis to give you a bordered nav with the active tab without a bottom border. I think that might be why everyone else seems to have trouble with IE and I rarely do, because I use the CSS reset at the start of the post, which removes some padding and border action to cover up that bottom border.Everyone, Thesis 1.6, which is coming out soon, is supposed to have CSS dropdowns built in, so I probably won’t be supporting this post much longer. I will put an announcement in the post text when I have seen a copy of Thesis and confirm the dropdowns work.
Kristarella –
This works great. However my nav is now floating all the way to the left, which I like. But the links themselves float all the way to the left, which I don’t want. I just wanted the background to float from left to right. How can I get the links to align with the content box and my header image, but still have the “full width” feel of the background navigation image?
Autumn — I’m don’t know what you mean. If I could see the site or a screenshot I might be able to answer your question. And are you referring to just nav styling or dropdowns?
Pretty much all the info in this post will be obsolete with Thesis 1.6. The nav classes will change and dropdowns will be built in. It won’t take too much to convert your design to the new classes and I will probably write a post about it, but just letting you know.
I’m sorry. My navigation background now stretches across my whole website. However, the navigation itself is now positioned on the very left, and not in the original “page” framework. The header image, the content, the sidebar, all of it sits inside a “page.” My navigation is sitting outside the “page.” I’ve wrapped my navigation in “page” div tags just like the header and content. I still do not get any results.
Home
I have 3 stylesheets and I can’t figure out which stylesheet holds the “.page” style or the #content_area style. Thesis has come with 2 stylesheets, and custom.css is my third stylesheet. I need to figure out how to get the following div’s to sit in my actual page and not outside it:
If Thesis 1.6 is coming out tomorrow, I can wait another day. If it’s not.. I’m still on the hunt for a solution. 🙂
Sorry Autumn, I don’t think http://mydomain.com/wordpress is the link to your site.
style.css and layout.css should never be changed, but you can investigate all the styles applied to an element using Firebug (I have a tutorial on using firebug).
This particular post doesn’t have any info on moving your navigation, so I’m still kind of flying blind as to what changes you’ve made and why the nav is doing what it’s doing.
Kristella – I’ve used a bunch of your tutorials – full width pages, headers and the custom nav gem on this page. Anyway, just wanted to say thank you. Our site truenewzealand.com is launched and lookin’ good!
Hey Kristarella, I have one general question why you always keep hands on your face in your profile page ?
I really appreciate the effort and help you are doing to latest blogger,hats off to you !
I have Pages and Categories in my Nav bar.
By default Thesis Orders them in the way that Pages appears first on the Nav bar and then Categories.
Can I change it to show Categories first and then Pages?
Brijesh — Not by using the built in nav. You could write a new nav structure, or you could use the built in nav with only pages or only categories and then insert the other manually using the
thesis_hook_first_nav_itemorthesis_hook_last_nav_item. There is discussion in the forums regarding the first approach and there might be regarding the last, but I haven’t really been in the forum since 1.6 was released and those hooks are new to 1.6.I think the best approach would be to select the pages you want in the Thesis Options and then make a function containing
wp_list_categorieshooked intothesis_hook_first_nav_item. Or if easier because of the number of categories or pages, select the categories you want in the Thesis Options and usewp_list_pageshooked intothesis_hook_last_nav_item.If you need more instruction on functions and hooks try this tutorial.
Hey Kristarella, Happy New Year!! 🙂 I was looking for your comments on the contextual drop downs you use, and was wondering if the contextual sub menu links could easily be made to display only on the page you are currently viewing, as apposed to displayed permanently under each top menu link. That would be cool, expanding on that thought, could you also set it so that these contextual sub menu links were set to instead of being displayed below the top menu item, but were in the thesis_hook_before_sidebars or inserted into a text widget at the top of the sidebar? I have only seen one plugin online that would allow you to have different text widgets on different pages, it really should be something that wordpress provided with an easy drop down so you had a widgets page in your dashboard for each page or post you created on your site. Oh well. 🙂 Thanks for your time, I know….. I can ramble. 😉 wishing you a superlative and prosperous 2010.
David — Yes, you can fairly easily set only the subpages of the current page to show by telling all submenus to be hidden, e.g.,
.custom ul.menu li ul {display:none;}, and the current page’s submenu to show, e.g.,.custom ul.menu li.current ul {display:block; visibility:visible;}. That will only work for the parent page, you might have to use a bit of javascript to get theulcontainingli.currentto show when it’s a subpage that’s active.Getting the subpages to show in the sidebar is an entirely different thing. It’s not a matter of moving the navigation menu to the sidebar (although I suppose you could replicate the menu in the sidebar by hooking
thesis_nav_menu()in there), but creating a new list. The WordPress Codex has a bit of documentation about listing subpages.On my website http://QPSMachinery.com I have a dropdown menu.
The far-left option is “Machine Tools” – It has submenu items under it.
When I hover my mouse over “Machine Tools” both Firefox and Google Chrome displays the submenu items fine, but Internet Explorer shows them underneath the “Contact Us” tab.
Can you please tell me what I need to put in my Custom.css file to fix this issue ?
Thanks – Trevor
Trevor — Nope, sorry, I had a look, but have no answers. IE is a mysterious and retarded beast when it comes to z-indexes. You’ll probably need to ask in the DIYthemes forum since it’s the default Thesis dropdown you’re dealing with, not the old one in this post.
All I want to do is order my menu items in a way other than Alphabetical. I know HTML very well. I am F*ing out of my mind that it’s taken me 3 days of puttering around on message boards and I still can’t order my menus – at this point all I want to do is eliminate the menu and replace it with some HTML with the menu items in the correct order. Why does wordpress/thesis make this so f*ing difficult? Why do I need to be a PHP programmer to do anything? I mean ANYTHING?????
Terrence — You can order all of the pages in your nav menu by dragging and dropping them in the Thesis Options. You need to aim for the edge of the menu item when dragging it since it also has the edit text function and if you’re not close enough to the edge it will activate the text edit instead of drag and drop. There is also a menu item order in WordPress for pages. This should be located in the right sidebar when editing pages. I’m not sure if menu order changes the order in Thesis or whether you have to use the drag and drop n the options instead.
Mixing pages and categories and other links in terms of order in the nav is not so easy at the moment, but the “pages” are easily ordered.
I don’t know how long you’ve been using WordPress, but running your own website can be a steep learning curve. When I started a blog on Blogger I knew jack shit about websites. At some point I learnt how to change hexadecimal colours in CSS and my knowledge grew from there. Thesis makes customising WordPress sites much easier than it was before, but there are some limitations. WordPress is built on PHP, so sometimes you need to deal with PHP to change things, the first time I looked at a WordPress theme I had no idea what was going on… it’s the nature of the web, it’s frustrating as hell and then at some point you’ve assimilated enough info that it makes sense.
I recommend taking a look at the videos on the DIYthemes home page. this one about the Thesis Options demonstrates the nav options from 2:30 minutes onwards. All three videos on the homepage are useful actually, check ’em out.
Hi Kristarella,
Nice tutorial, but i seems to have problems when i watch it in IE,
The width are not the same and when i first cross it over it’s placed to the right.
Are there solutions for this? And how ?
Thx
Sorry, forgot the webadres:
Website is http://www.ostendtennis.be
Mike — I can’t see anything placed over to the right in IE (which version?) and I’m not sure what you mean about the widths: not the same as what? The dropdowns are the same width as the parent item, which I guess could be normal, unless you add a width to the line:
.custom ul#tabs li ul {display:none; position:absolute; list-style:none;}To be honest, the best solution is to upgrade to Thesis 1.6 where dropdowns are built in, all the CSS is handled for you, and you can change the width of the dropdowns from the design options, but if that’s not an option, hopefully adding a width to the CSS above will help a bit.
Thx Kristarella for your time and effort.
I will add the css line and upgrade to thesis 1.6
keep up the good work!
By this awesome post you have definitely soloved some long awaited questions about Thesis Theme navigation menu. It’s really rocks……..
Hi Kristarella, Nice work with the forums. I have a question too. Is there anyway to change Nav Menu to “Left of the page and that too vertical” with all sub pages that are vertical drop downs to horizontal expansions.
Nothing but Nav menu fully functional as a side menu. I can use side bar yet I dont get to use all the animations of Nav menu!!!!
Joshua — You can, you might need to play with the widths and positions to suit your site, but the general CSS needed is:
.custom ul.menu li {float:none; width:150px;} .custom ul.menu li ul, .custom ul.menu li:hover ul, .custom ul.menu table {left:149px; top:1px;}You would use
add_action('thesis_hook_before_sidebar_1','thesis_nav_menu');or something like that in custom_functions.php to put the nav where you want it to appear vertically.Thank you, thank you, thank you! I feel like so much of this is trial and error, but damn it helps when some one like yourself gets me through what would have probably taken me hours…you rock!
Hi there…
Today I happened to see your site and tutorials about Thesis theme customization. I must admit that you are really intelligent and creative.
Also as I was reading your tut about customizing Thesis navbar.. Can you please guide me on adding different icons to menu items in the navbar for thesis… like you have in your sites navbar (or is it some other menu system you are using?)
Keep up the great work and blog…
Good day,
ak
Amit — Basically I’m just using background images in CSS to give add nav icons, using the unique classes that are given to each tab (i.e., tab-home, tab-1, tab-2 etc). The background positions are a bit complicated because I’m using an image sprite (all the icons in one image) to save on download time for the user, but if you try just adding a single icon as background image to start with, then perhaps you could read about image sprites later.
Kristarella,
I just wanted to let you know that I used your code for the category nav bar and it worked great. I use it as my only site navigation. Since I don’t need dropdown menus, it was relatively simple. So thank you.
I also tried the code for adding an image below the 1st post (your comment #23) and it worked great. I have filed it until I figure out how I’m going to use it on my site.
Dan
Thanks! That worked exactly how I wanted it. Just changed some of the sizing and I was good to go.
Hi Kristarella,
Thank you for the tutorial. I have now the second nav menu by categories. But I want to exclude some categories from appearing in the second nav. menu. I do want them to appear in the Thesis regular menu. I wan to take “news” and “collaborators” out of the second menu but leave it in the first menu… Can you please advise me?
Thank you!
Ximena — If you’re using
wp_list_categories in your secondary nav, you can use theexcludeparameter to exclude categories. See the WordPress codex for details.Hi! Thanks for all the great info. I recently added wp3 nav menu support w/ replaced my Thesis nav menu w/ the WordPress 3.0 custom selected menu AND I figured out how to style everything EXCEPT — the current cat page won’t display (white background) as my current page will display.
What is the correct CSS to add here to include Category Page nav menu items to act like Page nav menu items?? Or is there some additional PHP code that I have to add to my custom_functions.php I have to add as well??
CUSTOM_FUNCTIONS php CODE:
/* add wp3 nav menus */
add_theme_support(‘menus’);
register_nav_menu(‘primary’, ‘Primary Navigation’);
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘new_menu’);
function new_menu() {
wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) );
}
CSS CODE:
.custom menu .current a { background:#FFFFFF; font-style:bold; color:#FF3300; border:0px; }
.custom ul.menu { text-align:right; background:#255D1A; border-bottom:none; }
.custom ul.menu li { display:inline; float:none; font-style:bold; }
.custom ul.menu li a { display:inline-block; }
.custom ul.menu li a:hover { text-transform:lowercase; }
.custom ul.menu li.current_page_item a { background:#FFFFFF; font-style:bold; color:#003300; text-transform:lowercase; border:0px; }
.custom ul.menu li.current-cat a { background:#FFFFFF; font-style:bold; color:#003300; text-transform:lowercase; border:0px; }
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat { background:#FFFFFF; font-style:bold; color:#003300; text-transform:bold; border:0px; }
Thank you so much – I am a total Thesis newbie!!!
Topiary — If you change
.current_page_itemto.current-menu-itemin your CSS I think it will work for all current tabs.BTW, the first line of CSS is not doing anything because it’s missing a period before “menu”.
Thank you thank you thank you!!!!
Hi Kristarella !
Could you teach me how to make my tabs 1 em shorter than the nav. menu, on the upper side, and make the edges abit rounded.
Also I would like the nav menu and header with no padding (0), but tabs and evything else after the nav menu to have 1.5 units of outer page padding.
Appreciate your help very much.
With Kind Regrds
Filipe Martins
Filipe — I think you need to switch to the full-width framework to control the header and nav separately. There’s some CSS demonstration in that video I linked to that should help. Here’s a snippet of CSS for rounded corners; the top block of CSS is to make all corners round, the second block is to make only the top corners round, don’t worry too much about the third.
Hi Kristarella, Thank you for your help! The full-width framework worked well for me.
Now for the corner of the tabs to be abit rounded the css didn’t work. Do I need to write anything else to address the tabs or is exatly the way it’s there ?
Looking foward to hearing from you !
Filipe Martins
Filipe — You need to apply the CSS to the element you want to round. So for each tab and only the top corners it’d be:
.custom .menu li a { border-top-left-radius:1em; border-top-right-radius:1em; -moz-border-radius-topright:1em; -moz-border-radius-topleft:1em; -webkit-border-top-left-radius:1em; -webkit-border-top-right-radius:1em; }There’s so many CSS properties because CSS round corners is not yet supported by all browsers and some browsers have their own implementation (thus the “-webkit” and “-moz”). It won’t work in IE at all, as far as I know. To make it exactly the same across all browsers you would need to use background images.
For a bit more info about CSS as you learn about it, take a look at my recent post about CSS specificity. It has a brief rundown on general CSS at the start.
Hi Kristarella, thank you the information, it didn’t work, could you recommend me where to get a background image of a nav. like mine, very simple, but with the upper corners a bit curved, and preferable the lower corners a bit curved outwards. Maybe I could get the Nav. and header together ?
Looking forward to hearing from you!
With Kind Regards
Filipe Martins
Filipe — It works perfectly when I try it with Firebug. Are you using Internet Explorer, it won’t work in that browser?
I don’t know where you can download such an image, you’d need to make one with Photoshop or GIMP.
Hi Kristarella, thank you very much, I’m going to do that in Firefox with Firebug,
Can you also teach me how to make the lower corners of the tabs a bit curved outwards, and the tabs 10% shorter than the nav.
The nav. menu is at the moment at 14 pt hight, so I would like to have a litle edge on the top of about 10% of the total hight, so the tabs will be 10% shorter.
Looking forward to hearing from you.
Best Regards. Filipe
Filipe — The curved outwards thing would have to be included in the background image for the nav items, it is impossible with CSS.
You can use
.custom .menu {padding-top:10%;}to make it 10% higher than the tabs.Hi Kristarella, thank you very much, everything is working well with Firefox and Firebug,
Could you tell me how to put the Header Image in full width frame work (without borders). It’s just that when I download the Header Image it always stays within the Outer Page Padding.
Looking forward to hearing from you!
Thanks Filipe
Filipe — Please see my full-width headers tutorial for more details on headers.
You may need to either remove the padding in the header or make the image a background of
#header_area .pagerather than#header.If you need a CSS reference, try W3 Schools.
Hi Kristarella, I’ve been trying for hours and I didn’t grasp yet, I’m sorry about it. Can you teach me more in detail, how to remove the padding in the header, or make the image a background.
the most approximated was :
.custom #header_area .page {padding:0em 0 0;}
.custom #header {padding:0;}
Please see my site. Now the head and nav. are too short comparing to the body.
Looking forward to hearing from you.
Filipe — Please don’t post almost the same question on two posts. I was asleep, so it won’t get answered any faster doing that.
Your header image is gone at the moment, so I can’t give you the exact code, but to make the header image the background of
.pageinstead of#headeryou would copy thebackgroundstatement from.custom #headerto.custom #header_area .page. It would look something like.custom #header_area .page { background:#324F80 url(images/header.png) center center no-repeat; }If you do that it probably won’t matter what your
#headerpadding is, but if there is no content inside the header (e.g., a title and/or tagline) you will need to give the header a height.This other post about Thesis headers might help you see the variety of ways you can add images to your header via CSS.
Just so you know,
padding:0em 0 0;is pretty much the same aspadding:0;; the three values are short for top, left and right, bottom. Four values are short for top, right, bottom, left (clockwise) and one value means the padding on all sides.I don’t know if you’d be interested, but I got some emails about these new video courses and there’s one for learning CSS.
I absolutely love using thesis! I use it on almost all my projects. Thanks for the codes these came in handy for me.
Thanks
How do I do this: I want one solid background color not to stop where the nav items stop, but go all the way, with the same length as the header image?
Blair — In custom.css
.custom .menu {background:#f00;}Kristarella, how to use an images for nav menu, as for Home, About, Contact is using a different images for Thesis. You can see the demo for what I mean here:
http://everwell.com/
Thanks in advance Kristarella.. 🙂
Baloot — The simplest way is to use CSS background images. I have them in my nav as well. Feel free to check out my CSS using Firebug or Webkit inspector.
Hi Kristarella,
First off, thank you for all the invaluable tuts!
Like Baloot, I too would like to know how to add images on the Nav Bar. I used CSS background images like you said and it worked well. Because the images are centred on my menu titles, I positioned them to the left but now I can’t see them.
How do I widen the menu width? And also, where do I go to increase the height of the Nav bar? Fyi, I’m using Thesis navigation system.
Appreciate your help Kristarella.
Noel — Don’t use a negative left background position because it will never be visible: it’s telling it to go be -23px to the left of the link. Try making the background position
0 0and then addingpadding-left:28px;.To change the dimensions of the nav it’s the same as the CSS principles you’re already using; you can probably achieve it by adding more padding to the links:
.custom .menu li a {padding:2em 1.5em;}.Thanks Kristarella, I got my images on the nav bar!
I’m still figuring out how to change the dimensions of the navs. When I tried adding more padding to the same codes on each menu, the dimensions all went wonky. But when I tried putting the codes on a new line, nothing seem to work. Will figure that out slowly.
Nevertheless, thanks for helping me add images to the Nav bar.
Merry Christmas Kristarella and do get some sleep. You seem to work at unearthly hours.
Cheers,
Noel
Hello Krista, I really love your tutorials because I see them as very organized and very much comprehensible, not geeky–just right. By the way, I just came by because I thought the images on your tabs menu are good to look at. I might as well want to learn them so that I can implement them on my project site. Thanks a bunch, Krista. 🙂
hello Kristarella,
what i want to do is add nofollow links to useless pages for seo purposes. Now, thesis allegedly gives you the option to add nofollow attribute to any page you want, but if you have the page on the navigation menu it won’t be nofollow.
any idea of how to achieve it?
Any help would be appreciated
thanks.
Yuenmar — It seems that the simplest way to do it at the moment would be to add your nav links as links in a Link Category that is then used in the Thesis nav. You can add rel to the link in the links manager dashboard.
what if i remove default thesis menu and to add a customize nav menu by thesis hook.like this codes below. is this possible?
Link 1
Link 2
Link 3
Link 4
Link 5
thanks
I have a full width header with custom background and I would like a full width color nav bar area background, such as you show in your full width header tutorial, without the nav menu actually being full width, staying in it’s default position. I’ve tried a few solutions but I’m not doing something right.
Robert — I can only suggest following the instructions in the full-width header tutorial. That is the best way to create a full-width nav and the menu itself doesn’t stretch all the way across the browser, only the coloured background does, the menu will stay in the middle of the site along with the contents.
Thanks a lot Kristarella. When looking at your tutorial the screen shot showed the Nav menu all the way to the left so I thought the full code you gave would make that happen on mine. Works like a charm. Again thanks.
Robert
Hi Kristarella, im a huge fan of your blog, and was wondering how did you create your navigation bar at the top. Can you give me any tutorials for making a nav bar such as your? Thanks!
Andy — I made it full-width according to my full-width headers tutorial and then added the icons as CSS background images.
Thank you are your reply, I will have a play around with it. Hope it works out!
hi Krista.
this tutorial is great and works very well in IE9, FF and Chrome.
when using IE8, the dropdown effect doesn’t work… (www.backyard.co.il)
any ideas why ?
thanks,
oren
Oren — I don’t know off the top of my head, but this has been outdated for a couple of years since Thesis now has built in dropdown nav that should work in all IEs.
i can’t find a way to make it work… 🙁
Oren — Which version of Thesis are you using?
If you’re using the latest version of Thesis you have a choice of using the Thesis nav system or the WordPress nav system. In Thesis to get dropdowns you need to create pages with child pages and add them all to the nav. In the WordPress system you can drag and drop menu items to be parent & child menu items. The dropdown will happen automatically.
I figure that this is just a good a place than any: I am having terrible trouble creating a wraparound navigation menu and sidebars, something like what’s seen @ thetomkatstudio.com. Can anyone help me figure this out? I’d appreciate any help on this issue. It’s baffling me.
Gigi — The best place is probably the Thesis forums 😉 But I can try to point you in the right direction…
You need to make the nav a bit physically wider than the content and move it to the left a bit, then add a background image that is simply the little triangles that create the folded effect. For example, the image used on that site is here.
To widen the nav, move it left, and add a background you need CSS something like:
.custom .menu {width:100%; padding:0 10px 10px; position:relative; left:-10px; background:url(images/nav-bg.png) center bottom no-repeat;}. The middle value for the padding and the move left should be the same number of pixels as your triangle “fold” width. The rest of the nav background is the colour of the links themselves, you probably won’t need an image for that.I have been spending hours trying to get rid of the “description” of my menu times when I hover over them. When I create drop down menus these descriptions block the text and make it impossible to use the menu. Is there anyway to get rid of this using custom css. Please help, I am going crazy…. Also thank you so much for this wonderful post.
Stephen — I’d recommend switching to the WordPress menu system. To do so, create a menu under Appearance > Menus and set it as the Primary Menu in the dropdown on that page, then change your menu settings in Thesis Site Options to use the WP menu. WP menus are a bit more flexible to manage and they don’t have the titles by default.
Thank you so much Kristarella. You made my year, and you are absolutely right, the WP menu system is so much more flexible and easy to use. I wish I had been using them from the start. Really, I can not thank you enough! I would never have figured this out…
Stephen
Dear KRISTARELLA,
I add a link in menu with menu option from wordpress and i want to get it other color of tab for this link from menu.
You know how i can do this?
Thank you.
Great tutorial! I used it as a reference to customize my nav. But I am having an issue. See I have these social media icons I would like to float to the right of the nav bar a certain distance from the menu. The problem is I got them there but had to create a custom absolute positioned widget to get it there. It looks great on my screen however when viewing on screens of lower resolution the social icons go all whack. Is there a way to just add them to the nav menu instead of a customer widget. I would also assume it would help speed up load time. Thanks and you rock!
Never mind I figured it out. Just needed to switch the widget to relative instead of absolute positioning. 🙂
Sorin — You have to find the unique ID or class of the menu item to change its colour individually. You can do that by viewing the source code or using Firebug or Webkit Inspector.
thanks a lot, I made some changes to my thesis nav menu, using your codes
Thanks so much for this really helpful post! I love your tutorials.
thanks for sharing , its awesome, its working 😉