-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;
}
可以分享網站的鏈接和你想要實現的屏幕截圖。 –
你的html代碼在哪裏? –
我需要你限制代碼的排除故障到一個較小的數量。 –