将我的主导航定位在我的中心徽标下方。包括图像

时间：2013-10-04 11:24:45

标签： php html css wordpress nav

您好我想编辑我的CSS，使我的主导航设备位于我的徽标下方，该徽标将居中。

现在看起来像这样

This is how it looks like right now this

我希望它看起来像这样

this is how I wang it to be.

这就是我的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 -->

3 个答案:

答案 0 :(得分：1)

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

答案 1 :(得分：1)

我们需要在这里查看相当多的内容，我将逐一列出。

  1. 内容目前显示为table-cell，其中left-links，logo和right-links为3个单元格（每个单元格都有一个唯一的width）。因此，如果不修改HTML，也不可能实现预期的结构。
  2. 首先将整个div作为left-links的班级移到div之外，班级为large-12 columns header-container。将display的CSS left-links属性更改为table-row（考虑与<tr>标记的内容相同）。
  3. 将display的{​​{1}}也变为#masthead .header-container，将table-row更改为75％。因此height和logo有效地是表格中第一行的一部分，right-links是第二行的一部分。
  4. 将left-links的{​​{1}}更改为100％，以便占据整个宽度并居中。
  5. 最后删除width的{​​{1}}，并将logo的{​​{1}}设为float。

    6. 注意：这是一个hacky解决方案而不是最佳解决方案。但这会使标记的变化尽可能小。

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

答案 2 :(得分：0)

我在codepen上创建了一个demo，检查这是否对你有所帮助。 如果你支持IE7，那么你需要给“.headerLeft”宽度。 我在css中评论了这段代码。

click here for demo

相关问题
最新问题