How to Make a Magazine style Horizontal Sub Nav menu for Thesis theme

Wordpress 6 comments

Thesis theme is one of the most favored premium themes in terms of customization and SEO. Recently I have made a custom skin for this blog. Efforts are still ON to make it more unique and simple. After the new skin change many friends have asked me about the Navigational menu with Horizontal Sub Navigation. In this menu the sub categories are displayed horizontally, rather than the conventional vertical drop down sub nav Menus.

thesis nav thumb How to Make a Magazine style Horizontal Sub Nav menu for Thesis theme

 

Copy the following code in your “functions.php” file (Don’t forget to take a backup)

remove_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);
/***************************************************************************/
/* NEW STYLE NAVIGATIONAL MENU                                             */
/***************************************************************************/
function custom_Techineinfo_navigational_menu() { ?>
<div id=”nav_area” class=”full_width”>
<div class=”page”>
<ul id=”topnav”>
<li><a href=”<?php echo get_option(‘home’); ?>/” class=”on”>Home</a></li>
<?php wp_list_categories(‘orderby=name&exlude=181&title_li=’);
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != “”) {
echo “<ul>”;
wp_list_categories(‘orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of=’.$this_category->cat_ID);
echo “</ul>”;
}
?>

</ul>
</div>
</div>

<?php }
add_action(‘thesis_hook_after_header’, ‘custom_Techineinfo_navigational_menu’);

Now paste the following code to your custom.css file

ul#topnav {
margin-bottom:12px;
float:left;
width:1002px;
list-style:none;
position:relative;
font-size:1.1em;
font-weight:700;
font-family:Arial,Helvetica,Garuda,sans-serif;
text-transform:uppercase;
background:url(images/topnav_stretch.gif) repeat-x;
padding:0;
}

ul#topnav li {
float:left;
border-right:1px solid #555;
margin:0;
padding:0;
}

ul#topnav li a {
display:block;
color:#f0f0f0;
text-decoration:none;
padding:10px;
}

ul#topnav li:hover {
background:#1376c9 url(topnav_active.gif) repeat-x;
}

ul#topnav li ul {
float:left;
position:absolute;
left:0;
top:33px;
display:none;
width:1002px;
background:#1376c9;
color:#fff;
-moz-border-radius-bottomright:5px;
-khtml-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
-border-radius:5px;
padding:10px 0;
}

ul#topnav li:hover ul {
display:block;
list-style-type:none;
list-style-image:none;
}

ul#topnav li ul a {
display:inline;
}

ul#topnav li ul a:hover {
text-decoration:underline;
}

Download this image and upload it to your custom/images directory.

For this I’ve taken reference from two sites. Sohtanaka and  Cats who code with some modifications.

 



style=”display:inline-block;width:336px;height:280px”
data-ad-client=”ca-pub-6771269864674384″
data-ad-slot=”8343618572″>

  • b 07/22/2011, 11:53 AM Reply

    Could you do this with pages, if so how. Great thanks, btw, learning heaps.

    • Sujith 07/22/2011, 12:24 PM Reply

      Yes it can be..Will test and give the code shortly

  • b 07/22/2011, 1:58 PM Reply

    awesome, thank you

  • creativefashionglee 11/16/2011, 5:19 AM Reply

    I tried to follow this tutorial but some reasons, the code for the custom.funtion.php gives me error syntax and cannot modified header notification. I cleaned up the code by pasting it in a note pad and removing the left indent before I inserted in the custom funtion but to no avail. What do you thin is the reason?

  • shen 02/16/2012, 5:49 PM Reply

    I’ve done a width:100% menu on my theme
    like http://test.shen.tv/category/white-ss012/

    it’s possible to align in the center of page the sub menu ?

  • WpShouter 08/30/2012, 7:14 PM Reply

    Thank you so much sir, this is what I’ve been looking for so long i searched a lot but unfortunately didn’t get it finally got it. :) Happy to have it…..

Leave a Comment

*