Question

My URL: love splash panic

I added a “Free Shipping on orders over $50” to my header. How can I get this element to not slide left and right when zooming?

The CSS I’m using: .shipping {position:relative; top:100px; right:-1000px;}

Answer 1

Move your <a> element inside of the following divs (immediate childs of the body): body > #header-wrapper > #header.container > .margin.clearfix > a.shipping

After doing this, change the styles as follows:

#header .shipping {
     position: absolute;
     right: 83px;
     top: -35px;
}

The reason the anchor was moving was because it was relative to its position to the left edge of the screen, causing it to stay towards the left side when zooming out. After doing this, it will instead be relative to the #header div, which is centered, and stays that way when zooming out.