kristarella.blog

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / Design / Position Your Thesis Nav

Position Your Thesis Nav

by

I’ve been asked this several times, so I figured it’s high time to write a tutorial on it: how to position your Thesis navigation next to your site title.

Essentially this tutorial is about the CSS position property more than anything else.

position:absolute;

The cool thing about the position property is that browsers generally interpret it the same way! There’s none of the screwiness that comes with trying to get floats, margins, padding and borders to be the same in IE as they are everywhere else.

The values for the position property are:

  • static: the default behaviour of an element; you’ll rarely need to set it
  • fixed: causes the element to stay in a fixed position, relative to the browser window — this one is an exception to what I said about IE, at least in IE6 and 7, fixed position elements were fine on the left, but weird on the right, not sure about IE8 or 9
  • relative: the element is positioned exactly as it would be in the normal flow of the webpage and can be offset from there using the top and left properties
  • absolute: causes and element to be positioned exactly where you tell it with the top, right, bottom and left properties; the position is absolute to the body of the web page, unless it’s inside a positioned element, in which case it is absolute relative to the positioned parent element

The values that we are concerned with for the navigation are relative and absolute.

Before putting the nav next to the title, we should put it inside the same element as the title. Paste the following into custom_functions.php.

remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_after_title','thesis_nav_menu');

This moves the nav from above #header to inside it, after the title and tagline. You may also use thesis_hook_before_title if you want to put the nav before the title in the header; it doesn’t matter for the purposes of positioning it.

To position the nav next to the title add the following to custom.css.

.custom #header {position:relative;}
	.custom ul.menu {position:absolute; top:2.2em; right:1.1em; width:auto;}
		.custom ul.menu li.rss {float:left;}

The first line is necessary for the nav to be positioned relative to the header rather than the whole page. The second line positions the nav 2.2em from the top and 1.1em from the right of #header.

width:auto; is added for the sake of IE6 and 7 so that the nav is only as wide as it needs to be to accomodate its contents (other browsers automatically do this when using position:absolute;, or float). The subscribe tab is floated to the left, along with the other tabs, also for the sake of IE because IE will stretch the nav to the full width of the header if there are both left and right floated elements.

Title or nav too wide?

If your title or tagline is very long or your nav has too many tabs they will overlap. To prevent this you can specify widths for these elements by replacing the above CSS with the following.

.custom #header {position:relative;}
	.custom #header #logo, .custom #header #tagline {width:50%;}
	.custom ul.menu {position:absolute; top:2.2em; right:1.1em; width:50%;}
		.custom ul.menu li.rss {float:left;}

This will make the title, tagline or nav wrap when it needs more than half the width of the header. You may adjust the 50% values to suit your design. Note that if your nav is not wider than half the header and you use 50% instead of auto, the nav will start in the middle of the header and leave extra space on the right. To overcome this you may use width:auto; max-width:50%; instead, keeping in mind that max-width is not supported by IE6.

Please ask related questions in the comments!

You may also be interested in my drop-up navigation tutorial or the DIYthemes Answers blog posts on nav menus.

Reader Interactions

Comments

  1. Once again your Tuts rocks Hunny! 😀

    I fumbled around for hours to do this using negative margins, ect – never thought about moving it into a different hook.

    You’ve saved me some time and stress when I come to do this again and no doubt this is repeated all across the Thesisverse.

    Thanks again 🙂

  2. Sorry forgot to add…

    I love the styling in your comment section and the little icons in your nav-bar, if you’re ever stuck for a tutorial to write I’m sure one of these would go down a storm.

    Thanks again 🙂

  3. I agree with Richard, I love the Nav bar icons! That would be a great tutorial!

  5. Great Post thank you for continuing to share great knowledge with us – I know I get something out of every one! Thanks again.

  6. Thank you so much – I was not looking for a menu above my header, but a full width nave below my header and your code helped me to finally get it to stretch full width.

    I have two semi-related questions that I’d suspect you might know the answer to:

    If enough tabs aren’t generated you end up with a gap – in my case on the right hand side. Is there any way to center the tabs (or nave buttons) and have the grey extend to the edge of the browser? I am not using any of your css styling because it puts the nav bar inside my header pic.

    Second – what I would really love to do is use a 1400 x 100 custom image for my nav bar, centered as mentioned above – in the same position.

    Might you assist with either?

    Cheers,

    Neil

  7. Neil — Unfortunately it’s not easy to center the nav tabs. It’s the nature of floated elements, to get the tabs horizontally next to each other they are floated, but floating only goes left and right, not centered. You can try to fudge centring by adding padding to the left of the menu, but the amount of padding will depend on how many tabs you have, and only really work with one row of tabs.

    Background you can do though:

    .custom ul.menu {background:#fff url(images/nav-bg.png) center center no-repeat;}

    In custom.css that will give you a nav with a white background and an image in the middle on top of the white colour. To get the tabs to be transparent and see through to the background image you need .custom ul.menu li a {background:transparent;}

  8. Neil — I had another think about the centring thing. You may be able to centre the nav tabs with the following CSS.

    .custom ul.menu {text-align:center;}
	.custom ul.menu li {display:inline; float:none;}
		.custom ul.menu li a {display:inline-block;}

    However, I’m not sure how browser cross-compatible this is because inline-block might not work in all browsers. From the info on W3 Schools I think it will work in IE8, not sure about IE7. If you try it and it works though… win!

  9. Thanks so much! I did give that a shot, but the nav bar showed up great – and my header pic disappeared. 🙂

    It may be that thet full width framework is more than I can handle. I love the full width header and footer, but alignment has been problematic and I can’t seem to prevent horizontal scrolling at 1024×768. Thanks for trying to assist!

  10. That second bit of code worked nicely. If I can’t use an image for the nav bar this is the next best option for sure. Thanks for this!

  12. Wonderfully close – the image is there but ends at the outside of the columns instead of extending full width as does the header image…

  13. Neil — Yeah, so if it’s to be a full-width background it’ll need to go in .custom #nav_area as in the other tutorial, but that element didn’t exist before when I gave the previous CSS. So total nav CSS is:

    .custom #nav_area {background:#fff url(http://lifewithdogs.tv/wp-content/uploads/2010/05/NEW-NAV-BAR.jpg) center center no-repeat;}
	.custom #nav_area .page {background:transparent;}

.custom ul.menu {text-align:center;}
    .custom ul.menu li {display:inline; float:none;}
        .custom ul.menu li a {display:inline-block; background:transparent;}

  14. Brilliant. A thing of beauty. One last question that might benefit another as well: does it matter how wide the image I used is? It’s currently 1440px wide and I’m wondering if that will cause issues.

    ?!!!

  15. Neil — In short: if using the page framework, an image should only be as wide as it needs to be to fit the content width, if using the full-width framework you either need an image that repeats so that it doesn’t matter how big or small the page is, or an image that fades out at the sides to blend with a header_area background.

  16. That just clicked last night. I tried it today and so far so good. I have learned so much from you and your site in the last few days. I can’t thank you enough.

    So when will the Kristarella theme become available? Sign me up now!

  17. Kristarella – Thanks SO much for that last comment about the image either needing to repeat or fade out. I’ve been banging my head against a wall for weeks trying to get mine to extend the header_area as a single pic. Now I can move on to other issues 🙂 You rock!

  18. Wonderful, worked like a charm Kristarella! I do have a couple other nav questions. Is there a way to have a 2 line nav menu in line with the header image/title area? Second question: How do you insert the vertical bar or pipe “|” in between the menu items?

    Thanks so much!

  19. Jeffrey — There is probably severals ways to have a 2 line menu area. It sort of depends what you want to do it for: if you add enough tabs to the menu it will go onto as many lines as it needs; if you wish to add a secondary navigation below the main navigation you can do that by hooking in an unordered list with class “menu” (similar to my drop-up menu tutorial, but far less complicated if you don’t need the menu to drop up or down); if you want the dropdowns from the main nav to display on a second line, as opposed to a column or a second line of navigation, that can be done too.

    Inserting an actual pipe in between the nav items is not so easy, but it is easy to put a border in between them with

    .custom .menu li a {border-right:1px solid #000;}
.custom .menu li.tab-home a {border-left:1px solid #000;}

  20. Nice, that CSS worked perfectly for adding the border in place of the vertical pipe. I didn’t even think about doing that.

    Would you possibly be able to share some code i could copy and paste to hook in that 2nd line of “pseudo-nav”? 😉

    I also just thought about dropping 40×40 twitter, rss, and fb fanpage icons under the nav menu that is now positioned beside the logo in the header. Any idea for that?

  21. The basic function is:

    function extra_nav() {
?>
<ul class="menu" id="secondary_nav">
	<li><a href="http://twitter.com/username">Twitter</a></li>
	<li><a href="<?php echo thesis_feed_url(); ?>">RSS</a></li>
	<li><a href="FACEBOOK FAN PAGE URL">Facebook</a></li>
</ul>
<?php
}
add_action('thesis_hook_before_header','extra_nav',12);

    The hook needed depends on where you’ve got the nav menu, the above hook should be suitable if the nav is in the default position above the header. If you’ve positioned it absolutely as in the tutorial, then you’ll need to change the hook to the same as you used for the other nav and adjust the position of this extra nav with something like .custom #secondary_nav {top:3em;}.

    To add images you can either do it with HTML in the function, or with CSS backgrounds.

  23. Kristen, I really appreciate all your work!

    When I tried this, the Nav Menu dropped below the Header/Tag. Any idea what I may have done. I know it would help you to see it, but it’s an active site, so I didn’t leave it there. The code is in the respective files, but commented out.

    Thanks in advance for your help!

  24. Warren — The CSS to position your nav was not applied when you tried it because the styles just before it in the CSS file are not closed off with a bracket.

  26. Hi Kristen,

    I absolutely love your nav menu. Very Cool! I have a question… I like where my nav menu is positioned (directly below the header) on my blog. However, I would like for it cover the length of the header. Any recommendations on how to do that?

    Thanks very much!
    Sandy

  27. Sandy — You just need the CSS .custom .menu {background:#f00;}, replacing “f00” with whatever hexadecimal colour your want to use there.

  28. Hi Kristarella — wonderful tutorial, surprising in some ways. I eventually figured it out and wanted to share in case others are attempting the same.

    My goal was to create a two-line nav menu, using the Thesis tools, but right justified next to a header pic. I took your code above, changed “right:1.1em” to “left:50em”. With the number of pages I had, this pushed a number of them onto a second line, justified to the right. (Again, this is the standard text nav menu, not graphic links.)

    Next I swapped out the default thesis header text with a pic set up through a function, or so I thought. This was the code I was using, in my custom_function.php:

    /*header logo*/function header_logo() { ?><div id="header_logo" ><img src="http://agakhan3.tonyfleming.or.....&quot; alt="clickable header" /><a href="http://agakhan2.tonyfleming.org/&quot; title="Home Page"></a></div><?php }remove_action (‘thesis_hook_header’, ‘thesis_default_header’);add_action (‘thesis_hook_header’, ‘header_logo’);/*END header logo*/

    Checking my page, the pic was there but the nav menu was gone. Vanished. After some head-scratching, I figured out that the header pic wasn’t just placing the pic there, but removing the Thesis header area entirely, effectively taking the nav menu with it.

    So I removed the line
    remove_action (‘thesis_hook_header’, ‘thesis_default_header’);
    and added, to my custom.php:

    .custom #header #logo { text-indent: -9999px; }.custom #header #tagline { text-indent: -9999px; height: 0; }

    Now I have my header pic and a two-line nav menu next to it. There may be an easier way to do this, but your code above and a little tweaking helped me put it together.

    Thanks,
    Tony

    I use a function to replace the header/tagline with a pic, but when I do that it removes the nav menu entirely. It just vanishes. I assume it has something to do with the fact that I’m removing the thesis_default_header (which your code move the nav menu into?), and replaces it with a function.

    Here’s the code for that function.

  29. Oops… left some extra text at the bottom of that message that I’d drafted while trying to figure that out. You can disregard! 😉

  30. Tony — Cheers tony. Yeah, I guess if you remove all the default header code that includes the code for the before and after title hooks (since there is no longer a title to go before or after). What you did, by using CSS image replacement instead of adding the image as HTML via functions is a valid workaround. The other alternative is to add the nav before or after the image in your header image function. So, you’d add thesis_nav_menu(); at the start or end of the function, instead of hooking it into thesis_hook_after_title().

  31. Hi

    First, let me say “you rock!”
    Your tutorials have been a god-send.

    I have gone to the full-width framework and am liking it.
    Moved the menu below the header. – all good.
    Added your “column design” footer – very nice thank you!!

    But, all I want is my header to be full width in the BOX.
    http://louisiana.nexenresponse.com/
    I just want to get rid of the black bar on either side of the gray.

    Any help you can provide would be greatly appreciated.

    Thanks!

    Mitch

  32. Mitch — There’s two main ways to do it, either make the header image the background of #header_area .page rather than #header, or remove the padding from #header_area .page. Removing the padding can be done in one of two ways:

    1. In the Design Options under “Outer Page Padding”. Setting that to 0 will remove padding on all page sections.
    2. If you want to keep the padding on the other pages you will need to remove the padding from just the #header_area .page with padding:0;, but then because the other sections still have padding you will need to increase the width of that element to 98.6em to accomodate.

  33. Darn close
    It all works … except now the nav bar is flush left.
    If I add padding of 2em to the left of the bar, it moves the first nav item off the edge and back in line with the content below BUT then it pushes the right side out past the right frame.

    In my mind, I am thinking that simply putting a width on the nav space should do the trick … but nothing I did seemed to work.

    Thanks!

  34. Mitch — In which browser does padding cause overflow with the menu? .custom ul.menu {padding-left:2em} without any widths specified or anything works fine in my test.

  35. .custom .menu { background: #000000; border: 0; padding-left:2em;}

    IE8 – pushes it out
    FF3.6.2 – works fine
    Chrome – works

    .custom ul.menu {padding-left:2em} Nothing happens in IE8 at all

  37. That’s the fix!

    Awesome, thanks – and if I can ever help you, let me know.

    Mitch

  38. Hello,

    I’m new on thesis, I wanna know, how do I add background image in nav menu also how to round that menu…

    Please help. I’m in deadline.

    Thanks,
    Sadi

  39. Sadi — That stuff is not Thesis specific, it is just CSS. The only Thesis specific part is that the selector you need to apply CSS to the menu is .menu. Here’s some info on CSS backgrounds and CSS round corners. CSS round corners only work in certain browsers (i.e., those with CSS3 support, or are mozilla or webkit based), so not IE; the only other alternative is to use a background image with round corners.

    The basic CSS you need is probably .custom .menu {background:url(images/nav-bg.png);, but you may need to position the background or specify a repeat, it really depend on the exact case.

  40. Hi KRISTARELLA.

    Thank you for the reply. I’ve tried this things in custom.css file but its not worked. any help help? I can’t update the value of menu like font color/background image, etc.

    I’m waiting for your reply, I hope you knew that, how can I do that.. 🙂

    Thanks once again,
    Sadi Chowdhury

  41. Sadi — I can’t give you any suggestions without knowing what you’re trying to do. I would either need to know what you’re trying to make your nav look like, to give the CSS for that, or see you site so I can see the custom.css file and see what’s going wrong there.

  42. Dear,

    I’m trying to use a background image on my thesis nav menu also want to rounded the corners. and I want to use those by custom.css file, I’ve tried those things (using background:url(image url);/ rounded corners code) in custom.css file but it’s not worked. it’s worked when I use this css into layout.css file. but thesis don’t suggest me to edit directly this page.

    I’ve found many website which gave me many code for thesis nav menu, but all are failed…

    Can you tell me, is there any specific settings on thesis for custom.css file? then it’ll work….

    Thanks,
    Sadi

  43. Sadi — What I meant about telling me what you’re doing is to be more specific. There’s at least 3 different ways to use a background image in the nav menu: you can use a background image once, or repeated, positioned differently etc. And rounded corners, might be done with the background image, if you care about IE, or with CSS.

    To use a background image repeated in one direction across the nav menu with rounded corners try:

    .custom .menu {
	background:#f00 url(images/nav-bg.png) top left repeat-x;
	border-radius:0.5em;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
}

    For the image to show up, it needs to be called “nav-bg.png” and be located in the images folder within the Thesis custom folder. The background colour of the nav will be red whether the image exists or not, so you should be able to tell whether the CSS is working.
    There used to be a setting in the Thesis options somewhere to say whether or not to use custom.css, but I can’t find it in Thesis 1.7, so I think it might have been removed, but when it was there it was on by default, so it shouldn’t be an issue unless you turned it off.

  44. Hey Kristen,

    I just used this on a project i am working on. This seems like a better way than Floats, which had been using but were creating problems with IE.

    Thanks and keep up the great work as always!

    John

  45. Hi Krisarella,

    I’ve tried to leave a comment several times but I don’t think it has been working. Anyway, I’m using your tutorials to format my nav bar. I am using the full-width framework and I want my nav bar to sit beside my title. I don’t want it to be the full width of the page, just fit to the content. I think I’ve managed to accomplish this, but there is a strange gray line running across my header now. Could you help me out. Thanks!

    http://www.thehorseandhabit.com

  46. Ashley — One comment did come through on the other post.

    The problem is that you’re combining the full-width nav tutorial and this tutorial. You only need one or the other. The other if you want a nav that appears either the full width of the browser or the full width of the page, or this one if you want it next to the title, which it seems you do.

    Try deleting all the PHP code for the full-width nav and only using the code in this tutorial, that should fix the issues you have (one of which is the line through the header which is being caused by having the nav_area and page elements inside the header, because you have CSS to give #header_area .page a border, but with the full-width nav inside the header, there’s now two areas that count as #header_area .page with a border.

  47. Thank you! That worked perfectly and now I understand the reasoning behind the mistake.

  48. Hi Kristella –

    Could I beg and plead for your assistance on my nav menu one more time? Here’s a problem I simply cannot figure out. Of course, it’s an issue with Internet Explorer.

    The test site in question is http://agakhan2.tonyfleming.org

    I have a Google CSE set up and added as the “last_nav_item” in my nav menu.

    In FF, Opera, Safari and Chrome, it appears exactly as it should. But in IE7, it gets pushed down to a second line, and my previous menu item get extended all the way out to the edge of the first line. I’ve tried tweaking the length of the input box, the height of the nav menu and a number of other tweak, but nothing will bring that CSE back onto the one menu line.

    I hope you or one of your readers can tell me where I’ve screwed up.

    Tony

  49. Tony — It might be a start to wrap the CSE form in <li class="tab tab-search"> and </li> so that the structure is a bit more similar to the rest of the nav. IE might be having a bit of a spaz because there is a form in an unordered list when there should be a list item.

  52. Hi Kristeralla,

    Is there any framework for thesis….Because I am trying to edit CSS but I am not correctly guessing the items in the framework.

    Any help would be appreciated…..

  53. Joshua — I’m not sure framework is the word you’re looking for, but if I understand what you’re after the best thing is to start using Firebug or Webkit Inspector (works in a similar way, but in Safari or Chrome).

  54. Hey Kristarella,

    Thank you for all the great tutorials and keeping them up to date! I was wondering how to create a nav menu so that there NO background colors on the nav bar links? I want the nav bar to consist of just the text without any backgrounds.

    If you’d like to take a look at what I’m aiming for, here’s my PSD mockup: http://toastable.com/thecastle.....markup.jpg

    The menu is all the way in the upper right hand side of the site. Thanks!

    -Earl Lee

  56. Wow, I never knew the solution would be that simple! Thanks!
    I also need help with a footer problem, if you have time.

  57. Kristarella –

    Very helpful work, thank you. I am wondering if there is a way to make the current tab a solid color (after making all tabs transparent per your code above)….I want the header bg image to bleed through all except the current tab. Ideas? Thanks

  58. Found it!
    Make your current menu tab diff. than others:
    .custom .menu .current a {background-color: #FFFFFF;}

  61. Hey Kristarella, I have my menu positioned absolutely to the right of my logo image and I’d like for my top menu to wrap beside it. The menu is currently overlapping the logo. How can I force the menu to jump down to a 2nd line and wrap to the image?

    here’s the dev site: http://lifehouse.jeffrey-davis.net/

  63. That worked wonderfully kristarella, thanks so much! How could I slide the nav items over towards the right margin? I tried adding left padding but that didn’t seem to work. Also, how could i increase the line spacing slightly?

  64. Jeffrey — If you make the nav narrower the tabs will go to the right more. Experiment with widths until you’ve got the right balance of spacing. Note that left padding will just take up space at the left until it hits the other side of the header, so you’d need several hundred pixels of padding for that approach to work.

    I guess .custom .menu li {margin-bottom:0.5em;} might add space between the lines.

  65. ah, thanks a ton. don’t know how i didn’t think about why the padding wasn’t working. both of your suggestions worked like a charm. thanks so much kristarella…ur the best!

  66. Amazingly useful information. Thank you so much for sharing! Got my nav menu within the header and to the right of it with no issues at all.

    Legend!

  67. I agree with whomever suggested a Kristarella theme!
    Also, a tutorial o0n how to do the little icons i9n the nav bar. I have been searching all over for some help doing that 🙂
    Great work, here. Thanks.

  68. Sorry if this has been mentioned elsewhere….I am looking to move my nav menu under the header and tagline text.

  70. Hi krisarella,

    Im from sydney too and eager to start blogging. I have been trying to learn thesis customisations. Downloaded the theme and know the basic customisations of adding a clickable header etc. Thanks to all the wonderful resources online including yourself.

    However for the past 2 days its been mind boggling. So i thought i’d ask and maybeee you can shed some light on this..

    1. How do you remove grey lines under the header and all the grey lines in between.
    In addition that chunky grey bar above the footer?:-(

    i’ve tried many things and nothing seems to help get rid of this.. p.s ive just started to customise it based on mini theme 🙂

  72. This always happens doesn’t it just after you post a question the answer strikes..

    I seemed to have removed the grey lines under the header area.
    Simply by going into design options & removing the tick from show internal borders.

    but still clueless about that grey bar on the footer.

  73. Newby — Good job. That’s what I was going to tell you to do.

    I think the line in the footer is an underlined link, but you can’t see the text, perhaps you have the footer text set to white on a white background.

  74. thanksss it helped appreciate the prompt reply.

    i also found out that if you have the multimedia to custom under design options that grey bar comes up just above side bars.. in default thesis theme..

    have a good weekend im so happyy my thesis theme blog is looking better 🙂

  76. Hello!

    I am so grateful for this post! I have been looking everywhere on how to do this! Thank you!

    I have a question. My nav is jumping a little. When I refresh in IE it jumps up a little and then moves into the right spot. What can I do to stop this?

    My site, under construction can be see here: http://www.bluepenguinuniversity.com/home

    Belinda

  77. One more thing… It’ s fine in Firefox! I have a long blue bar shooting out from the bottom of the nav. Do you know how I can get rid of that?

    Thanks again!

  78. Belinda — Sorry, I couldn’t replicate the jumping nav behaviour in IE, so I can’t really help you there. It loaded and stayed in the same place for me.

    In Firefox the nav is going onto two lines, so the bottom border of the nav is more obvious. Try making the nav slightly wider so that it is only on one line in Firefox, or remove the bottom border with .custom .menu {border=bottom:0;}. You may want to add it back to the tabs with .custom .menu li a {border-bottom:1px;}.

  79. Thanks so much for your help – I added the first line of code .custom .menu {border=bottom:0;} but the line is still there. I’ve found that sometimes I have to move the code to the top of the css for it it work so I tried that too – but no luck. The other thing is that the nav is wrapping if I make the browser window smaller – Yikes! How can I stop that from happening? Thankfully the “jumping” is gone:)

    I’m very new to this and wonder if you can take a look. I would really appreciate it!

    Thank you!!!

  81. Thanks for your reply! We’re getting there – now that the bottom bar is gone, I can see that the blue line is coming from the top. If I were to take away the background color you would see a blue line wrapping around the top of the nav, down the right side and then out off of the main body of the site. The other thing that happens is when I make my browser narrower, the nav wraps. I’ve never seen anything like it. Any ideas?

    Thank you!

    Belinda

  82. Belinda — Sorry, your description of the border issue makes no sense to me.

    As for the nav, #header does not have position:relative; as per the tutorial, so your nav is positioned relative to the whole browser rather than the header. That is the cause of the wrapping.

  83. Sorry! I’ve been moving things around. The issue is that the nav should be all in one straight row, but it’s wrapping so that “Hire Michael” is under home. Is there a way to make it so that it doesn’t wrap when the browser window gets smaller? I don’t know how to make it wider as you mention here.

    Thank you!

  84. Belinda — To make it so that the menu is not affected by the window resizing add position:relative; to the styles for #header. To make the nav just wider in general change width:50%; to something bigger than 50%, for example, 70%.

  86. James — Something like this in custom_functions.php

    function custom_header_ad() {
  echo '<div id="header_ad">OTHER ADVERT CODE HERE</div>';
}
add_action('thesis_hook_after_title','custom_header_ad');

    And in custom.css

    .custom #header {position:relative;}
.custom #header #header_ad {position:absolute; right:1em; top:1em;}

  89. Kristarella,

    As always, you rock.

    I’m trying out your solution but with a twist – display that subnav when a particular header nav tab is selected. Any thoughts there? I’ve been trying to find the conditional logic but am getting stumped.

    Ex if (post in category x OR is category x page) [ then display Kristarella’s code mod to retrieve a custom Link Category]

    2 Issues – 1) my conditional statement keeps breaking and 2) get_linksbyname() seems to be deprecated.

    Any thoughts? (This would probably be better put in the DIY Themes forum but I thought you probably had a good chance of knowing this off the top of your head!)

  90. Frank — Your page doesn’t seem to have the same amount of padding at the top in IE. I haven’t got IE on this computer to test it and won’t be back at my main computer until Sunday. Trying playing with the top:2.2em; value and see whether making it smaller or changing it to 22px helps at all.

  91. Ted — I’ve never heard of that linksbyname function, but you should be able to do it with CSS. If using the Thesis menu:

    .custom .menu li.current ul, .custom .menu li.current-parent ul {visibility:visible;}

    If using the WordPress menu system the classes are probably different, but principle the same.
    To make the dropdown one line instead of a column change the above to:

    .custom .menu li.current ul, .custom .menu li.current-parent ul {visibility:visible; width:80em;}
.custom .menu li.current li, .custom .menu li.current-parent li {width:auto; float:left; clear:none;}

    Other tweaks may be needed, but that’s the general gist.

  92. Kristarella,

    Could you help me format the search bar in the footer. I’ve moved it but it is very small and doesn’t have a “Search” textbox. I moved it with add_action(‘thesis_hook_after_footer’,’thesis_search_form’); by following your example. Now that it is in the footer how do I make it look like the search bar in this footer? http://www.informationarchitects.jp/en/
    Thanks, Mike

  93. Mike — The Search box doesn’t have a button by default. You will probably have to copy the code and create your own search box.

    Paste this in custom_functions.php and change your hooked function from “thesis_search_form” to “custom_thesis_search_form”.

    function custom_thesis_search_form() {
	$field_value = '';
?>
<form method="get" class="search_form" action="<?php bloginfo('home'); ?>/">
	<p>
		<input class="text_input" type="text" value="<?php echo $field_value; ?>" name="s" id="s" onfocus="if (this.value == '<?php echo $field_value; ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo $field_value; ?>';}" />
		<input type="input" id="searchsubmit" value="Search" />
	</p>
</form>
<?php	
}

    Then you’ll need some CSS along the lines of:

    #s, #searchsubmit {background:#fff; border:1px solid #111; padding:5px; font-size:1.2em;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-khtml-border-radius:3px;
}
#searchsubmit {margin-left:1em;}

  94. I have a weird problem that cropped up when I used your code. I put the nav menu inside the header, which of course appears to the right of the title. However, it caused a strange effect on my site. I have three top level nav buttons: about, chicago divorce blog, and contact. the about section is different in main column width, and nav bar width, than the other two. if you were to visit my site and click on the various links, you would see the nav bar change widths, and the columns also. i have no clue why this is happening. do you?

  95. I posed a questioned just above. Interestingly, I just decided to change my font from Georgia, to Cantarell, because I wanted a change and because Cantarell, was listed by Thesis as a Google approved font. When I did that, the problem of my Nav Menu changing widths, and my columns changing widths, went away. There is some interaction between font and your nav menu code, or between the font and Thesis, that cause a strange effect. If you are interested in checking this out, I can change my font back and forth for you, and you can see the impact.

  96. Dave — I’m not really sure what effect you are describing. Do the columns change width in some significant way, or are you just seeing the page jump to the left slightly because the home page is quite short and doesn’t have a scroll bar on the side of the browser, but some of the other pages do?

    If you want to change the font back to Georgia so that I can see what you’re talking about I’d be happy to check it out.

  97. awesome info, like always 🙂

    i have a question, i like how the nav is currently stretching all the way across the page, but i want it fixed. when i try position fixed, it moves everything to the left and no longer stretches all the way across.

    please help

    thanks, ron

  99. cool thanks

    can you check it out and make sure the code looks right.

    also how can i make space between the nav bar and the header, i want to see some back ground between the two.

    thanks, ron

  104. Hey kristarella. this thread (and all ur other posts) have been so helpful! I’m having an issue in IE8 where the nav child pages drop down behind the 2nd line of nav links and the featured content gallery box beneath that. any ideas for a fix?

    the site is: http://lifehousefellowship.org

  105. Jeffrey — IE has a stacking context issue. Most browsers will consider the page to be one stacking context and everything will relate to that unless told otherwise. IE doesn’t behave this way, so even if the menu has a z-index of 50 and dropdowns are 110, since the featured content gallery comes after it in the HTMl and has a z-index of 5 it overlaps. You need to try to get them in the same stacking context.

    Try .custom {position:relative; z-index:0;}, or if that doesn’t work by itself try:

    .custom  {position:relative; z-index:0;}
.custom #header_area  {position:relative; z-index:2;}
.custom #content_area  {position:relative; z-index:1;}

    It’s pretty much a matter of messing with z-indexes until they work properly.

  107. Hey Kristarella. i got the z-indexes right so that the dropdown drops in front of the featured content gallery, but the dropdown menu from the top line of the nav is still dropping down behind the 2nd row of the nav, and i can’t figure out how to get it on top.

    Also, i have a random menu appearing in a 3rd line of the nav and I can’t figure out where it’s coming from. it’s not a post or a page anywhere on the site, but it’s there. effing everything up. 😉 any chance u could look into those two things? u rock.

  108. Jeffrey — I don’t know if you can fix the dropdowns in IE because they’re all part of the same stacking context: i.e., it’s just the one menu, not one menu for the top row and one for the bottom. IE when it puts a lot of emphasis on the order of the HTML, so things that come later are always on top, and it doesn’t obey other z-indexes, making it a PITA to work with in this way. The only way I can see to do it would be to give each nav item it’s own z-index so that the early ones had higher values than the later ones.

    The last nav item looks like it might be an artifact of importing the Site Options from another site. Try unchecking all the nav items, deleting their names, saving and then reselecting the nav items you want.

  109. Thanks so much kristarella, the stacking issue u mentioned and the inability to easily fix it was what i was afraid of. What’s the best way to go about giving each nav item it’s own z-index?

    btw, unchecking all of the menu items and then rechecking all of them cleared that artifact. thanks a ton!

  110. Jeffrey — Try something along the lines of:

    .custom .menu .tab-1 {z-index:20;}
.custom .menu .tab-2 {z-index:19;}
.custom .menu .tab-2 {z-index:18;}
.custom .menu .tab-3 {z-index:17;}
.custom .menu .tab-4 {z-index:16;}

    etc, for as many as you need.

  111. i assume “tab-1” would be the first menu item, tab-2 the second and so on? If you rearrange the menu order or add menu items, will tab-1 remain the 1st item, etc?

  116. Eddy — It’s a z-index problem. Try adding class="menu" to your #cat_tabs list. It should help with lending some of the position and z-index stuff to your menu. You might have to rework some of your CSS; I would recommend backing up your CSS file and then deleting all the #cat_tabs CSS and then just adding the bits back in that you need for colour etc because adding the ‘menu’ class will provide all the CSS necessary for the dropdowns and font sizes etc.

    Where did you get that #cat_tabs code BTW? It looks like something I wrote, but I’m not sure where I wrote it. It’s outdated and needs correcting.

  120. Yeah, as I said, I found it and asked them to correct it. I don’t have access to the manual and I didn’t put it in there; I imagine it originally came from the forums.

  121. Thank you so much for this. Based on some of the things you wrote, I was able to move my menu to the right (above the header) and get the background to stretch across the top of the page. I was also able to add a background image to the currently selected tab.
    Of course, I am now stuck because that image is also showing on the submenus of the currently selected tab and I don’t want that at all. Any ideas?

  122. Gabe — Remove it from the other menu items with something like:

    .custom .menu li.current li a {background-image:none;}

    Can’t tell you exactly because I can’t see the site, but target the same element inside the current element (i.e., if the background is on the link then target li.current li a, if it’s just on the list item li.current li).

  123. Thank you! you are amazing! I suppose if I wanted to add a separate image to those submenus I would use the same principle? I’ll mess around with it and see. Thanks again

  124. Hey Kristarella. this thread and all other posts have been so helpful for me plus tons of other people, you’re doing an awesome work.
    I have a question .. “Is it possible to have the nav menu tabs in vertical (like a column) instead of the normal/default horizontal one (all in a line)”… If yes , How?
    What I actually want to do is, the Nav menu options present on the left side of the header image/banner (‘ll set it later).

    Thanks
    http://www.gadgetics.com

  125. Nabeel — Yes, you can do that. The CSS would be along the lines of:

    .custom .menu {width:200px;}
.custom .menu li {float:none; width:100%;}

    Plus the CSS to position the nav in the header.

  126. Hi Kristen,

    We’re trying to implement a dropline style menu in Thesis (two rows of horizontal menus, main menu items on the top row, submenu items shown on the second row, when hovering over a main menu item). We’re using the full-width html framework.

    Have you seen a successful implementation of this kind of menu in Thesis, or do you have any tips?

    Thanks!
    Kurt

  127. Kurt — Yes, there was some discussion of it in the comments of my older nav post. That’s a bit outdated now that the menu classes are different, but something like:

    .custom .menu ul {width:auto;}
  .custom .menu ul li {width:auto; float:left;}
    .custom .menu ul li a {width:auto;}

    Should start to get your there.

  128. Hello Kristen.
    i want my nav menu to have two sections. one aligned to the left and one to the right.
    in the space between them i want to add a search box.
    is that possible ?
    and another question – do you know of a way to add a tooltip to the RSS button ?
    thank you so much for your wisdom.

  129. Oren — Yes, you can add the search box as a list item to the nav in thesis_hook_last_nav_item and it will automatically go in between the other links and the RSS link because the RSS link is floated right and the rest are floated left.
    I believe the RSS link already has a tooltip… if yours doesn’t perhaps check what text you’ve got in the Thesis options for the RSS link.

  130. Thank you Krista for the quick answer 🙂
    i do have to admit i didn’t get it.. how do i add the search box as a list item ?
    thanks

  132. Thanks again 🙂
    i don’t want the search box to be the -last- tab but i want ti to be in the -middle- between two seperate groups of tabs, one group to float to the right and one to the left..
    but at least i learned some new action – “last_nav”.
    thanks for that 🙂

    by “tooltip” i mean – a small baloon or text box to pop-up when mouse-overing the RSS button (or any other button of my choice).

    my english is not so perfect so i’m sorry if i’m giving you hard time with that…

    Oren

  133. and another thing – please check my site – it looks great in FF but in Chrome and in IE8 it’s all messed up…
    what should i do ? 🙁

    thanks, i hope i don’t bother too much..

  134. Oren — I know that you want the search box in between some other tabs. As I mentioned before, the only way to add something to the nav without rewriting the whole nav is to add it to the end, but if it is floated left and the others are floated right it will appear to be before them, even if it’s after them in the HTML.

    I know what a tooltip is, and my response is still the same: Thesis already has them in the nav… hover your mouse over my “subscribe” link in the nav for about 3 seconds and you should see it pop up with “kristarella.blog RSS feed”. I’m pretty sure I did nothing special to add that, I think Thesis just did it.

    What about your site is messed up in Chrome? As far as I can tell it’s fine in my Chrome browser. It makes it a little harder to tell in a different language… the only thing I can see wrong is that the headings in the right sidebar are on two lines in Chrome. I guess the two browsers render fonts slightly differently, you might have to tweak the font size or letter spacing until it’s fine in both.

  138. Hello again Krista.
    i would love to know how you made your nav-menu with icons. that’s what im trying to do for weeks: http://www.xn--4dbcyzi5a.com/
    in the mean time i’m trying all kind of methods to make this happen. i found one way – with image-map but it didn’t work well so i just put an image behind every tab in thesis menu.
    the problem now is that i want to menus like that so i need to add a second nav menu (but not for categories as i saw all over…) that includes tabs and can be customized.
    do you have any tips to give ?
    thank you so much 🙂
    Oren

  140. Hello, Krista,

    Fantastic tutorial. I have a little issue though:

    I want to change URL of my logo such that it points to another URL rather than the URL of the blog. On the Thesis homepage, it recommends me to use a custom_function, removing the default header, and then adding a custom header.

    That’s fine and dandy, but when I do so, I can’t seem to find a way to position the nav using hooks as there is no more ‘default header’, but a ‘custom_header’.

    I believe this is probably a hooks issue more than anything else, but do you have any advice?

    Thanks!
    Jeff

  141. Jeff — Even if you remove the default header contents, the #header element still exists, but perhaps the positioning issue is coming into it in the order that the functions are added to the hook… if that’s the case you can add a priority to the add_action command. Docs are in the WP Codex, but essentially you can do add_action('thesis_hook_header','custom_header',1); to get your code to execute first.

    I'm not sure if that will really fix your issue though because the nav is not usually hooked into thesis_hook_header it usually goes in before or after header... anyway, hope that clarifies something for you.

  142. Oren — regarding the tooltip, you would probably need to use javascript to take the usual nav tooltip and turn it into a fancy hover, or you’d need to rewrite your nav manually to add your tooltip, and then you’d still need javascript to do the hover. It’s a bit beyond the scope of these comments, but if you need more help try the Thesis forums.

    For the images in the nav, I just gave each nav item a background image with CSS.

    For a second nav, I can’t account or what might have gone wrong with someone else’s tutorial. Their code looks fine to me, but you need to make sure you copy the code correctly (use the little copy icon that comes up when you hover over the code box). Using a text editor with proper PHP syntax highlighting should help you to see if you’re copying it correctly.

  143. hi krista.
    thank you for your response.
    i managed to build the nav-menus i want with images.
    i do have a different problem now with the menus..
    when mouse-overing it for the first time after loading the site (www.cannabook.net) there are weird flashes..
    can you see it ?
    do you know what causing it ?
    can’t seem to find any solution and i tries the DIY forums but couldn’t get help regarding this problem.
    they did mention the “sprite” technique but i think it’s a bit too complicated for me and i’ve done so much work on the current menus so i prefer not to restart all over again 🙂
    thanks
    oren

  145. Kristarella, I think you are way cool. Thanks for all your posts and tutorials.

    Do you have any advice before I attempt to create a nav bar that is vertical in the sidebar? I am trying to recreate the look of an existing non blog site in the Thesis theme that has the left side vertical navigation. I can imagine doing it all with html and CSS via a text widget, but is there a better way?
    This particular site doesn’t need drop down but I’m also wondering about a vertical menu with dropdown (offset to the right of course). I tried to scan all the comments to make sure this hasn’t been addressed but didn’t get to all of them.

  146. Just wanted to say thank you for putting this code up for us to use. I was able to get exactly what I wanted out of my header.

    Thank you, Kristarella.

  147. Such a useful post! Thanks!

    Question: How do I remove the navbar mouseover text? I am working on a website with dropdown Thesis nav and the page names are long. . . so the resulting mouseover text actually blocks some of the dropdown menu text.
    Make sense? Site is http://summerwritingretreat.com

    I’m curious if there’s a line of code that I can put in so that there’s no mouseover text for any Navbar hovering . . .

  148. SLW — There’s 3 ways to do it. 1 is to rewrite your nav manually (least optimal), 2 is to use javascript to remove the title attribute from the nav links (only preferable if you are dedicated to Thesis’ own menu), 3 is to switch to the WordPress menu because I don’t think it uses title attributes (best in my opinion because the WP menu system is a bit more flexible anyway).

  149. I have installed this code into this test site: http://www.annepouch.com/woodard/ and am pulling my hair out trying to resolve a layout problem that happens when I zoom out
    (Command +) the browser in MacOS Safari and Chrome causing the layout to break in both of these browsers. I doesn’t break in Firefox however.
    I have spent some time reviewing and amending my CSS to be a fluid layout that was part of the problem. I have partially corrected the breaking but the header is still giving me problems. I feel I have hit the wall with this one!
    Thanks for any help you can offer.
    Anne

  153. Krista
    Correction for above: It works fine in Firefox but not in Chrome or Safari

  154. Anne — That is very strange! I’m on a Mac and I don’t get that problem on your site. Can you check what your font settings are in Chrome (Preferences > Under the Bonnet), I’ll compare with mine and see if that’s where the issue is starting.

  156. Anne — If you go into “Change font settings” what are the values? I.e., font sizes etc. The default font size is usually 16px. I have seen in the past when that value is different it can do funny things for some layouts. I don’t think that should be the case here, but I’m not sure why our computers would produce different results. The scaling works perfectly on mine (both bigger and smaller).

  157. Can you remove or hide the nav bar from thesis? I want to link to everything from the sidebar or the footer.

    Robert

    • Robert — you can remove or move the nav almost anywhere with the PHP code in the post:

      remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_after_title','thesis_nav_menu');

      The first line removes the nav from it’s default place in Thesis. Use that line alone if you want to remove the nav altogether. The second line adds the nav back in to whichever hook you specify, in this case after the site title.

  158. I’d like to move the location DOWN for both the Nav bar and the post box.
    I have a background image that also has my logo, and it changes with each different page.
    A strange thing happens when I try to move the post box down– the header and footer seem to stay up top. Any idea what clean code would look like to move down the post box, and not have the header or footer display or get in the way?

  159. Stephen — I would have to see the site and behaviour in action to know what you mean. You probably just need a CSS margin or some padding somewhere, but I don’t know what has previously been done to produce what you’re saying is happening.

  160. I encountered this page when I was looking for some information regarding on how to place the navigation bar sideways into the left of the whole site. But, I could not find any information on that. The site that I was copying the format from was built from drupal and I could not find any for wordpress – particularly the thesis theme.

    But, I found a way to create a smooth sideways navigation bar unto the side to the whole site. So, I was thinking of sharing this info to you guys. I placed the sidebar in line with the height of the site.

    Here is the php codes:
    remove_action(‘thesis_hook_before_header’,’thesis_nav_menu’);
    add_action(‘thesis_hook_before_html’,’thesis_nav_menu’);

    Css codes (you need to smoothen things up):
    .custom .menu { border-bottom: medium none; background: #000000;
    height: 100%; padding-top: 25em; padding-left: 3em;}
    .custom .menu li {float: left; border: medium none; width: 40px; height: 3em; font-size: 82%;}
    .custom .menu, .menu a, .menu ul {border: medium none; width: 79px; position: fixed; padding-right: 4em;}
    .custom .menu .current a, .menu .current a:hover, .menu .current-cat a, .menu .current-cat a:hover {background: url() no-repeat scroll 0 0 transparent; color: #73fb30;}
    .custom .menu .current > a, .menu .current-cat > a {cursor: pointer;}
    .custom .menu a, .menu .current ul a, .menu .current-cat ul a {color: #53da10;}
    .custom .menu a:hover, .menu .current ul a:hover, .menu .current-cat ul a:hover, .menu .current-parent a:hover {color: #73fb30;}
    .custom .menu a, .menu .current ul a, .menu .current-cat ul a {color: #53DA10}

    *The color for the navigation menu icons is green and the hover color is light green. I also changed the pointer whenever you hover into the nav menu icons. Since I didn’t like the thesis default.

    Thought I could share this.

  161. This is a great post, thought I have to admit, for someone just getting into all this, it is a little hard to follow!

    Maybe you can help on this header image positioning thing in thesis for me.

    I have a two column layout.

    I uploaded a custom header image… and I really would like to center it over the content column, rather than have it left justified.

    I am not really sure how to go about doing this.

    thanks,

    Alex

  162. hello! thank you so much for your awesome tutorial!! I managed to get the nav bar where I want it thanks to your post, but now I want to have my menu tabs look different. Here is a rough draft photoshop mockup, http://bit.ly/fwq6cU If you have any ideas how to make them look like that, I would greatly appreciate it.

  163. Correction… my nav menu is not where I want it. I’m not sure what I did to it. 🙁 now it’s too far to the left, and when I add page, it moves even more to the left.

  164. ok, started over, and now the nav bar is in the right place… just need to figure out how to use the pink oval buttons as menu tabs… Sorry for so many comments. lol

  165. Alex — In custom.css, .custom #header {text-align:center;}, would probably do what you mean.

    Monster Mom — You need to create an image of the bubble and then use .custom .menu li a {background:#000 url(images/nav-bg.png) center center no-repeat;} in custom.css to add that image as a background to the nav links. You might need other tweaks on the size of the links and their padding etc to make the image fit exactly.

  166. Wow… Now I feel silly.lol. I thought it would be more complicated than that. You’re right, I will need to play with the spacing/size but that’s not too complicated. Thank you so much!

  170. Kristarella, I boobooed!!
    Here is the error message and the code that remains in custom.function file. I have removed everything else as an attempt to repair. No such luck! Any ideas, I am desperate!!!

    This is the error message when I hit save—

    Parse error: syntax error, unexpected ‘}’ in /home/ptj35962/public_html/wp-content/themes/thesis_18/custom/custom_functions.php on line 33

    This all that is in the custom . function—-

    <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

    <?php
    }

    Kind regards,
    David

  171. HI Krista,
    Love the tutorial. I was able to center my Nav and tweek the border code you provided above and separate my header from my nav with a border line.

    Awesome.

    I looked at the CSS website tutorial and think I understand how to use the Image Sprites to create a separate icon next to each of my nav links.

    At least a little.

    You have provided this code to add the image

    .custom .menu li a {background:#000 url(images/nav-bg.png) center center no-repeat;}

    And this is on the wweb site for the sprite code:

    #navlist{position:relative;}
    #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
    #navlist li, #navlist a{height:44px;display:block;}

    #home{left:0px;width:46px;}
    #home{background:url(‘img_navsprites.gif’) 0 0;}

    #prev{left:63px;width:43px;}
    #prev{background:url(‘img_navsprites.gif’) -47px 0;}

    #next{left:129px;width:43px;}
    #next{background:url(‘img_navsprites.gif’) -91px 0;}

    My question is, how do I identify each of my nav items into my Custom CSS for Thesis.

    Once I have the basic code structure I can tweak it to adjust for positioning etc.

    Thanks as always Krista.
    Tara

  172. Hi Kristarella. Keep up the great work. I have been following along your tuts, trying to become a master at CSS, but its 1 step forward two steps back. I was trying to use this tut and the one on the full-width navbar to make something like this: http://www.keithurban.net/. Its so hard to find any good examples of a horizontal subnan, nevermind trying to make it work in Thesis. Even on Keith’s site they cheated and used tables. Thanks for any insight you may have.

    JK

  173. David — It looks like you’ve deleted the top of your custom_functions.php file leaving some of the default PHP in there, which is causing an error. Removing the final } would fix it.

    Tara — If you look at the HTML of your site you will find the unique IDs and/or classes assigned to the tabs in your nav. For example, on The Butter Dish your ‘Kitchen’ nav item has an ID of “menu-item-184”.

    Jeff — You need a bit of CSS like:

    .custom .menu ul {width:50em;}
	.custom .menu ul li {float:left; clear:none;}

    You might need to tweak the width and you can tweak the position using something like margin-left:-50%; in the first line.

  174. Thanks, mate! I was thinking, since I used your non-float method to center the navbar…perhaps, I could use the same for the subnav, then I would not have to use floats. I’ll play with it, but if you have anymore insight, send it my way. If I can figure this out, I’ll have to write a tut for it, b/c there is just nothing around to create these subnavs.

    Jeff

  175. The thought of hooks, custom css and functions files was so scary but you have made it clear and understandable. I am now moving away from my Easy Thesis themes and doing my own mods.
    But I have a request Kristarella…Can you do a tutorial on modifying the thesis Category page. I would like to add content, and php and modify the Category and menu output. I get frustrated trying to understand the existing tutorials and would appreciate hearing it from you.
    Thanks,
    Roland

  176. Roland modifying a category page is similar to modifying any other specific page, but you use the conditional tag is_category() instead of is_page() or is_single().

    There’s quite a lot of stuff in he Thesis user manual. I’m happy to try to do a new tutorial if you can’t find what you need, but I might need a more specific idea of what you mean.

  179. Hi Kristarella, thank you very much! And how can I make that cool glaze on the nav. Gives the impression that the nav. protrudes.

  180. Great tutorial, but it didn’t seem to work for me. Maybe I was doing something wrong. I’m trying to add the nav to the bottom right of the header image but it keeps going below the header image instead. I added the code you had in custom_functions.php and in custom.css but no dice. 🙁

    Here is the site I’m working on – http://www.sociallending.tv/

  181. Susan — Give me the exact code you used and I can probably tell you where it went wrong. The code in the post should give you exactly what you’ve described, but with he nav at the top of the header; to move it to the bottom change the “top” in the CSS to “bottom” and you can reduce the 2.2em value if you want.

  182. Filipe — I’m not sure what you mean about the nav exactly, but you can either give the nav a gradient background, or use 1 pixel borders of a darker and lighter colour to give a slight 3D effect (that’s what I have on mine).

  183. I moved my thesis nav bar below my header and added a second nav bar above my header. I want to add social media icons and a search bar into that second header. Do you know how I can do this?

  185. css: /* Top Nav bar */
    .custom ul#topnav {
    border-style: none;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    background:#FFFFFF none repeat scroll 0 0;
    width: 100%;
    float: left;
    padding: 0px 0px 18px 0px
    }

    .custom ul#topnav li { float: LEFT; padding: 7px 12px 7px 12px; border-style:solid;
    border-width:2px 1px;
    border-color:#ED9D4C; }
    .custom ul#topnav li a { font-size: 1.2em; color: #000000; font-family: ‘Cambria’, serif;; letter-spacing:2px}
    .custom ul#topnav li a:hover { color: #1E7514;}

    php:
    function topnav_menu() {
    ?>

    HOME
    PR/ADVERTISING
    REVIEWS
    DISCLOSURE
    ABOUT
    CONTACT

    <?php
    }
    add_action('thesis_hook_before_header', 'topnav_menu');

  186. Rachel — Ok, you should be able to add the social icons directly into the new menu; create a new list item and link for each and rather than using words like “contact” use the HTML for an image. The search bar you can add in with <li><?php thesis_search_form(); ?></li>.

  189. Okay, thank you. I’m not sure how to incorporate that in with the code I sent you and also have them on left-justified

  190. Rachel — Sounds like you might need to read up on some of the basics of HTML and CSS, such as the tutorials at W3 Schools or Tizag. I don’t mean that to sound rude, I just know that it’s so much easier to customise your code when you know how each bit interacts.

    Anyway, in your code you add the classes like this:

    <ul id="topnav">
	<li><a href="http://www.happygreenbabies.com">HOME</a></li>
	<li><a href="https://docs.google.com/present/view?id=dqxgkxf_72c9cv456r&amp;pli=1/">PR/ADVERTISING</a></li>
	<li><a href="http://www.happygreenbabies.com/category/reviews/">REVIEWS</a></li>
	<li><a href="http://www.happygreenbabies.com/disclosure/">DISCLOSURE</a></li>
	<li><a href="http://www.happygreenbabies.com/about/">ABOUT</a></li>
	<li><a href="http://www.happygreenbabies.com/contact/">CONTACT</a></li>
	<li class="social"><a href="http://twitter.com/GreenBabiesBlog">Twitter</a></li>
	<li class="social"><a href="http://www.facebook.com/pages/Happy-Green-Babies/255154657834727">Facebook</a></li>
	<li class="search"><?php thesis_search_form(); ?></li>
</ul>

    I dunno what you mean about left-justified… they should already be on the left since all the links in that nav are on the left, but you can style those items specifically by the classes that you give them.

  191. Thanks. That’s not rude, you are right! I could use some lessons in basics! Thanks for the help though, I appreciate it.

    I meant to write “right-justified” sorry!

  192. I’m sorry. This css is making my head spin. The code you sent me for the css isn’t changing anything and looking in w3 and tizag doesn’t seem to be working either. I was trying
    .custom li.social {border:0;}

  193. Rachel — Hey, sorry, that’s not the CSS I gave you. You need to target the link, so .custom .menu li.social a {border:0;}, also in order to put them on the right you should put them in the reverse order you want them to appear in the HTML and then use the CSS, .custom .menu li.social {float:right;}.

  194. Kristarella,

    Is there a way to extend my second nav menu so it fits on one line? (www.glopc.com) Here is the CSS:
    /*header*/
    .custom #header_area {background-color:#002242;}
    .custom #header {background-color:#002242;}
    .custom #header_area .page {background-color:#002242;}
    /*search bar*/
    .custom li.search {float:left;margin-right:5px;position:relative;}
    .custom li.search input[type="text"],
    .custom li.search input[type="submit"] {width:100%;font-size:10px;line-height:10px;padding:0.636em 0.818em;}
    /* top nav bar */
    .custom ul#topnav {border-style:none;list-style-image:none;list-style-position:outside;list-style-type:none;background:#002242 none repeat scroll 0 0;width:100%;float:left;}
    .custom ul#topnav li {float:left;padding:3px 10px 3px 3px;text-transform:uppercase;font-family:helvetica,arial;}
    .custom ul#topnav li a {font-size:11px;color:#fff;}
    .custom ul#topnav li a:hover {text-decoration:underline;}
    /*nav menu*/
    .custom #nav_area {background:#003366; border-bottom:3px solid #002242; padding-top:10px;}
    .custom #nav_area .page {background:transparent;}
    .custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
    .custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}
    .custom .menu a:hover {text-decoration:underline;}
    .custom .menu {background-color:#003366;width:100%;}
    .custom #nav {background-color:#003366;}
    /*homepage*/
    .custom #post-21 h2 {display: none;}
    .custom #post-21 {background:none;}
    /*text styles*/
    .custom h1, h2, h3 {font-family:Helvetica;color:#003366;}
    /*footer*/
    .custom #footer_area {background:#003366;padding:0.5em 0;border-top:3px solid #002242;}
    .custom #footer_area .page {background:#003366;}
    .custom #footer {border-top:0;}
    .custom #footer_1 {text-align:left;color:#fff;}
    .custom #footer_1 ul.sidebar_list li.widget {width:18%;margin-right:2%;float:left;font-family:Helvetica, Arial;font-size:10px;}
    .custom #footer_1 ul.sidebar_list li.widget h3 {color:#ccc;font-family:Helvetica, Arial;font-style:bold;font-size:12px;}
    .custom #footer_1 ul.sidebar_list li.widget a {color:#fff;border-bottom:0;font-size:10px;text-decoration:underline;font-family:Helvetica, Arial;}
    .custom #footer_1 ul.sidebar_list li.widget a:hover {color:#fff;font-family:Helvetica, Arial;font-size:10px;text-decoration:none;}

  195. Sarah — I wouldn’t recommend “extending” it because then it might not fit on some people’s screens. I think there’s almost no way to crunch it onto one line with the current wording of the links, but if you were able to change the link names so they were a bit shorter, there might be some CSS that would help make it a bit smaller again and squeeze onto one line.

  196. kristarella,
    how can i make my menus curve like waves instead of aligning it in a straight line?
    thanks

  198. Yuenmar — CSS doesn’t really do waves, so you’d either need to look for some kind of javascript that does that, or use a background image that looks wavy.
    Each menu item has a unique class, use Firebug or Webkit Inspector to find what the unique selector is and use CSS to give each one a different background image. If you need more info about using CSS try this article.

  199. Hi Kristarella,

    Great info on your site, I’ve already recommended it to some friends. However, I have a quick question that I hope you can help me with, as I can’t find an answer ANYWHERE and are really struggling with it….

    The details :

    I have a fixed background on a static page in WP (using Thesis 1.8). The content box is scrolling, with a semi-transparent finish to that content box.

    The problem I am having is that I CANNOT get the nav bar to even show up on my page – I’ve tried using ALL the navbar options in the Thesis Site / Page designer, including trying other plugins like WP Navigation List NAVT, WP Page NAVI and finally a bunch of CSS and custom PHP code to try and get it to work, but all to no avail.

    Do you know what may be hiding the navbar ?

    FWEIW, the page under construction is :

    http://www.homerunseo.com

    Thanks in advance for any help, and for your continual input into the WP / Thesis community !

  201. Hi Krista, I finally got the look I wanted on a new site I am working on – a few of your tutorials were indespensable. Even though my menu is not in the header I ended up here because this thread came up 1st in a search for making menu backgrounds transparent. Everything works great except I cannot figure out how to make the “current background color” also transparent. Doesn’t make sense to have the background highlighted for a non-clickable link. Many thanks!

    p.s. have you done a tutorial on how you have the multimedia box spanning the header and content area? That rocks!

  202. Kevin — Glad my site was useful for you!

    Try using .custom ul.menu li.current a as the selector to change the current tab background colour.

    I haven’t done a tutorial on the sidebar overlap because all it is is: .custom #sidebars {position:relative; top:-125px}

  206. I am having problem.
    Even though I have added in the below:
    remove_action(‘thesis_hook_before_header’,’thesis_nav_menu’);
    remove_action(‘thesis_hook_before_title’,’thesis_nav_menu’);

    My Nav menu still shows up! no idea what’s wrong! Kris, do you have any idea for my case. Thanks.

  209. This is such a helpful site. Thank you! I am fairly new to WP and the thesis theme. I have tried positioning my nav to just after my header and as soon as I do this my entire site gets left justified in IE (firefox is fine). I am using page framework and 1 column. This is the ONLY change I have made. Any ideas as to why this might happen? (site is http://www.sequelphotography.com)

  210. Cassandra — You need to find out the unique class or ID for each nav item (you can do that by looking at the source of your website, or using Firebug. And then give each item a background image and enough padding at the bottom to stretch the link over the image: e.g.,

    .custom .menu li.tab-1 a {background:url(images/tab1.png) center bottom no-repeat; padding-bottom:30px;}

  211. Karen — Have you figured it out? I’m not sure I can comment on why that would be without seeing it while it’s broken, or maybe just seeing the offending CSS.

  214. I tried to put my menu next to the header wth this code

    .custom #header {position:relative;}
    .custom ul.menu {position:absolute; top:2.2em; right:1.1em; width:auto;}
    .custom ul.menu li.rss {float:left;}

    but nothing changes…

    • Lori — do you have a URL I can see? There doesn’t seem to be anything wrong with that CSS, but there are other factors & maybe there’s an error in other CSS that is preventing it from taking effect.

  215. I’m now using wordpress with xampp on my local computer because I’m just playing around with a layout far a new website I want to make. I installed a clean version of wordpress and I don’t have made any changes yet. But I wanted my menu next to the header like your example but if I use the code provided it doesnt work form me. Everything stays the same only the navigation menu goes below the header…

  216. Lori — Did you add the code to custom_functions.php to move the nav inside the header as well? Also, what are you using to edit the files? And how many items are in the nav? If there are enough nav items that it takes up the whole width, then it won’t make much difference.

  217. I did figure it out! I think it was just because I was trying to edit the custom_functions.php in notepad. 🙁 Dumb of me. Anyway, your tut worked great. Thank you!

  218. Yes I used both the codes and I change my files with dreamweaver. And I only have four buttons on my navigation.

  219. Lori — I’m sorry, I’ve tried the CSS exactly as you pasted it and it is woking fine… The only other thing I can suggest is to make sure the CSS is at either the very end or very start of the file and not inside the commented area that comes in the file by default (CSS comments start with /* and end with */).

  220. Yes that’s what went wrong! I pasted it in the commented zone. Thank you so much!

  221. Hi Kristarella!

    Thanks for the wonderful tutorials and insight to using Thesis . . . been following your work for several years now.

    Question – I set up the nav in the header using the custom_function as suggested. And in Firefox is looks good. But in Safari and IE the nav bar lines up below the header. I tried various positioning such as “absolute” but to no avail.

    Any suggestions to fix it?

    Thanks
    Chris

  222. Hi Kristarella – I just figured out the answer to the previous question. No need for help now.

    Anyway – thanks again for the tips and suggestions. Very helpful! Do you take tips, donations, payment for all your help?

    Thanks,

    Chris

  223. Chris — Glad you got it! I was out, so I didn’t get your comment until both had come through! Yep, I take donations through PayPal. There’s a link in the sidebar, maybe I should make it bigger! 😉

  224. Hey,

    Funny my name is Chris Stella.

    Question: I want a full width nav bar pretty much exactly like this (because it’s so clean and simple)

    http://www.briangardner.com/

    I know his backgrounds an image, that’s not a big deal but would i have to change the overall elements of my website in order to get a navigation similar to that 1?

    Chris

  226. hhmm I think I need to get a proper logo instead of the site title and tagline, that must be the issue?

    • Dean — that should have no bearing on the matter at all… As the post explains, using position:absolute; on the menu takes it out of the regular flow and the position of other elements will have no bearing on it, except where a surrounding element has position:relative; in which case it will be the element that the menu positions itself to, rather than positioning absolutely in the whole browser view.

  227. Hello

    I tried to use the instructions here to center my thesis nav bar and my whole dashboard and site *poof* disappeared. Help?

    Thanks
    Keri

  231. Hi Kris,
    Great post!!! I have just installed Thesis 1.8 and what I am trying to do is, I have my logo on the left hand side and my nav bar on the right hand side. I guess the only difference than what you explained in the post is, I want my nav bar right next to my logo. As you can see on my site http://bit.ly/iG7ljs the nav bar is at the very right, but I want it to be aligned to the left next to the logo. It also looks like the nav bar is higher up than the logo. So, all I have added to my page are these 3 lines..
    .custom #header {position:relative;}
    .custom ul.menu {position:absolute; top:2.2em; right:1.1em; width:auto;}
    .custom ul.menu li.rss {float:left;}
    Would appreciate if you could help me to fix this!
    Thx!
    Chris

  232. Actually, I have got another question about Thesis 1.8. I am pretty new to Thesis, so please apologize for my basic knowledge. See, on my home page I have a couple of posts listed. When you get to the post you will notice that every post has an image inside. Sorry, if this is not directly related to this post, but is there a way I can make my post images appear on the home page? A good example is this blog http://www.quicksprout.com. I couldn’t find any option to control this. Many thanks for your help!

    Chris

  233. Chris — With the absolute position you can move your nave anywhere inside the header… although you haven’t actually moved the nav inside the header as I have in the post, so it’s not going to work properly until that happens, because as I explained in the post:

    position absolute causes and element to be positioned exactly where you tell it with the top, right, bottom and left properties; the position is absolute to the body of the web page, unless it’s inside a positioned element, in which case it is absolute relative to the positioned parent element

    Then, you can use left:370px; instead of right:1.1em;, or a similar dimension, to place it next to your logo.

    Thesis has a thing called Post Images, which allow you to specify the URL of an image in the Post Image field of a post or page (below the content editing box), which can show on the home page, archive pages and single pages, as you specify in the Thesis Design Options. These articles might help:
    http://diythemes.com/thesis/rt.....l-options/
    http://diythemes.com/thesis/rt.....-settings/

  234. Thanks Kristarella! That worked. Sorry, I couldn’t quite remember how absolute positioning worked. By the way, now it seems the height of my header is a bit too wide. Where in Thesis could I narrow my header?

    Really appreciate your help. You saved me a lot of time!

    Christian

  235. Chris — The header shouldn’t be bigger than it was before since the navigation (when positioned absolutely) doesn’t stretch the header and in a way is not contained by it; it is only positioned according to the position of the header. If you find the navigation is too wide you will need to give the menu a specific width, rather than “auto”.

  236. Thanks Kristarella,
    I was able to narrow the height of my header, but for some reason it looks like my logo is bottom aligned. As you can see on my site http://bit.ly/iG7ljs there is gap between the logo and the top margin of the page. The nav menu looks good now. I just don’t know where this gap comes from though. The bottom margin of the header is ok, but where in the .css can I get rid of the gap between the logo and the top margin of the header?

    Many thanks!

    Chris

  237. Chris — Sorry for the slow reply. If you add padding-top:0; to your styles for .custom #header_area .page that will remove the space at the top.

  238. Hey Kristerella, thank you so much for providing these awesome tutorials, I really appreciate your help. I’ve found most of what I need to know to create my first design with Thesis right here on your blog!

    I’ve managed to move the nav to within the header and make it transparent with your help, I now need to move it below the header and to the right under the scroll. I have tried padding, as you can see here:

    http://bit.ly/KlSzHN

    But now the hover appears over the header, which isn’t ideal. You wouldn’t know how to bring the whole menu down there would you?

    I’ve posted this and a couple of other problems to the Thesis forums, but I thought as you were dealing with this issue directly here you may be able to help me. Perhaps it will be useful to othres as well.

    Thanks so much for any more awesome advice!

    • Laterales — Wow, I’ve seen that olive oil at the markets :p
      Anywho, using thesis_hook_after_header should work for you.

  239. Hi Kristarella,
    Thanks so much for all the great tuts. Been at web design for a while but am fairly new to Thesis.

    I am using the full width frame work as I want a full width header, but with the nav next to the Title. I have it positioned where I want it but keep getting a horizontal scroll on the page somehow. I’m sure it’s css related… could you help?

    The site is in development – http://bit.ly/Lph0Fc

    The CSS:

    /**** Header ****/
    .custom #header_area .page {padding-top:5px; padding-bottom:5px;background:transparent;}
    .custom #header_area {background:url(images/header_bg.png) repeat-x; border-bottom:1px solid #333333;}
    .custom #header {border-bottom:0;}

    /**** Menu ****/
    .menu a {text-transform: uppercase; letter-spacing: 0px; font-weight:bold;}
    .custom ul#menu-main-menu {position:relative; top:130px; left:510px;}
    .custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
    .custom ul#tabs li {border-color:#DBD4B7; background-color:none;}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}
    .custom ul.menu a {background:transparent; border-right:1px solid #666666;}
    .custom ul.menu a:hover {background:#FFFFFF;}
    .custom ul.sub-menu {background-color:#FFFFFF;}
    .custom ul.sub-menu a:hover {background-color:#CCCCCC;}

  240. Samuel — Relative positioned elements still act as if they are a part of the content flow to some extent, and for block level elements, their natural width is 100% of their container’s width. So your relative positioned nav thinks it should be the full width of the header, but pushed over 510px. It will be much simpler to use what I suggest in the post: position:absolute; inside a relative header.

  241. Perfect. I changed them as you suggested and it eliminated the horizontal scroll.

    Thank you!

  242. Hi,

    is there also an possibility to make the navigation menu vertical rather than horizontal?
    I would like to place it on the left at the bottom of the page. Also I would like the nav menu to be transparant so that only the font is visible, no outlines.
    Is there a posibiliy you could help me with this?

    Thank you

  243. I am still newbie in thesis theme but your tutorial is quite easy to understand. Very amazing, I was able to move my menu within the header and now my site look great.

    Thesis is highly-customized theme. You can do many things if u want to.

  244. Hi there, I followed the tutorial but it seems to have created a second menu instead of just relocating the first one? I’ll leave it as is until I get a response, I think I had this problem on another site too…at least, someone told me I had somehow doubled my header and navigation (?!). Not sure how this is happening…thanks for your help. http://www.hadleyseymore.com

  245. Hey, actually I got frustrated and removed the code because when I added a menu to the sidebar, it piled on top of the other menus until I had a large menu puddle. Ugh! Why on earth would it do this?? O_o I shall put your code back in and let you take a look now…I am using a child theme called Thesis Starter, not sure if that’s part of the problem here? Thanks!

  246. Hadley — Yes, the CSS can apply to sidebar menus because it’s not very specific. If you want more than one menu on the page you need to specify that only the header menu should be positioned:

    .custom #header {position:relative;}
	.custom #header ul.menu {position:absolute; top:2.2em; right:1.1em; width:auto;}
		.custom #header ul.menu li.rss {float:left;}

    As for there being two menus, the default position for the Thesis menu is above the header, but yours is below, so there must be something in your install that is putting it there. Since the two menus are different it looks like the child theme you’re using is adding the WP menu after the header, regardless of whether it is set as the primary menu, or what menu Thesis is set to use… I’m not familiar with the child theme, but presumably they are using a hook to do it, so you need to find something that starts with add_action('thesis_hook_after_header' and refers to the navigation, then rather than editing the child theme’s functions you can copy that line and paste it in custom_functions.php and change add_action to remove_action.

    To use the WP menu with Thesis you need to make sure it’s set as the primary menu on the menus page and then set Thesis to use WP menus in the site options.

  247. Thanks a lot! I think I’ve decided to use a different theme for my personal portfolio, but your tutorial will be helpful for the future. Thanks! 🙂

  248. I have a second nav in my header but I want to move it to the right. I can’t figure out how. Here’s my code
    /*** second menu***/
    register_nav_menu(‘secondary’, ‘Secondary Menu’);
    function secondary_menu() {
    wp_nav_menu( array( ‘container_class’ => ‘secondary_menu’, ‘theme_location’ => ‘secondary’ ) );
    }
    add_action(‘thesis_hook_header’,’secondary_menu’);

  249. Hi Kristen, Huge fan of the blog and could be more appreciative of your tutorials. I’m stuck – have been for weeks. I just can’t seem to get this look (http://caraccidentlawyer.com/g.....1_1109.png) I’m head of product development @legalhub but when it comes to this project I’m stumped. I would actually consider myself rather good with HTML and CSS but not a pro for sure. I love design, and playing with my fav – firebug. But I guess my fire just isn’t HOT enough to bug this problem.

    Can you advise on this one, maybe even through some code my way to match up the general look of the image. just the containers like the header, log, nav, page, content, sidebar. I’d be happy to send you $50 spot on a Starbucks card for your troubles.

    Thank you.

  251. *Update – Got it all working at http://caraccidentlawyer.com – the only problem left that I could not drill down was the #page to be underneath the header. when I tighten up the margin-top it covers the drop shadow and if I close it all the way it floats over the header. Weird.

  253. Kia — The post above would give you some indication of how to do it, beyond that I would need more information, to see the nav’s HTML or know what you’ve already tried.

  254. nice article ,
    i am using two nav menus,one above header i mean they are pages and one below header(categories),check my site. mam,can you please mail me the code to shift the upper nav menu to the right,not within the header but just to the right

  255. Prabhat — You need the following CSS:

    .custom #page {position:relative;}
#menu-s {position:absolute; right:1em;}
.custom #header {margin-top:2.7em; border-top:1px solid #000;}

    NB Positioning the nav to the right will stop the bottom border from stretching right across the page, so I’ve added that back in using the header.