Question

我有一个小问题，不知道如何解决。我将链接菜单插入标题中的my site，似乎菜单具有固定的尺寸，因此由于空间限制，登录网址会下降。我想用徽标内嵌。我试着通过CSS进行调整：

.nav-menu-item-7776.menu-item menu-item-type-post_type menu-item-object-page  
narrow{
margin-top:-150px;
}

nav-menu-item-7776是登录网址的元素。

但似乎没有任何效果。有人帮我这个吗？

Answer 1

只需像这样更新图标CSS：

nav.main_menu>ul>li>a>i {
    margin: 0 8px 0 5px;
    position: absolute;
    top: 38px;
}

Answer 2

更新/添加这些样式

.header_bottom .container_inner {
    position: relative;
    display: flex;
}

nav.main_menu.right {
    position: relative;
    left: auto;
    margin-left: auto;
    display: flex;
}

.dark nav.main_menu>ul>li>a {
    display: flex;
       align-items: center;
}

同时删除logo_wrapper类中的所有样式。

同时将购物车保持在导航元素

中

<nav class="main_menu drop_down right">
   <ul id="menu-top_menu" class="">
      <li id="nav-menu-item-7687" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home  narrow"><a href="http://3hmarketplace.com/" class=" current "><i class="menu_icon fa blank"></i><span>Home</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7165" class="menu-item menu-item-type-custom menu-item-object-custom  narrow"><a href="#" class=""><i class="menu_icon fa blank"></i><span>About Us</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7716" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/health/" class=""><i class="menu_icon fa blank"></i><span>Health</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7717" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/hygiene/" class=""><i class="menu_icon fa blank"></i><span>Hygiene</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7705" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/happiness/" class=""><i class="menu_icon fa blank"></i><span>Happiness</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7723" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/contact-us/" class=""><i class="menu_icon fa blank"></i><span>Contact Us</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7776" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/my-account/" class=""><i class="menu_icon fa fa-user"></i><span>Login</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7774" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/shop-product-list/" class=""><i class="menu_icon fa blank"></i><span>Shop</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
   </ul>
   <div class="header_inner_right">
      <div class="shopping_cart_outer">
         <div class="shopping_cart_inner">
            <div class="shopping_cart_header">
               <a class="header_cart" href="http://3hmarketplace.com/cart/"><i class="fa fa-shopping-cart"></i></a>
               <div class="shopping_cart_dropdown" style="height: 0px;">
                  <div class="shopping_cart_dropdown_inner">
                     <ul class="cart_list product_list_widget">
                        <li>No products in the cart.</li>
                     </ul>
                  </div>
                  <a href="http://3hmarketplace.com/cart/" class="qbutton view-cart">CART <i class="fa fa-shopping-cart"></i></a>
                  <span class="total">Total:<span><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">AED</span>&nbsp;0.00</span></span></span>
               </div>
            </div>
         </div>
      </div>
      <div class="side_menu_button_wrapper right">
         <div class="side_menu_button"></div>
      </div>
   </div>
</nav>

如何将所有菜单项与徽标一起放置？

2 个答案: