How to Change Navigation Menu Color and Location in Thesis Theme

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

{ 9 comments… add one }

Leave a Comment

  • Tony Thomas January 5, 2010, 10:43 PM

    Once again, you have outdone
    yourself.

    Excellent tutorial!

    Simply outstanding!

    Reply
  • Tony M February 19, 2010, 9:17 AM

    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.

    Reply
    • Suresh February 19, 2010, 10:31 AM

      hai tony,

      thanks..
      keep on reading..

      Reply
  • Maricris Yak April 23, 2010, 11:07 AM

    Thanks for this tutorial.. I’ve already done this to my site.. ^_^

    Reply
    • Pascal April 23, 2010, 5:27 PM

      Thanks Maricris.

      Reply
  • Faizan September 2, 2010, 4:51 PM

    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!

    Reply
  • Anna June 24, 2011, 11:01 PM

    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

    Reply
  • Tam July 12, 2011, 10:26 AM

    Hi I am using the Wordpress menu in Thesis. Will this work for that?

    Thanks

    Reply
    • admin July 14, 2011, 9:47 AM

      colors can be changed through design options even though you are using wordpress menu in thesis them.

      Reply