Adjust the background of the current tab in your Thesis nav menu with a few additions to your custom.css file (custom style sheet).
Steps to add code to your custom.css file
- Go to the Custom File Editor tab in your WordPress dashboard.
- Select ‘custom.css’ from the drop down (it should be the default) and click on ‘edit selected file’.
- Add words like nav menu surrounded by ‘/*’ and ‘*/’ to ‘comment-out’ the text so it is not considered code (an instruction).
- Then add the relevant piece of code from the options that follow.
For example:
/* nav menu */
.custom .menu, .menu a, .menu li ul {
border-bottom: none;
}
Thesis default Nav Menu
The default styles the current navigation menu tab to give it a wider, taller and coloured appearance – that is not exactly square. (See image below).
Depending on what colour you select in the Design Options area for the Nav Menu background, the bottom of the current tab in your nav menu will look something like this…
If you want squared edges, instead of the default skewed bottom, you can remove the bottom portion or make it disappear in a few different ways.
1. Lower the nav menu so that the bottom shape does not appear…
Add this to your custom.css file (custom style sheet)
.custom .menu, .menu a, .menu li ul {
border-bottom: none;
}
2. Change the bottom-border colour to match your background…
For example, if you have a white background, change your border colour to white (#FFFFFF)
Choose the colour of your nav background in Design Options, under ‘Nav menu’. (See image at right).- If you are using the shadow effect you may want to see what looks better – to either have it ‘on’ or ‘off’.
- If your background is white the shadow will be covered by the border colour.
- If your site is a little plain looking with the shadow turned off, try adding a colour or an image for the background.
Add this to your custom.css file (custom style sheet) changing the #FFFFFF to your background colour hex code, e.g. #7B1A9F for bright purple ;-)
.custom .menu, .menu a, .menu li ul {
border-color: #FFFFFF;
}
3. Remove the border altogether…
For no borders, add this to your custom.css file (custom style sheet)
.custom .menu, .menu a, .menu li ul {
border-style: none;
}
4. Remove the bottom border and add a right margin to space the tabs…
Add this to your custom.css file (custom style sheet)
.custom .menu li {
margin-right: 1em;
}
Inspiration
Thanks goes to MyBlog2Day.com for their question on adjusting the nav menu and the use of their site to demonstrate the Firefox addon Firebug: giving you the ability to tweak the appearance of a site without making actual changes.
{ 63 comments… read them below or add one }
Hey Somone, I appreciate that you write a tutorial for my question! Now I know not only I have the problem with the background which is not exactly square. I just made the “nav border width” to 0 and the background back to square shape. Then I add the last code to add a right margin to space the tabs, it works properly now!
Between, I would be more happy if you could show me how to add an image to replace the “boring” background?
Thanks for your help again Somone!
Regards,
Lee
.-= Lee Ka Hoong´s last blog ..Sunday Killer Link Love Post #24 =-.
Check out Part 4 of the post How to install and customize a thesis site in a weekend. The code for a unique background is in there.
Somone, thanks for the link. Sorry my fault that I didn’t mention clearly, I mean I want to add an image to replace the “boring” background of Nav Menu bar.
I read the post and saw some of the tutorials which I can used to customize my thesis theme, thanks again Somone!
Regards,
Lee
.-= Lee Ka Hoong´s last blog ..Sunday Killer Link Love Post #24 =-.
Thanks for this, I had someone ask me why it shows like that and how to get rid of it. I have forwarded them the url to this post, hope it helps them.
.-= George Serradinho´s last blog ..4 Sure-Fire Ways To Make It Big Online =-.
It’s not really a problem with the full-page framework is it?
I admire you for going out of your way to really help people. Thanks for this detailed post.
Great theme and you’re doing lots to help others. I intend to use this theme for a youths corner blog, it looks fun and engaging – thanks
This is really good guidance for programmers specially they get stuck
I am just scratching the surface and trying to learn Thesis, Wordpress, and Hostgator all at the same time! It is a daunting proposition. I expected a learning curve, but not Mt. Everest! You site seems like a life saver, and I will be spending some quality time here. Thanks!
I’ve been working with wordpress for a little while but not often. The thesis them is fresh and looks great for an art or children based blog. Nice work.
I admire you to prepare to help others truly for you. Thanks this detailed position.
One thing as well is that the .menu li ul will also affect the drop down menus that came out with Thesis v1.6 I think, so it may need correction if you see them stating to behave strangely.
.-= Leo@NetAccountant´s last blog ..Thesis: how to remove multiple categories from your homepage =-.
this is great,i like thesis
.-= fareed´s last blog ..5 Best software to Capture your screen =-.
Hey Somone, i have tried your tricks and it’s works, could you please tell me how should i break header from navbar?
.-= Rakesh Solanki´s last blog ..Check Your PassWord Strength With Password Checker =-.
It looks like your custom code …#myad3… is inserting a 20px below the bottom nav menu.
I am building my first website and I encounter a lot of problems. Please help!
My website is http://www.mingkwong.com
1) how to move the navigation menu towards the right more so that it is in line with the header?
2) how to get rid of the “subscribe RSS feed” thing next to the navigation menu?
3) all my bio, word of mouth etc etc: how can I move them towards the left so that it is in line with the navigation menu? How to make the font bigger?
In other words, I don’t want anything go beyond the width set by my header
Thanks a ton!
Ming
I used Firebug to see why your site’s dimensions are out. Your header comes up as 891px wide and your container width is way to wide to fit in nicely.
Not sure if you have added code to your custom style sheet. If you comment out anything relating to the container [by adding /*a slash and asterisk */ to the left and right of the code paragraph to de-activate it – you can always reactivate by removing these characters}. If you haven’t made changes to the custom.css file I would re-design your header first.
Usually with a header width of less than about 960px you will struggle to have two sidebars. With a header and container width of about 891 you will find the single sidebar to the right better instead of squeezing in two sidebars.
Increase the width of your header to about 960px (the same size of my header for exampole) to allow you more space for a second sidebar. My content and sidebar dimensions, using a 960px wide header, are content 670px and a right sidebar of 240px.
If you have made adjustments to your custom.css file - and you don’t want to alter your header width of 891px – you can add the following custom code to shrink your container width down. The following image is your header area with a container width of 93.4 em.
But you still have to narrow the overall content and sidebar columns down to no more than about 875px in total to allow for padding. You will need to experiment.
.custom #container {margin: 0 auto;
width: 93.4em;
}
Is there a way to center the entire nav bar?
I found the best way to separate the nav menu buttons was to add space to the left of the buttons until you are happy with where they sit. You can space them apart evenly:
.custom ul.menu li {border-width: 0px 0px 0px 10px;
}
The code above says to give the nav menu a border of 10px left, 0px to top, right and bottom. You might want to add more to space it out more.
Alternatively you can float them left (the default) or float them right:
.custom ul.menu li {float: right;
}
Finally, I have been looking for some information about the navigation for a long time but no article could explain it to me in a human language ;) Thanks so much!
wh my setting nav bar not working
Your site link takes me to a Woo Theme, not a Thesis Theme site. Do you have a thesis site.?
now i have theme thesis.. very nice.. thanks for all information
pretty informative tutorial… I was looking for it in the internet because I wanted to change the navigation menu of my blog.
Hi,
Does anyone know how to contact DIYThesis team? Last week I paid for Personal Plan option and downloaded thesis 1.8. It seems I have messed up my registration. When I click the forgot password button. My email is recognized as valid but I never receive any email from DIYThesis for recovering my password. As far as I can see the site has no contact us options. I am just lost on how to get to anyone who is running diythesis theme. I would like to get on to official support forums and learn 1.8 specific tips and tricks. For example how to add pages as submenu to thesis 1.8 nav-menu. It does not seems possible. I had to go back and use wordpress 3.0 for that.
Regards
Salim
Salim – not sure what happened by be assured there are lots of people behind DIYThemes. Send them an email at diythemes@gmail.com
Salim,
You can add “submenu”(s) (i.e. drop-down menus) pretty easy in Thesis 1.8.
You have to create a page as a parent page & then you go to site options (in Thesis menu) and under nav menu choose thesis nav menu (instead of WordPress menu) then under pages tab (right below nav menu in site options) make sure your parent and all child pages are selected and boom you’ve got it.
Hi Somone,
Now that you mentioned, diythemes@gmail.com was in my PayPal reciept which I did not pay attention to. I have drop them an email. Hopefully someone will resolve my case.
As far the sub-menu i.e drop down pages in thesis nav-menu I have tips and its subsequent comments but have not seen solution to it. Although the good thing with thesis 1.8 is it does allow you to use wordpress 3.0 nav-menu which I have done for now.
Many Thanks.
Salim
Never mind. I managed to get the pages to appear as submenu in thesis nav-menu. The trick was to make the pages I wanted as sub-menu to be the child page of the main menu. This had to be done in wordpress edit page UI. Thesis 1.8 UI for nav-manu does not support side movement to make a page a sub-menu unlike wordpress 3.0 menu edit UI. I hope they add this in thesis 2.0 and remove the confusion.
Cheers
Salim
Hi,
I was wondering if anyone has used dynamic content gallery(DCG) plugin to create a slide show on the home page making sure the posts associated with each image do not appear in content part of home page. Ideally I want them to appear only if read more is clicked on the image itself. DCG used is version 3.2.3 with thesis theme 1.8.
Thanks
Thanks. You actually helped me do some custom stuff I’ve been needing to do.
Hi Somone,
Do you know how to move the Navigation Menu below the Header image in Thesis 1.8?
Without hardcoding the theme, that is.
It used to be pretty easy in 1.7, just pasting the following code in custom_functions.php:
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);
but it doesn’t seem to work in 1.8 any longer.
Any help is appreciated.
Thank you
I use this…
remove_action(‘thesis_hook_before_header’,'thesis_nav_menu’);
add_action(‘thesis_hook_after_title’,'thesis_nav_menu’);
try that and see if it works – the word title instead of header. Alternatively, there is always Thesis OpenHook the plugin where you just check the box to not have nav menu in default postion before header and you paste a function in the after header (provided for you just where you need to read it).
Weird,
I tried pasting the code and I get the following error:
Parse error: syntax error, unexpected T_STRING in D:\Hosting\4636772\html\wp-content\themes\thesis_18\custom\custom_functions.php on line 16.
The whole site is offline now, all pages throwing out that error.
Even weirder,
I was going to replace custom_functions.php with a back-up via FTP, but before I could the website auto-fixed itself and is up again???
And when I try to use custom_functions.php via the web editor
and I get the following message:
“Attention! For security reasons, the file you are attempting to edit cannot be modified via this screen.”
What’s going on? Is my hosting provider being overzealous?
It’s okay. Don’t panic. I get that also. It has something to do with either the way wordpress caches or interacts with your server files OR if you use wp-cache plugins OR possibly even the Thesis layout file that works as a kind of interim file to make your site load faster.
The best way to fix this when it happens is go straight to your server and open the custom_functions.php file and make the change. If you have tried to make a change using the WordPress drop down file editor it probably hasn’t worked. You will see your file on your server probably won’t have any changes made to it.
It’s okay to get that server error..security reasons…your server is being rightly cautious thinking it might be a malicous program trying to rewrite your code somehow. Just enter in your details again and all will be good. I’m grateful my server wants to check up on me.
I don’t have your thesis site url to see how things are going as your comment details only give the blogspot address. I hope everything is going alright for you.
I have learnt not to use the wordpress editor custom.css or custom_functions.php since upgrading to wordpress 3.0+. If you delete one line sometimes it deletes every line below that spot!!! So always, select all and copy into a text file while you are making changes to your custom files just in case they get deleted. It is wordpress, not thesis with the bug. Hopefully it will be fixed in a future update. In the meantime it is good practice to always save a backup – even if only making a single line change.
I’ve learnt the hard way. I feel the pain.
Just what I thought then, my hosting provider being overzealous. I suppose I should be glad that they are making sure that no malicious code is being embedded, but since this seems to be a common issue, perhaps just a few lines in that editing screen warning about the possible drawbacks of editing the file through the web interface would prevent many people from totally freaking out.
The site is not viewable now. I would have to create a user account for you to view it and my customer would probably object to that.
In any case, thank you very much Somone, you’ve been most helpful.
I will make all code changes locally with XAMPP first, to make sure it works. I have also downloaded the Thesis OpenHook plugin. for testing.
Cheers.
Agree about the warning…and the freaking out. The first time I got it I thought I tripped the nasty.
Actually, I just realized that there is a warning right on top of the editing box, saying that your whole site could become “unusable” by editing that file and to have an FTP client ready just in case.
It doesn’t show up when you select ‘custom.css’, but it does when you change to ‘custom_functions.php’.
Oh well, sometimes, the faster you try, the slower it gets …
By the way Somone, Thesis OpenHook plugin worked perfectly.
There was a problem because I had a rotating header, but all is well now.
Thanks again for your help, much appreciated.
Need Help Please. I am trying to change my nav menu and move it to right. When I paste this code in to my site, nothing happens. Any suggestions
Try…
.custom .menu {float: right;}Nope, did not work. Its funny, no matter what I type into the CSS, nothing changes ever to the menu bar. Even if I try to move it below my header. It does not move.
Jason,
I had the same issue, but then I tried what Somone originally posted
.custom ul.menu li {
float: right;
}
and it worked. I’m using Wordpress 3.0 and Thesis 1.8. If you’re using that as well, try the code I pasted above again.
Thanks Marion. Sometimes you can’t expalin why it doesn’t work. I often update my files directly on my server rather than using the somewhat pedantic wordpress dashboard.
Is there a way to set a width of the navigation menu to 750 and have the menu be fixed to this so the buttons are spread across evenly?
Thanks for your response in advance
http://thesisthemehq.com/making-changes-thesis-theme-navigation-menu/
This post gives you a bit of help. If you want the items spaced across 750 just increase spaces between or perhaps increase the width of individual menu items. let me know if you need more help.
I think I somehow got rid of my border on the navigation menu a while back. But I forgot what code I used. How can I bring the border back?
It depends how you want to change your nav border. Here are two images of the code needed to display the usual appearance of a nav menu (on one of our sites) …
…and then the code to modify the nav menu to give it a black border on all four edges…
I highly recommend using the Firefox browser and the Firebug (free) addon to tweak your code without doing it live. If you don’t like your changes – refresh your screen and try again. Once you get your code right, copy and paste to notepad or a similar application before adding to your custom.css file. Make sure you backup your custom.css file before changing!
Hi. Could you help me how to put extra space after the nav menu? I’ve been searching for a solution, but found none.
Thanks!
Add a line to your custom.css file like:
.custom #menu-container { padding: 1px 0 5px 0;}
Use the Firefox browser and an addon called Firebug to see what changes you can make to get it just right – before making the changes live. For example, once Firebug is loaded, you can right click on the nav menu and inspect element. From there you can see the line of code in your style sheet that affects the space below you nav menu. To change its properties in Thesis, add .custom before the default line of code and add it to your custom.css file. The above line of code added to your custom.css file will increase the space after your menu items. The 5px is the space after the menu container. Remember TRBL (top right bottom left) and add some more pixels to the top or bottom.
Back up before you make any changes!! Play in Firebug first without making live changes. If the line of code doesn’t work in the custom.css file as you had hoped, delete it and try again. Be careful deleting anything from your custom.css or other theme files unless you have them backed up first so you can replace them!!
I copy all into a text file and save it, so if it screws up I just paste everything as it was over the top of the custom file editor box for custom.css. Better still, if you can access your cpanel and the files there – make changes there. WordPress has a habit of corrupting your custom file editor window and the autosave may corrupt what you have typed.
Thank you so much for this post, I find it very helpful since I am seeking for the code on how to reduce the space between the navigation button.
so I just changed this code:
.custom .menu li {
margin-right: 1em;
}
to this code:
.custom .menu li {
margin-right: -0.5em;
}
Thank you so much :D
I am getting error in line 12 <?php
remove_action('thesis_hook_before_header','thesis_nav_menu'); it is thesis 1.82 please help
This post is all about making changes to the CSS custom.CSS file…not php. You may have pasted code into the wrong file. Also, if you are change the location of your nav menu, I would suggest using the free Thesis OpenHooks plugin, you can then do it easily without messing with the code. hope that helps.
hello,
please help me with a information. i add in menu a link with menu option from wordpress and i want to have other color from what have the menu. how i can do?
thank you
Do you want to change the word in the nav menu (that is a link to a page on your site), or the background colour when you hover over that word or the colour of the whole nav menu area? Please clarify.
I want to have other bg only for the tab with the link.
Thank you.
I had a quick look…depending on what you want to do…you would be best to put your query in the official Thesis Forum with the name of the tab you want the colour changed to, when it is just there and also when it is hovered over – depending on what you want to do.
Hi Somone,
I’m having trouble getting this to work in my Thesis 1.8 theme. I’ve tried everything to just get a nav bar to appear on a site that I’m working on and CANNOT get it to even appear (code that I’ve searched for online, tutorials, tried all of the “Design / Site option” boxes in Thesis) etc… but all to no avail.
If you have time, a page of a site that I’m working on is :homerunseocom.netfirms.com
Any help would be appreciated !
I don’t think you’ve loaded your theme properly. If you are going to run Thesis on a sub-domain you have to install WordPress and the Thesis theme on the sub-domain – at that level if you hosting allows. You’ll also need to activate your custom stylesheet.
Hi
Thankful to find your site!!!
Can you help, when I add a custom menu widget to the sidebar and the menu items are small, they appear next to each other instead of beneath each other. How can I force them to list below each other? I have tried some codes, but am not getting any joy:(
Thanks a lot
Kyla
salam hormat
Thanks Somone.It was really helpful.