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

Related Tutorials:

1. How to add Background Image in Thesis Theme Navigation Menu
2. How to Add Banner Ads in Header of Thesis Theme
3. How to Change Background and Border in Thesis Theme
4. How to Add Google Custom Search Box in Navigation Menu
5. How to Upload Header Image or Logo in Thesis Theme

Tagged as: background, border, color, location, navigation menu