WooCommerce storefront header cart : make dropdown cart contents wider and drop to left (right-aligned)How to add a image banner to the top of the woocommerce shop base pageResponsive woocommerce catalogue image width issue - image widths are being condensed on mobile viewHiding breadcrumbs on cart page in woocommerce with storefront themeChanging header cart text in StorefrontRemove Wordpress WooCommerce StoreFront Header StylesRemove shopping cart menu and align main menu to the right on Storefront themeReplacing Woocommerce Storefront header with a shortcodeWoocommerce replace Storefront header with Elementor headerWoocommerce - header cart icon customization
Is using 'echo' to display attacker-controlled data on the terminal dangerous?
How to befriend someone who doesn't like to talk?
Getting UPS Power from One Room to Another
How can I make 12 tone and atonal melodies sound interesting?
Increase speed altering column on large table to NON NULL
Printing Pascal’s triangle for n number of rows in Python
Who voices the small round football sized demon in Good Omens?
Please figure out this Pan digital Prince
LED not blinking when using a transistor
Electricity free spaceship
Why am I getting a strange double quote (“) in Open Office instead of the ordinary one (")?
2019 gold coins to share
Can a human be transformed into a Mind Flayer?
Separate SPI data
Who won a Game of Bar Dice?
Translating “About that...”
What is the color of artificial intelligence?
Why did the World Bank set the global poverty line at $1.90?
How to avoid typing 'git' at the begining of every Git command
Why the output signal of my amplifier is heavily distorted
Does a bank have to tell me if a check made out to me was cashed there?
Why is Na5 not played in this line of the French Defense, Advance Variation?
Was Self-modifying-code possible just using BASIC?
How do free-speech protections in the United States apply in public to corporate misrepresentations?
WooCommerce storefront header cart : make dropdown cart contents wider and drop to left (right-aligned)
How to add a image banner to the top of the woocommerce shop base pageResponsive woocommerce catalogue image width issue - image widths are being condensed on mobile viewHiding breadcrumbs on cart page in woocommerce with storefront themeChanging header cart text in StorefrontRemove Wordpress WooCommerce StoreFront Header StylesRemove shopping cart menu and align main menu to the right on Storefront themeReplacing Woocommerce Storefront header with a shortcodeWoocommerce replace Storefront header with Elementor headerWoocommerce - header cart icon customization
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm using WooCommerce storefront for my website. I'd like header cart dropdown contents to be wider and drop to left (right-aligned). Since my header cart is at the top right corner of the screen, half the dropdown cart contents disappear into the right side of the screen. How can I make the cart contents drop to the left?
I tried the following:
CSS:
.site-header-cart .widget_shopping_cart
position: absolute;
top: 100%;
width: 100%;
z-index: 999999;
font-size: .875em;
left: -999em;
display: block;
My changes:
.site-header-cart .widget_shopping_cart
position: absolute;
top: 100%;
width: 300px;
z-index: 999999;
font-size: .875em;
left: -999em;
display: block;
right: 0;
but to no avail. Still half the cart contents aren't showing as in the below screenshot.
woocommerce
edited Mar 25 at 3:10
karel
2,43492832
asked Mar 24 at 20:52
CWLocalCWLocal
236
add a comment |
I'm using WooCommerce storefront for my website. I'd like header cart dropdown contents to be wider and drop to left (right-aligned). Since my header cart is at the top right corner of the screen, half the dropdown cart contents disappear into the right side of the screen. How can I make the cart contents drop to the left?
I tried the following:
CSS:
.site-header-cart .widget_shopping_cart
position: absolute;
top: 100%;
width: 100%;
z-index: 999999;
font-size: .875em;
left: -999em;
display: block;
My changes:
.site-header-cart .widget_shopping_cart
position: absolute;
top: 100%;
width: 300px;
z-index: 999999;
font-size: .875em;
left: -999em;
display: block;
right: 0;
but to no avail. Still half the cart contents aren't showing as in the below screenshot.
woocommerce
edited Mar 25 at 3:10
karel
2,43492832
asked Mar 24 at 20:52
CWLocalCWLocal
236
add a comment |
I'm using WooCommerce storefront for my website. I'd like header cart dropdown contents to be wider and drop to left (right-aligned). Since my header cart is at the top right corner of the screen, half the dropdown cart contents disappear into the right side of the screen. How can I make the cart contents drop to the left?
I tried the following:
CSS:
.site-header-cart .widget_shopping_cart
position: absolute;
top: 100%;
width: 100%;
z-index: 999999;
font-size: .875em;
left: -999em;
display: block;
My changes:
.site-header-cart .widget_shopping_cart
position: absolute;
top: 100%;
width: 300px;
z-index: 999999;
font-size: .875em;
left: -999em;
display: block;
right: 0;
but to no avail. Still half the cart contents aren't showing as in the below screenshot.
woocommerce
edited Mar 25 at 3:10
karel
2,43492832
asked Mar 24 at 20:52
CWLocalCWLocal
236
I'm using WooCommerce storefront for my website. I'd like header cart dropdown contents to be wider and drop to left (right-aligned). Since my header cart is at the top right corner of the screen, half the dropdown cart contents disappear into the right side of the screen. How can I make the cart contents drop to the left?
I tried the following:
CSS:
.site-header-cart .widget_shopping_cart
position: absolute;
top: 100%;
width: 100%;
z-index: 999999;
font-size: .875em;
left: -999em;
display: block;
My changes:
.site-header-cart .widget_shopping_cart
position: absolute;
top: 100%;
width: 300px;
z-index: 999999;
font-size: .875em;
left: -999em;
display: block;
right: 0;
but to no avail. Still half the cart contents aren't showing as in the below screenshot.
woocommerce
woocommerce
edited Mar 25 at 3:10
karel
2,43492832
asked Mar 24 at 20:52
CWLocalCWLocal
236
edited Mar 25 at 3:10
karel
2,43492832
asked Mar 24 at 20:52
CWLocalCWLocal
236
edited Mar 25 at 3:10
karel
2,43492832
edited Mar 25 at 3:10
karel
2,43492832
edited Mar 25 at 3:10
karel
2,43492832
2,43492832
asked Mar 24 at 20:52
CWLocalCWLocal
236
asked Mar 24 at 20:52
CWLocalCWLocal
236
asked Mar 24 at 20:52
CWLocalCWLocal
236
236
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Remove your css no need for the position absolute its positioning already exists
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart
left: 0px;
display: block;
this is the standard css for the storefront mini cart as you will see the left is set to 0 meaning it will always go off the left edge of the top
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart
left: -120px;
display: block;
answered Mar 26 at 12:18
Brad HolmesBrad Holmes
14114
Brad Holmes, perfect! wasted hours just for a line of CSS code! Thank you very much.
– CWLocal
Mar 26 at 23:07
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55328456%2fwoocommerce-storefront-header-cart-make-dropdown-cart-contents-wider-and-drop%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Remove your css no need for the position absolute its positioning already exists
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart
left: 0px;
display: block;
this is the standard css for the storefront mini cart as you will see the left is set to 0 meaning it will always go off the left edge of the top
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart
left: -120px;
display: block;
answered Mar 26 at 12:18
Brad HolmesBrad Holmes
14114
Brad Holmes, perfect! wasted hours just for a line of CSS code! Thank you very much.
– CWLocal
Mar 26 at 23:07
add a comment |
Remove your css no need for the position absolute its positioning already exists
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart
left: 0px;
display: block;
this is the standard css for the storefront mini cart as you will see the left is set to 0 meaning it will always go off the left edge of the top
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart
left: -120px;
display: block;
answered Mar 26 at 12:18
Brad HolmesBrad Holmes
14114
Brad Holmes, perfect! wasted hours just for a line of CSS code! Thank you very much.
– CWLocal
Mar 26 at 23:07
add a comment |
Remove your css no need for the position absolute its positioning already exists
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart
left: 0px;
display: block;
this is the standard css for the storefront mini cart as you will see the left is set to 0 meaning it will always go off the left edge of the top
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart
left: -120px;
display: block;
answered Mar 26 at 12:18
Brad HolmesBrad Holmes
14114
Remove your css no need for the position absolute its positioning already exists
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart
left: 0px;
display: block;
this is the standard css for the storefront mini cart as you will see the left is set to 0 meaning it will always go off the left edge of the top
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart
left: -120px;
display: block;
answered Mar 26 at 12:18
Brad HolmesBrad Holmes
14114
answered Mar 26 at 12:18
Brad HolmesBrad Holmes
14114
answered Mar 26 at 12:18
Brad HolmesBrad Holmes
14114
answered Mar 26 at 12:18
Brad HolmesBrad Holmes
14114
14114
Brad Holmes, perfect! wasted hours just for a line of CSS code! Thank you very much.
– CWLocal
Mar 26 at 23:07
add a comment |
Brad Holmes, perfect! wasted hours just for a line of CSS code! Thank you very much.
– CWLocal
Mar 26 at 23:07
Brad Holmes, perfect! wasted hours just for a line of CSS code! Thank you very much.
– CWLocal
Mar 26 at 23:07
Brad Holmes, perfect! wasted hours just for a line of CSS code! Thank you very much.
– CWLocal
Mar 26 at 23:07
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55328456%2fwoocommerce-storefront-header-cart-make-dropdown-cart-contents-wider-and-drop%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
