-
Posts
-
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?
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?
Looks OK on iPad.
Thanks,
Thomas
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
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
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
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
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
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
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?
Thanks
Thomas
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 rotationand line 808 looks like
//check if the browser supports element rotationSo 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
- The topic ‘boxed layout and cart icon problem’ is closed to new replies.