We know navigation of a site create more impression to the users. Normally default navigation menu bar in thesis theme is in unfinished form.That is the navigation bar is not appear complete width of the web page. It shows upto the available tabs in navigation. We need to change it into finished from which looks quiet pretty. In order to change your navigation menu as finished form.
Default navigation bar is like the below image.
Login to your wordpress admin dashboard.
Click custom file editor under thesis options in left side bar of the dashboard.
Edit custom.css file by copy and paste the following code into custom.css file in thesis theme. In this code you can change your color of the menu by changing the background.
/* nav menu color change*/
.custom .menu { background-color: #00bb8b8;
border-bottom: 0.6em solid #3e3e3a;
}
After pasting the code save the custom.css file. Now visit your site which having finished navigation.
Also if you want to change navigation tab link color, hover, text color and etc. options available in wordpress admin. Goto thesis options in left sidebar under this select design options.
Then select ‘nav menu’ here you can change navigation menu’s text font, color, link color link hover color and also navigation tab color.
Here you can change your navigation menu border color and width also. Just select the color whatever you want.
Change Navigation Menu Below Header Location
You can also change your navigation menu placement in your web page it may appear wherever you need. By default it is available above the header.
If you want your navigation below the header you need to add the following hook functions in launch.php file in thesis theme.
/*change nav menu hooks*/
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);
Launch.php file available in …your sitename.com/wp-content/themes/thesis_16/custom/lib/functions/launch.pnp by using ftp software(like filezilla) you can find the file.
Right click on the file and select view or edit option.
Add the above hook function code inside launch.php file and save it.
After completion of your file editing process check your site. Navigation menu appear below the header. Experience the difference in your site with better visibility.
More Video Resources
Related Tutorials:
- How to add Background Image in Thesis Theme Navigation Menu
- Thesis Theme Customization For navigation Menu Round-Up
- How to add additional navigation menu in thesis theme?
- How to Change the Header Image Above nav Menu in Thesis Theme?
- How to change page and category order in navigation menu of thesis theme?
{ 9 comments… read them below or add one }
Once again, you have outdone
yourself.
Excellent tutorial!
Simply outstanding!
Awesome. You guys have no idea how much you’re helping me out. I was wondering the call out for changing the whole nav menu color, and here it is.
hai tony,
thanks..
keep on reading..
Thanks for this tutorial.. I’ve already done this to my site.. ^_^
Thanks Maricris.
thanks for the great article!
half done! but i have some queries. if you will help me out i am sure i could customize my thesis better!
can you tell me as how to keep navigation menu both over head and below head! as its for fourblogger.com
thanks in advance!
Thank you for your help, your video tutorion on how to change the position of the nav tabs below the header was amazing, thank you—I have a question if you can possibly help—I now have 5 tabs/pages below the homepage header—is it possible to have a different header jpg on each individual page on the thesis theme
Thank you again, this is a great resource
Hi I am using the Wordpress menu in Thesis. Will this work for that?
Thanks
colors can be changed through design options even though you are using wordpress menu in thesis them.
{ 1 trackback }