中心菜单项目

-1

我目前正在本地开发一个WordPress的网站，并使用了主题菜单，我似乎无法弄清楚如何将菜单项居中，它们当前位于左侧。代码取自主题，但我创建了一个儿童主题。疯狂试图找出这一个，我可能没有做过简单的事情，任何帮助表示赞赏！由于中心菜单项目

这是header.php文件：

<!-- Header --> 
    <header id="header" class="cf"> 
     <div class="in"> 
      <section class="logo-box <?php echo (is_active_sidebar('header-call-to-action-sidebar')) ? 'logo-box-header-cta': 'logo-box-no-header-cta'; ?> <?php echo (! is_active_sidebar('header-call-to-action-sidebar') && ! has_nav_menu('top_nav')) ? 'logo-box-full-width': false; ?>"> 
       <?php sds_logo(); ?> 
       <?php sds_tagline(); ?> 
      </section> 

      <aside class="header-widget-container <?php echo (! is_active_sidebar('header-call-to-action-sidebar') && ! has_nav_menu('top_nav')) ? 'header-widget-container-no-margin': false; ?>"> 
       <?php if(has_nav_menu('top_nav')) : // Top Navigation Area ?> 
        <nav class="top-nav"> 
         <?php 
          wp_nav_menu(array(
           'theme_location' => 'top_nav', 
           'container' => false, 
           'menu_class' => 'top-nav secondary-nav menu', 
           'menu_id' => 'top-nav' 
          )); 
         ?> 
        </nav> 
        <section class="clear"></section> 
       <?php endif; ?> 

       <?php if (is_active_sidebar('header-call-to-action-sidebar')) : ?> 
        <section class="header-cta-container header-call-to-action"> 
         <?php sds_header_call_to_action_sidebar(); // Header CTA Sidebar ?> 
        </section> 
       <?php endif; ?> 
      </aside> 
     </div> 

     <!-- main nav --> 
     <nav class="primary-nav-container"> 
      <div class="in"> 
       <?php 


        wp_nav_menu(array(
         'theme_location' => 'primary_nav', 
         'container' => false, 
         'menu_class' => 'primary-nav menu', 
         'menu_id' => 'primary-nav', 
         'fallback_cb' => 'sds_primary_menu_fallback' 
        )); 
       ?> 
      </div> 

      <button class="mobile-nav-button"> 
       <img src="<?php echo get_template_directory_uri(); ?>/images/menu-icon-large.png" alt="<?php esc_attr_e('Toggle Navigation', 'socialize'); ?>" /> 
       <img class="close-icon" src="<?php echo get_template_directory_uri(); ?>/images/close-icon-large.png" alt="<?php esc_attr_e('Close Navigation', 'socialize'); ?>" /> 
       <?php _e('Navigation', 'socialize'); ?> 
      </button> 
      <?php soc_mobile_menu(); ?> 
     </nav> 
    </header>

这是style.css中：

nav.primary-nav-container { 
    position: relative; 
    z-index: 5; 
    background: #ffffff; 
    width: 100%; 
    float: left; 
    margin-top: 20px; 
    border-top: 1px solid #8d7249; 
    text-align:center; 
} 

nav .primary-nav{ 
    width: 100%; 
    display: inline-block; 
    clear: both; 
    position: relative; 
    float: left; 
    margin: 0 auto; 
} 

nav .primary-nav li{ 
    float: left; 
    position: relative; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
    border-right: 1px solid #8D7249; 
} 

nav .primary-nav li a{ 
    float: left; 
    text-decoration: none; 
    color: #8D7249; 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: 15px 25px; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
    border-right: 0.5px solid #8D7249; 
    border-bottom: 0.5px solid #8D7249; 
    border-top: 0.5px solid #8D7249; 
} 

nav .primary-nav li:first-child a{ 
    border-left: 1px solid #8D7249; 
} 

nav .primary-nav li a:hover{ 
    background: #F5D0c5; 
} 

li.current_page_item { 
    background: #F5D0c5; 
} 

nav .primary-nav li ul.sub-menu, nav .primary-nav li ul.children { 
    width: auto; 
    position: absolute; 
    top: 100%; 
    display: none; 
    background: #ffffff; 
    z-index: 999; 
} 

/* Third Level */ 
nav .primary-nav li ul.sub-menu li ul.sub-menu, nav .primary-nav li ul.children li ul.children { 
    top: 0; 
    left: 100%; 
} 

nav .primary-nav li ul.sub-menu li ul.sub-menu li, nav .primary-nav li ul.children li ul.children li { 
    float: left; 
} 

nav .primary-nav li ul.sub-menu li, nav .primary-nav li ul.children li { 
    width: auto; 
    min-height: 49px; 
    float: none; 
    display: block; 
    position: relative; 
} 

nav .primary-nav li ul.sub-menu li a, nav .primary-nav li ul.children li a { 
    width: auto; 
    min-width: 12em; 
    margin-bottom: -1px; 
    padding: 15px 25px; 
    border-bottom: 1px solid #8D7249; 
    white-space: nowrap; 
    float: none; 
    display: block; 
} 

nav .primary-nav li ul.sub-menu li:last-child a, nav .primary-nav li ul.children li:last-child a { 
    margin-bottom: 0; 
    border-bottom: 1px solid #8D7249; 
} 

nav .primary-nav li:hover > ul.sub-menu, nav .primary-nav li:hover > ul.children { 
    display: block; 
} 

nav .primary-nav li a:hover{ 
    background-color: #F5D0c5; 
} 

nav ul.primary-nav > li:hover{ 
    background-color: #F5D0c5; 
} 

nav ul.primary-nav > li:hover, nav .primary-nav ul > li:hover { 
    background-color: #F5D0c5; 
} 

/* line 248l 
*/ 

/* ------------------ 
      Navigation Button 
     --------------------- */ 
    .nav-button, .mobile-nav-button { 
    background-color: #ffffff; 
    background: url(images/menu-icon-large-brown.png) center center no-repeat; 
    } 

    .nav-button{ 
     background: url(images/menu-icon-large-brown.png); 
     background-size: 20px; 
     border: 1px solid #8d7249; 
     font-size: 0; 

    } 

    .mobile-nav-button { 
     width: 100%; 
     height: 50px; 
     position: relative; 
     top: auto; 
     left: auto; 
     color: #8d7249; 
     text-indent: 0; 
     overflow: visible; 
     line-height: 1.5em; 
     font-size: 16px; 
     text-transform: uppercase; 
     letter-spacing: 1px; 
     z-index: 2; 
     outline-color:#8d7249; 
    } 

    .nav-button:hover, .mobile-nav-button:hover { 
     background: url(images/menu-icon-large.png); 
     background-size: 20px; 
    } 
    .mobile-nav-button:hover { 
     background: #f5d0c5; 
    } 

    .nav-button.open, .mobile-nav-button.open { 
     background-size: 20px; 
    } 
    .mobile-nav-button.open { 
     background: #fff; 
     color:#8d7249; 
     position: relative; 
     z-index: 5; 
     border-top: 1px solid #8d7249; 
     border-bottom: 1px solid #8d7249; 
     border-bottom-left-radius: 0; 
     border-bottom-right-radius: 0; 
    } 
    nav .mobile-nav { 
     height: auto; 
     float: none; 
     background: transparent; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
     z-index: 2; 
     border-bottom: 1px solid #aaa; 
     box-shadow: 8px 0 6px -2px #000; 
    } 

    nav .mobile-nav li.menu-label { 
     display:none; 
    } 

    nav ul.top-nav li a, nav .mobile-nav li a { 
     display: block; 
     width: 88%; 
     padding: 10px 5%; 
     font-size: 14px; 
     color: #949494; 
     text-decoration: none; 
     border-bottom: 1px solid rgba(141, 114, 73, 1); 
     border-top: 0px solid rgba(141, 114, 73, 1); 
     -webkit-border-radius: 0; 
     border-radius: 0; 
    } 
     nav .mobile-nav li a { 
     width: 92%; 
     color: #8d7249; 
    } 

    nav .mobile-nav li li { 
     background: #ffffff; 
    } 

    nav .mobile-nav li li a { 
     padding-left: 2.5em; 
    } 

    nav .mobile-nav li li a, nav .mobile-nav > li:hover a { 
     color: #fff; 
    } 

    nav .mobile-nav > li:hover { 
     background: #f5d0c5; 
    }

来源

2016-01-22 S.Morris

可以分享网站的链接和你想要实现的屏幕截图。 –

你的html代码在哪里？ –

我需要你限制代码的排除故障到一个较小的数量。 –

你应该尝试像这个 -

nav.primary-nav-container { 
    position: relative; 
    z-index: 5; 
    background: #ffffff; 
    width: 100%; 
    float: left; 
    margin-top: 20px; 
    border-top: 1px solid #8d7249; 
    /*text-align:center;*/ 
} 

nav .primary-nav{ 
    width: 100%; 
    display: inline-block; 
    clear: both; 
    position: relative; 
    float: left; 
    margin: 0 auto; 
    text-align:center; 
} 

nav .primary-nav li{ 
    /*float: left;*/ 
    display:inline-block; 
    position: relative; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
    border-right: 1px solid #8D7249; 
} 

nav .primary-nav li a{ 
    /*float: left;*/ 
    text-decoration: none; 
    color: #8D7249; 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: 15px 25px; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
    border-right: 0.5px solid #8D7249; 
    border-bottom: 0.5px solid #8D7249; 
    border-top: 0.5px solid #8D7249; 
}

我希望我”对你有帮助。

来源

2016-01-22 04:45:43

中心菜单项目

回答

相关问题