在站点标题中垂直居中wp_nav_menu

时间:2017-10-04 14:05:29

标签: css wordpress

如何在我的网站标题中垂直居中解决wordpress功能wp_nav_menu?我使用了learnWebCode菜单教程链接:https://www.youtube.com/watch?v=AShql_Ap1Yo&t=568s

我已设法将其向左移动,因为我想要但在将其实现到我的网站标题时遇到问题。有没有人有洗液?

    <!-- site header -->
    <header class="site-header">
    <div class=container3>
    <h1 class="logo-title"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    </div>


    <nav class="site-nav">


        <?php

        $args = array(
                'theme_location' => 'primary'
        );

        ?>

        <?php wp_nav_menu( $args ); ?>

    </nav>
  </header><!-- site header -->

这是我的css

    /*Navigation Menus*/
    .site-nav ul{
    margin: 0px;
    text-align: center;
    display:inline-block;
    float: right;
    width: auto;
    }

 .site-nav li{
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
  }


  .site-nav ul:before, .site-nav ul:after {
  content ""; display: table;
   }


   .site-nav ul:after {
   clear: both;
   }


   .site-nav ul li {
    list-style: none;
    float: right;
    text-align: center;
     }

    /* Site Header Menu */
    .site-header nav ul li a:link,
    .site-header nav ul li a:visited {
     display: block;
     padding: 10px 20px;
}

1 个答案:

答案 0 :(得分:1)

您可以使用jquery垂直设置菜单中心。使用这个逻辑

var a = jQuery(".site-header").height(); 
        var b = jQuery("nav").height(); 
        var c = (a-b)/2; 
        jQuery("nav").css("padding-top" , c );