Tips and Tricks With the NAV Menu Buttons in Thesis Theme

Much of the customization for the NAV Menu in Thesis can be handled with simple changes to the HTML code.

Thesis is considered by many to be one of the best premium themes available for the WordPress blogging platform. Not only does it use built-in tools to help site owners improve their search engine rankings, but Thesis Theme is also one of the most highly customizable themes on the premium market today. The NAV Menu is one Thesis' customizable features that allows website owners to change the look and feel of their blog menus or gives them the option of removing it altogether. Even if you have never worked with CSS or HTML code, you can change the NAV Menu buttons in Thesis to fit the style and design of your website. This sort of customization will do the job of making your website look better, providing a better overall user experience for your website visitors.

Adding Drop-Down Buttons

One of the best ways to create a great experience for your website visitors is to give them easy access to the information they are looking for. You may not want to feature everything your website has to offer on the NAV Menu, but you also have the option of creating drop-down menu buttons to make accessing important information a bit easier. In order to accomplish this, you should first publish the page to your Thesis blog. Then, go to the "Pages" section of your WordPress dashboard and assign the page to a parent page. Finally, go to your site options panel and make sure the child page is selected. Once you have done this, the child page will appear as a drop-down button on your Thesis NAV Menu bar.

Changing Colors

Although you may not think much of it, website visitors pay attention to the way that your website is designed. Fortunately, Thesis Theme allows webmasters to customize the color of the NAV Menu buttons to match the style of their website. One way to do this is by changing the color of your NAV Menu buttons. All that it requires is changing the color wording in your Custom CSS file. Once you have located the code for your selected, unselected, hovering, and drop-down buttons, you can simply change the color names to match the look you are going for. It is important to note that, in the HTML code, the word "background" refers to the button color and the word "color" refers to the color of the font within the button.

Squared Buttons

Changing the shape of your NAV Menu buttons is another trick that can improve the look of your WordPress blog. The default setting gives the selected menu buttons a skewed shape at the bottom. You can remove this shape by lowering the NAV Menu using the code in the Custom CSS file. Another option is to change the color of your NAV Menu background by choosing a different color in the Design Options area and adding the new color code to the border-color code in the Custom CSS file. Finally, you can also completely remove the border by adding the word "none" to the border-style code in your Custom CSS file.

Using Images

Using images in your Thesis NAV Menu buttons can not only be a great way to add instant pizzazz to your website, but can also help your marketing efforts. For example, you can add clickable social media buttons in place of your regular NAV Menu buttons, or add logo or other images to the text in your buttons. To do this, first create the button images and upload them via FTP to your Thesis folder. Each of the images should be named "my-nav-sprite.png". Then, you will be able to use the "Menus" option in your WordPress dashboard to replace the text in the buttons with images that have a specific URL attached to them. The last step in this process is to change the Custom CSS code associated with your NAV menu display boxes to reflect the dimensions of the image you have selected.

Moving the Buttons

In the default settings, the NAV Menu buttons are placed above the WordPress header on the Thesis theme. You may decide that you would like to place your NAV Menu buttons below the blog header for aesthetic purposes or for easier access to the menu. You can do this by logging into your FTP account and renaming the Custom Sample folder within your Thesis Theme folder to Custom. You can then log in to your WordPress panel and select "Custom File Editor" under the Thesis Options menu. Finally, you will find your Custom PHP file, click "Edit," and paste a remove/add action code that directs Thesis to remove the NAV Menu before the header and add it after the header.

Removing the Buttons

Though the Thesis NAV Menu can help your website visitors better navigate your website, you may wish to remove the NAV Menu buttons. To do this, first determine whether you would like to have the NAV Menu removed on one page or on multiple pages. For both options you will need to verify the page IDs for the affected pages. If you are removing the NAV Menu on one page, you will need to find the code in custom_functions.php for that page ID and replace it with a function remove_nav code. If you are removing the NAV Menu on multiple pages, you will need to add an array of page IDs to the remove_nav code before saving it.

References

• DIY Themes: Include Additional Pages in Nav Menu
• Thesis Theme Tools: Color Individual Tabs on the Thesis Nav Bar
• Thesis Theme HQ: Trick: Thesis Feature Box For A Dynamic Navigation Bar
• Thesis Theme Tools: Tutorial: Image Button Bar Menu/Submenu
• DIY Themes: Replace WordPress Navigation Menu "Text Links" with Clickable Image Sprites
• Thesis Theme HQ: Making Changes to the Thesis Navigation Menu
• Techno Zeast: How to Move Navigation Menu Below The Header in Thesis
• DIY Themes: Move or Replace NAV Menu