Php 将主导航定位在居中徽标下方。包括图像
嗨，我想编辑我的css使我的主导航去下面我的标志，这将是中心Php 将主导航定位在居中徽标下方。包括图像,php,html,css,wordpress,nav,Php,Html,Css,Wordpress,Nav,嗨，我想编辑我的css使我的主导航去下面我的标志，这将是中心 <?php if($flatsome_opt['logo_position'] == 'left') : ?> <div id="logo" class="logo-left"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" tit
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link"><?php _e('Login', 'woocommerce'); ?></a>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link"><?php _e('Login', 'woocommerce'); ?></a>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link"><?php _e('Login', 'woocommerce'); ?></a>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
/* -- header layout -- */
#masthead .row {
height: 100%; }
#masthead .header-container {
display: table;
height: 100%;
width: 100%; }
#masthead .left-links {
display: table-cell;
vertical-align: middle; }
#masthead .right-links {
display: table-cell;
vertical-align: middle; }
#masthead .left-links > ul {
float: left;
padding-top: 15px;
margin-left: 15px; }
#masthead .right-links > ul {
float: right;
padding-top: 15px; }
/* -- sticky header -- **/
#masthead.stuck {
opacity: 0.95;
position: fixed;
top: -200px;
left: 0;
right: 0;
z-index: 100;
-webkit-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.2); }
#masthead.stuck:hover {
opacity: 1; }
#masthead.stuck.move_down {
height: 70px;
top: 0; }
#masthead.stuck.move_down .catalog-mode-header, #masthead.stuck.move_down .left-links > ul, #masthead.stuck.move_down .right-links > ul,
#masthead.stuck.move_down #logo a {
padding: 0 !important; }
#masthead.stuck.move_down #logo a {
float: none; }
#masthead.stuck.move_up {
top: -300px; }
/* -- boxed header style --*/
.boxed #masthead {
max-width: 71.25em;
width: 100%;
left: auto;
right: auto; }
.boxed #masthead.stuck {
left: auto;
right: auto; }
/* -- centered logo -- */
.logo-center #masthead .left-links {
width: 40%; }
.logo-center #masthead .right-links {
width: 40%; }
.logo-center #masthead #logo {
width: 20%;
text-align: center; }
.logo-center #masthead .left-links > ul {
margin-left: 0; }
.logo-center #masthead .left-links > ul > li {
margin-left: 0;
margin-right: 20px; }
/* -- navigation -- */
ul.header-nav {
margin: 0; }
ul.header-nav li {
float: left;
margin-left: 20px;
list-style: none; }
ul.header-nav li a {
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
transition: all 200ms ease-out;
text-transform: uppercase;
font-size: 80%;
font-weight: bold;
padding: 10px 0; }
.right-links > ul.header-nav {
white-space: nowrap; }
.right-links > ul.header-nav > li {
display: inline-block !important;
float: none; }
/* -- navigation -- */
ul.header-nav {
margin: 0; }
ul.header-nav li {
float: left;
margin-left: 20px;
list-style: none; }
ul.header-nav li a {
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
transition: all 200ms ease-out;
text-transform: uppercase;
font-size: 80%;
font-weight: bold;
padding: 10px 0; }
.right-links > ul.header-nav {
white-space: nowrap; }
.right-links > ul.header-nav > li {
display: inline-block !important;
float: none; }
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link"><?php _e('Login', 'woocommerce'); ?></a>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link"><?php _e('Login', 'woocommerce'); ?></a>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
-
-
- 在外观>菜单中定义主导航
-
- 在外观>菜单中定义我的帐户下拉菜单
-
为此使用css的“页边距顶部”和“页边距左侧”属性。尝试不同的值，它将为您提供解决方案。我已经在codepen上创建了一个演示，请检查这是否对您有帮助。
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link"><?php _e('Login', 'woocommerce'); ?></a>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link"><?php _e('Login', 'woocommerce'); ?></a>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
这里有很多东西我们需要看，我将一一列出
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link"><?php _e('Login', 'woocommerce'); ?></a>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
表格单元格左链接徽标右链接宽度的整个div
左链接移动到类为的div
标题容器之外。将左链接
的CSS显示
属性更改为表行
（考虑与
标记的作用相同）
#masthead.header容器的显示
也更改为表格行
，并将高度
更改为75%。因此，实际上，徽标
和右链接
是表中第一行的一部分，左链接
是第二行的一部分徽标的宽度
更改为100%，使其占据整个宽度并居中ul.header-nav li的float
，并将的显示设置为表格单元格
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link"><?php _e('Login', 'woocommerce'); ?></a>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
注2:由于所有这些更改，下拉菜单的位置受到了一些影响。一旦我有了解决方案，我也会更新答案。你能提供你的HTML吗？给我们看看你的HTML代码。@Harry HTML代码提供了。非常感谢您将UL display属性设置为“Block”并删除float属性。@StefanDunn没有移动我应该保持宽度不变吗？非常感谢，除了您所说的下拉菜单外，效果非常好
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search"></a>
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link"><?php _e('Login', 'woocommerce'); ?></a>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->