2014-05-23 42 views
-1

网页:http://nickliddell.com/pieres如何将此菜单栏与我的页眉底部对齐?

的header.php:

<?php 
/** 
* The Header for our theme. 
* 
* @package WordPress 
*/ 
global $cubby_options; 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html <?php language_attributes(); ?>> 
<head> 
<meta charset="<?php bloginfo('charset'); ?>" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title> 
<?php wp_title('|', true, 'right'); ?> 
</title> 
<?php wp_head(); ?> 
</head> 
<body <?php body_class(); ?>> 
<center> 
<div class="header"> 
    <div class="top"> 
    <div class="container"> 
     <div class="contact left"> 
     <?php echo cubby_options_array('top_contact_info') ; ?> 
     </div> 
     <div class="follow right"> <?php echo cubby_get_social_network(array("skype","facebook",'twitter','google_plus','youtube',"linkedin",'pinterest','rss'));?> </div> 
    </div> 
    </div> 
    <div class="top2"> 
    <div class="container"> 

     <div class="logo left"><a href="<?php echo esc_url(home_url('/')); ?>"> 
     <?php if (cubby_options_array('logo')!="") { ?> 
     <img src="<?php echo cubby_options_array('logo'); ?>" alt="<?php bloginfo('name'); ?>" /> 
     <?php }else{ ?> 
     <span class="site-name"> 
     <?php bloginfo('name'); ?> 
     </span> 
     <?php }?> 
     </a><span class="tagline"><?php echo get_bloginfo('description');?></span></div> 
    </div> 
    <div display:table-cell; vertical-align:bottom;> 
    <?php do_action('wp_menubar','Home'); ?> 
    </div> 

    </div> 
</div> 
</center> 
<!--header--> 

在代码的最下方,你会看到

<?php do_action('wp_menubar','Home'); ?> 

这是我的菜单栏。 看着我的页面,我怎么能把菜单栏放在我的页眉底部,以便它与页眉图像的底部对齐?

+0

只要将它从搬出' .top2'元素并放置在它旁边。 –

+0

你试过了'position:relative; left:0; bottom:0'? – Apolo

+0

top2类似乎有20px的填充顶部。如果你删除它,并使用top2之外的菜单移动div,它似乎解决了这个问题。 – Akatosh

回答

0

你需要一个类添加到菜单DIV,并添加像这样的CSS指令:

.top2 .menu_bottom{ 
    display: block; 
    position: absolute; 
    width: 100%; 
    bottom: -20px; 
} 
.top2 { 
    position: relative; 
} 

的HTML必须是这样的:

<div class="menu_bottom"> 
<!-- WP Menubar 5.1: start menu Home, template Basic_46, CSS b-blue.css --> 
    <div class="b-blue-before"></div> 
    <div class="b-blue"> 
     <a href="#">Home</a> 
     <a href="http://www.nickliddell.com/pieres/tours/">Tours</a> 
     <a href="http://www.nickliddell.com/pieres/calendar/">Calendar</a> 
    </div> 
    <div class="b-blue-after"></div> 
    <!-- WP Menubar 5.1: end menu Home, template Basic_46, CSS b-blue.css --> 
</div>