• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 576
  • Last Modified:

need help making horizontal menu in wordpress theme

Hello
I am modifying the grid-a-liclious theme
http://suprmarket.net/themes/gridalicious/

I want to modify the navigation menu in the header.php
I want it display only the pages and in a horizontal manner, not in a column

I want to make it show all the time, without the title naviagation title and have it show only the pages
no categories, no tags, no search


I attached the code for the header.php, thanks for your help, I really appreciate it!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><?php bloginfo('name'); ?> &mdash; <?php bloginfo('description'); ?></title>
<link href="<?php bloginfo('stylesheet_directory'); ?>/assets/stylesheets/master.css" rel="stylesheet" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<style>
li.cat-item, li.page_item{width:<?php echo gal_width()?>px; margin-right: <?php echo gal_gap(); ?>px}
input.search{padding-left: <?php echo gal_gap(); ?>px;}
.attachment object, .attachment embed, .attachment iframe{width: <?php echo gal_width() * 3 + gal_gap() * 2; ?>px !important;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/javascripts/grid-a-licious.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/javascripts/plugins.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/javascripts/init.js"></script>
<script type="text/javascript"> 
settings.gap = <?php echo gal_gap(); ?>;
settings.width = <?php echo gal_width(); ?>;
settings.max_cols = <?php echo gal_max_cols(); ?>;
settings.center = <?php echo gal_center(); ?>;
settings.speed = <?php echo gal_speed(); ?>;
settings.duration = <?php echo gal_duration(); ?>;
settings.easing = '<?php echo gal_easing(); ?>';
</script> 
<?php wp_head(); ?>
</head>
<body>
<div id="loader"></div>
<div id="content">
<div class="post allcols">
	
	<div class="menuitem" style="width:<?php echo gal_width()*2+gal_gap()*2;?>px">
		<strong><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></strong>, <?php bloginfo('description'); ?>
	</div>

	<div class="menuitem" style="width:<?php echo gal_width();?>px; margin-right: <?php echo gal_gap();?>px;">
		<span class="browse cats down">Navigation</span>
	</div>

	<div class="menuitem" style="width:<?php echo gal_width();?>px;">
		<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> 
		<input class="search" type="search" value="Search" name="s" id="s" />
		<input type="hidden" id="searchsubmit" /> 
		</form>
	</div>
		 
	<div class="navigation"> 
	 <ul id="nav2" class="clearfloat">
	<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>

<div id="page" class="opencols"></div>

Open in new window

0
cristobal_ny
Asked:
cristobal_ny
1 Solution
 
cristobal_nyAuthor Commented:
I found a link on the web where they show how to make the menu horizontal.
http://agungshiro.wordpress.com/2010/06/26/wordpress-creating-absolutely-different-horizontal-page-menu-list/

but I can't figure out how to use it.
0
 
jeremyjared74Commented:
You can use the tutorial I made for Experts Exchange for a horizontal nav menu.

I'm not sure how much of the header.php menu you want to keep, but to replace it all, add this to replace the search bar, and all navigation previously shown.

Here is the complete header.php to use:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><?php bloginfo('name'); ?> &mdash; <?php bloginfo('description'); ?></title>
<link href="<?php bloginfo('stylesheet_directory'); ?>/assets/stylesheets/master.css" rel="stylesheet" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<style>
li.cat-item, li.page_item{width:<?php echo gal_width()?>px; margin-right: <?php echo gal_gap(); ?>px}
input.search{padding-left: <?php echo gal_gap(); ?>px;}
.attachment object, .attachment embed, .attachment iframe{width: <?php echo gal_width() * 3 + gal_gap() * 2; ?>px !important;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/javascripts/grid-a-licious.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/javascripts/plugins.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/javascripts/init.js"></script>
<script type="text/javascript"> 
settings.gap = <?php echo gal_gap(); ?>;
settings.width = <?php echo gal_width(); ?>;
settings.max_cols = <?php echo gal_max_cols(); ?>;
settings.center = <?php echo gal_center(); ?>;
settings.speed = <?php echo gal_speed(); ?>;
settings.duration = <?php echo gal_duration(); ?>;
settings.easing = '<?php echo gal_easing(); ?>';
</script> 
<?php wp_head(); ?>
</head>
<body>
<div id="loader"></div>
<div id="content">
<div class="post allcols">
        
        <div class="menuitem" style="width:<?php echo gal_width()*2+gal_gap()*2;?>px">
                <strong><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></strong>, <?php bloginfo('description'); ?>
        </div>

 <div id="nav">
<?php wp_nav_menu( array('menu' => 'main' )); ?>
                </div>
        
</div>

<div id="page" class="opencols"></div>

Open in new window


Here is a little css to get you started:

 
#nav {
margin-left : 10%;
margin-top : 25px;
position : relative;
width : 62%;
padding : 0;
background : transparent;
}
#menu-main {
top : 0;
padding : 0;
line-height : 100%;
width : 90%;
}
#menu-main li {
margin : 0 2px;
letter-spacing : -0.05em;
padding : 0 0 8px;
float : left;
position : relative;
list-style : none;
}
#menu-main a {
color : #0090ff;
text-decoration : none;
display : block;
padding : 8px 20px;
margin : 0;
}
#menu-main a:hover {
color : white !important ;
}
#menu-main .current a, #menu-main li:hover > a {
background : #d1d1d1;
background : grey;
background : transparent;
color : #444;
border-top : 1px solid #f8f8f8;
}
#menu-main ul li:hover a, #menu-main li:hover li a {
border : none;
color : #666;
}
#menu-main ul a:hover {
background : #0399d4 !important ;
color : #fff !important ;
}
#menu-main ul {
background : #ddd;
display : none;
margin : 0;
padding : 0;
width : 200px;
position : absolute;
top : 35px;
left : 0;
border : 1px solid #b4b4b4;
}
#menu-main li:hover > ul {
display : block;
}
#menu-main ul li {
float : none;
margin : 0;
padding : 0;
}
#menu-main ul a {
font-weight : normal;
}
#menu-main ul ul {
left : 200px;
top : -3px;
}
#menu-main:after {
content : ".";
display : block;
visibility : hidden;
line-height : 0;
height : 0;
}
#menu-main {
display : inline-block;
}
html[xmlns] #menu-main {
display : block;
}
* html #menu-main {
height : 1%;
}
#main-nav:after {
content : ".";
display : block;
visibility : hidden;
line-height : 0;
height : 0;
}
#main-nav {
display : inline-block;
}
html[xmlns] #main-nav {
display : block;
}
* html #main-nav {
height : 1%;
}

Open in new window


Here is a link to the article:
http://www.experts-exchange.com/Web_Development/Blogs/WordPress/A_4520-Create-a-WordPress-Horizontal-Navigation-Menu.html
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now