Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #23568

    Problems with the cart icon in boxed layout:

    IE10/IE8 : the icon appears on the upper right corner of the background image, not on the upper right corner of the body… so this is icon is a bit far from the rest of the content.Quite confusing for the users. Is there a way to correct this?

    http://imgur.com/17mBLqt

    FF20 : the icon appears on the right of the page title bar, but 90% of the icon (and the cart content window) is missing. How can we reposition it?

    http://imgur.com/ciMfjNK

    Looks OK on iPad.

    Thanks,

    Thomas

    #120320

    Hi,

    The cart button is fixed position it will move when you scroll up and down. It will be visible no matter where you are on the website.

    Try to add this on your custom.css

    .cart_dropdown .dropdown_widget {
    z-index: 999 !important;
    }

    Regards,

    Ismael

    #120321

    Hi Ismael,

    Thanks for your answer.

    You’re right, the cart position is OK while srolling upwards/downwards, but the problem here is that the cart logo is not well positioned left-right, in boxed layout.

    I added your code to custom.css but unfortunately it doesn’t help.

    In IE : the cart is on the upper right corner of the background page, not in the upper right corner of the ‘box’, which is confusing because it’s far away from the ‘activity zone’.

    IN FF : the cart position is in the upper right corner of the ‘box’, but only 5% is visible (left-right) because it’s cut by the background page.

    See what I mean?

    Thanks,

    Thomas

    #120322

    HI,

    Unfortunately I don’t, because there is no link for me to look at. Please provide one so that we can give you code that will work on yoursetup instead of guessing.

    Thanks,

    Nick

    #120323

    Hi Nick,

    Thanks for the update.

    Please have a look here http://goo.gl/Hm4rH

    Thanks,

    Thomas

    #120324

    Hi,

    Now I do. Thank you.

    The IE pretty much looks same as Chrome while FF shows a barely visible shadow. Please add this FF fix to your /css/custom.css or to Quick CSS located in Enfold > Styling … text area on the bottom of the page

    .cart_dropdown_first .cart_dropdown_link {
    position: relative ;
    left: -45px;
    }

    Thanks,

    Nick

    #120325

    Hi Nick,

    I added your code to custom.css, and here are the results.

    IE : the cart icon is moved to the left, but does not ‘stick’ to the edge of the box (I mean, the content window). I changed the left position from -45px to -145px, in order to get close to the box, but it’s probably not the best way to solve this as the cart icon floats in the middle of nowhere when using another screen resolution.

    FF : no change at all… it seems it’s just ignoring the new settings.

    Thanks,

    Thomas

    #120326

    Hi,

    Ok. Please remove the previous code and use this instead. It will anchor it this time.

    #top .cart_dropdown.visible_cart {
    right: -1px;
    top: 21px;
    display: inline-block;
    position: absolute;
    }

    Thanks,

    Nick

    #120327

    Perfect ! It works well now!

    Thanks a lot,

    Thomas

    #120328

    one more thinG maybe a detail but, when scrolling down the site, thus showing the mini-menu bar, the cart icon is no more aligned with the rest of the menu… can we do something?

    http://goo.gl/Hm4rH

    Thanks

    Thomas

    #120329

    Hi,

    Well there is no room for it, so lets push the menu a little to the left.

    #top .main_menu {
    right: 32px;
    }

    —-

    You can try this block to reposition the cart. Just take out the one you put in before that I gave you

    #top .cart_dropdown.visible_cart {
    right: -1px;
    top: -2px;
    display: inline-block;
    position: absolute;
    }

    If you don’t like that, the only thing I can suggest is to reposition the basket at the same time when the logo shrinks

    Please open up /js/avia.js and find the block of code 763-807

    line 763 looks like

    //check if the browser supports element rotation

    and line 808 looks like

    //check if the browser supports element rotation

    So delete everything between lines 763 and 808, and in that place paste the code below

    function avia_header_size()
    {
    var win = $(window),
    header = $('.fixed_header #header'),
    basket = $('.cart_dropdown'),
    logo = header.find('.logo img'),
    elements = $('#header_main .container, .main_menu ul:first-child > li > a:not(.avia_mega_div a)'),
    el_height = $(elements).filter(':first').height(),
    newTop = 0,
    isMobile = 'ontouchstart' in document.documentElement,
    scroll_top = $('#scroll-top-link'),
    set_height = function()
    {
    var st = win.scrollTop(),
    newH = 0;
    if(st < el_height/2)
    {
    newH = el_height - st;
    newTop = -2;
    }else
    {
    newH = el_height/2;
    newTop = 21;
    }elements.css({
    height: newH + 'px',
    lineHeight: newH + 'px'
    });
    basket.css({
    top: newTop + 'px'
    });
    }if(!header.length) return false;
    if(isMobile)
    {
    return false;
    }win.scroll(set_height);
    set_height();
    }

    Thanks,

    NIck

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘boxed layout and cart icon problem’ is closed to new replies.