php - 将我的主要导航定位在我的居中徽标下方。包含图片

Question

嗨，我想编辑我的 css，使我的主导航位于我的徽标下方，该徽标将居中。

现在看起来像这样

我希望它看起来像这样

这就是我的css的样子。非常感谢您为我提供的任何帮助

/* -- 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; }

HTML

                <?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 -->

Answer 1

为此，请使用 css 的 margin-top 和 margin-left 属性。尝试不同的值将为您提供解决方案。

Answer 2

这里需要看的东西不少，我会一一列举。

1. 内容当前显示为table-cell,left-links和3logo个right-links单元格（每个单元格都有一个唯一的width）。因此，如果不修改 HTML，就不可能实现预期的结构。
2. 首先将整个divwith class as移动到 with class asleft-links之外。将 CSS属性更改为（考虑与标记的作用相同）。divlarge-12 columns header-containerdisplayleft-linkstable-row<tr>
3. display将for#masthead .header-container也更改为table-rowandheight为 75%。所以实际上logoandright-links是表中第一行的left-links一部分，并且是第二行的一部分。
4. width将for更改为logo100%，使其占据整个宽度并居中。
5. 最后删除floatfor并将forul.header-nav li设置display为。#masthead .left-links > ultable-cell

注意：这更像是一种 hacky 解决方案，而不是最佳解决方案。但这会使对标记的更改尽可能小。

注意 2：由于所有这些更改，下拉菜单的位置会受到一些影响。一旦我也有解决方案，我会更新答案。

Answer 3

我在 codepen 上创建了一个演示，检查是否对您有帮助。如果您支持 IE7，那么您需要为“.headerLeft”指定宽度。我已经在 css 中注释了该代码。

点击这里进行演示