Question

的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'); ?>

这是我的菜单栏。查看我的页面，如何将菜单栏放在标题的最底部，使其与标题图像的底部对齐？

Answer 1

您需要在菜单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>

如何将此菜单栏与标题底部对齐？

1 个答案: