jump to navigation

Adding an additional navigation menu-bar in Thesis Theme June 8, 2011

Posted by Tournas Dimitrios in Wordpress - 3.

This is a practical example how to add a second navigation menu-bar in the WordPress Thesis Theme . I think the code is self-explanatory  , just open these two files on your file-editor and append the code . Of course you can change the CSS to make your style .

/* custom.css   file  */

.custom ul#topnav_menu {
border-style: 2px solid #FF1111;
background:#30555E none repeat scroll 0 0;
width: 100%;
float: left;

.custom ul#topnav_menu li { float:left; padding: 3px 5px 3px 5px; border:1px solid #111;}
.custom ul#topnav_menu li a { font-size: 1.3em; line-height:2em; color: #FFFFFF; }
.custom ul#topnav_menu li a:hover { color: #ff0000;baground:#eee; }

/* Custom Navigation Menu */
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

 Add the second navigation menu paste in 
 Links for top menu will need to be manually added here, since this menu isn't supported by Thesis 
function secondnav_menu() {
<ul id="topnav_menu">
<li><a href="http://localhost:85/thesis2/wp-login.php?action=logout&_wpnonce=fb0581ef2b">Log-out</a></li>
<li><a href="http://localhost:85/thesis2/">Home</a></li>
<li><a href="#">Some-Link</a></li>
<li><a href="#">Some-Link</a></li>
add_action('thesis_hook_before_header', 'secondnav_menu');


The final result :


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s