Announcement

Collapse
No announcement yet.

Global Minibasket

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • andrewbond
    started a topic Global Minibasket

    Global Minibasket

    I am trying to align the <mvt:item name="global_minibasket" /> to the right of the login/register links in my header. No matter what I do, it seems to drop down the the line below. Here is the link to the site. Thanks..

    http://dyerpackaging.com.mymiva.com/...vc?Screen=SFNT

  • Scot - ScotsScripts.com
    replied
    That's interesting, something is really forcing it to the next line but I can't see what it is in the inspector. Since you're using boostrap you can force the cart icon into that line by using bootstrap css for rows and columns. Try this.

    Move the H2 tag to just above the search form tag and then do this to the other stuff:

    <div class="row">
    <div class="col-md-6">
    <a href="http://dyerpackaging.com.mymiva.com/mm5/merchant.mvc?Screen=LOGN">Register</a> / <a href="#login" role="button" data-toggle="modal">Log In</a>
    </div>
    <div class="col-md-6">
    <a href="#cart" role="button" data-toggle="modal" class="basket-count hidden-xs"><i class="icon-shopping-cart"></i> <span class="hidden-xs hidden-sm">44</span> <i class="icon-caret-down"></i></a>
    <!-- XS a tags -->
    <a href="#cart" role="button" data-toggle="modal" class="hidden-lg hidden-md hidden-sm xs-cart"><i class="icon-shopping-cart"><span>44</span></i></a>
    </div>
    </div>

    The whole block would look like this:

    <div class="hlinks col-md-3 col-sm-4 hidden-xs">
    <div class="row">
    <div class="col-md-6">
    <a href="http://dyerpackaging.com.mymiva.com/mm5/merchant.mvc?Screen=LOGN">Register</a> / <a href="#login" role="button" data-toggle="modal">Log In</a>
    </div>
    <div class="col-md-6">
    <a href="#cart" role="button" data-toggle="modal" class="basket-count hidden-xs"><i class="icon-shopping-cart"></i> <span class="hidden-xs hidden-sm">44</span> <i class="icon-caret-down"></i></a>
    <!-- XS a tags -->
    <a href="#cart" role="button" data-toggle="modal" class="hidden-lg hidden-md hidden-sm xs-cart"><i class="icon-shopping-cart"><span>44</span></i></a>
    </div>
    </div>
    <h2 class="headers">1-888-ZIP-BAGS</h2>
    <form method="post" action="//dyerpackaging.com.mymiva.com/mm5/merchant.mvc?Screen=SRCH" class="form-inline clearfix center-block" role="form">
    <div class="form-group col-xs-10">
    <input type="text" name="Search" value="" id="search" class="form-control" placeholder="Search Products">
    </div>
    <button type="submit" class="btn btn-default"><i class="icon-search"></i></button>
    </form>
    </div>

    Leave a comment:


  • Matt Zimmermann
    replied
    The display of that element is controlled through the visibility classes in Bootstrap which is utilizing !important. To override this, you will need to add something like this to your styles.css file:
    Code:
    .basket-count.hidden-xs {
        display: inline-block !important;
    }

    Leave a comment:


  • andrewbond
    replied
    Its not the pop up box I want to align, Just the cart icon/basket count/icon-caret-down. Is that so difficult?

    Leave a comment:


  • Matt Zimmermann
    replied
    The Base ReadyTheme is based on an older flavor of Bootstrap. The mini-basket is show appears in a light-box/modal view. Unfortunately, there is no easy way to control how the modal appears. You may try overwriting the code modal CSS in your theme file, but that could get a bit messy.

    Leave a comment:

Working...
X

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept