Ad

Position And Or Float To The Top Right One On Top With Shopify

- 1 answer

I have a section on the very top of the page where it shows these items: search (shown on the top left), login/signup (each are linked to login page or signup page; shown in the middle), and cart (shown on top right). They are all aligned in one block.

I'm trying to make it so that the search is shown where it is now (top left), then the cart is where it is now (top right), but the login/signup should be on top right as well right above the cart.

                                               LOGIN/SIGNUP
SEARCH                                         CART

See this link

I played around with float I couldn't align it properly. I tried to add another div on top of the ul below and float it to the right but it's all a bit misaligned on Shopify liquid template. Any suggestions? Thanks a lot!

<ul class="header-tools clearfix">
    <li class="search accent-text">
       {% include 'search' %}
    </li>
    <li class="account-details">
       {% include 'account-details' %}
    </li>
    <li class="cart-details accent-text">
       <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/cart"><span class="cart-icon">c</span><span class="cart-item-count-wrap">{{ 'cart.mini_cart.item_count_html' | t: count: cart.item_count }}</span> - <span class="cart-amount-wrap money">{{ cart.total_price | money }}</span></a>
    </li>
     </ul>
Ad

Answer

li's are block-level elements. Try using spans and absolute positioning instead. Another solution would be a parent div with clearfix hack and 2 children divs:

<div id="header" class="clearfix">
   <div id="search"></div>
   <div id="loginSignupandCart"></div>
</div>

<style>
.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
#search{
  float: left;
}
#loginSignupandCart{
  float: right;
}
</style>
Ad
source: stackoverflow.com
Ad