Works a treat with UberMenu :)

Hi James,

Glad you like it! Normally the plugin lines up just as you’re wanting. I checked out your site, and it looks like there’s a conflict with a plugin called “My Shortcodes” of which I was previously unaware. I found a fix, and I’ll be sure to add it in the next update. For now, copy the following CSS and paste it into your theme’s custom css file (probably named “custom.css”).

[class^="icon-"], [class*=" icon-"] {
    background-image: none;
    background-position: none;
    background-repeat: no-repeat;
    display: inline-block;
    height: auto;
    line-height: inherit;
    vertical-align: inherit;
    width: auto;
}

Also, if you’re willing I would love if you took what you wrote here and reviewed & rated the plugin on the ratings tab. Thanks for your support! Let me know if you need anything else.

Hi Jprummer,

Thanks for the quick response. The above code pasted into my custom css has indeed done the trick and the trolley is now firmly grounded!

The css editor is showing up a couple of exclamation mark flags though with the code that maybe mean more to you than they do to me.

Next to line #1:
Attribute selectors with ^= are slow!
Attribute selectors with *= are slow!
Unqualified attribute selectors are known to be slow.

Next to line #3:
Expected (<bg-position>) but found ‘none’.

Any idea what these mean and how they should be tweaked accordingly please?

Thanks, James ??

Hi James!

I dug into the css on the other plugin and I think this should do the trick:

.icon-shopping-cart {
    background-image: none;
    background-position: none;
    background-repeat: no-repeat;
    background-position: none;
    display: inline-block;
    height: auto;
    line-height: inherit;
    vertical-align: inherit;
    width: auto;
}

I wouldn’t worry too much about those flags. The “My Shortcodes” plugin is already using that method, so it probably won’t have too much of an impact, but do try the updated code as it should be more efficient. Please let me know what you find. Also, thanks for the review. Much appreciated!

Thanks. I’ve tried the new css code above and this seems to work equally well, but without the line #1 errors I described above. The line #3 exclamation mark is still there, but I will ignore it as you suggest.

One thing I did notice is that the line:

background-position: none;

is repeated twice on lines 3 and 5, so I have removed the second entry and it still seems to work fine, so my css block now looks like this:

* To correct the formatting of the shopping cart trolley in the top menu */
.icon-shopping-cart {
	background-image: none;
	background-position: none;
	background-repeat: no-repeat;
	display: inline-block;
	height: auto;
	line-height: inherit;
	vertical-align: inherit;
	width: auto;
}

So everything looks good in Chrome, so quick check in the dreaded IE9 and strangely both the shopping trolley icon and the associated text are both lifted a tiny fraction (say 0.5mm) above the lien of all the other menu items. I reverted back to your original CSS (and also tried adding in the repeated background-position line) and it is still the same.

Hmmmm….. James

P.S. I’ve reviewed and rated your plugin 5* ??

How do you get the code to show up nicely in the blue box as you have done above? I’ve just been through all the options I can see and nothing seems to work, except the block-quote as I’ve used above which doesn’t look so good ??

My test code...

Oh, I see now – you use:
<pre><code>My test code...</pre></code>

You got it figured out! Thanks for the review. As far as the IE9 issue, I’m not exactly sure what’s going on. My guess is it has to do with the line-height attribute. I’ve set it to inherit, but maybe you need to set it to your font-size (probably something like 16px). Just play with it a bit and see what works best.

Morning.

Ok, so I finally got the line height issue in Internet Explorer and I think it is a css issue with the menu system I have created with the UberMenu plugin.

Usually a completely unscientific trial-and-error approach changing various css lines ‘live’ using the Inspect Element option in Chrome, I tracked the issue down to the following property which is set to 1.2em by default.

#megaMenu ul.megaMenu li a, #megaMenu ul.megaMenu li span.um-anchoremulator {
line-height: 1.4em;
}

I changed it to 1.4em as per the above code and added this to my UberMenu custom css, and it seems to have done the trick! Everything is now all neatly lined up in both Chrome and IE.

Regards, James ??

Further to the above, the block of css code you originally suggested as a fix can be cut down to the following:

/* To correct the height and background of the shopping cart menu item */
.icon-shopping-cart {
  background-image: none;
  vertical-align: inherit;
}

The ‘background-image’ line removed a shadow image behind the shopping trolley icon (which bizarrely seem to be facing the other way to the actual shopping trolley item!).

The ‘vertical-align’ line brings the trolley down on to the same base line as the text.

This seems to be a css styling issue with the UberMenu plugin rather than your shopping cart menu plugin, but thanks for your help in getting it sorted. I will post a thread on the UberMenu plugin website out of interest as it also affects the additional ‘Logout’ link that WooCommerce add at the end of the menu too.

Regards, James

Thread added on UberMenu forum so let’s see what they say:
https://support.sevenspark.com/forum/topic/2369/positioning-of-menu-items-added-by-other-plugins-e-g-woocommerce-logout

Hi Jeremiah,

Just had a reply back on the support thread from the guys at UberMenu, mainly concerning the WooCommerce link but I think you can probably use the same info to tweak the CSS applied to your ‘Menu Cart’ menu item too. Please see here:
https://support.sevenspark.com/forum/topic/2369/positioning-of-menu-items-added-by-other-plugins-e-g-woocommerce-logout

The bit of interest is:

Thanks for the details, that’s helpful. I’ve looked again and found that it is indeed that because the menu item is not produced by UberMenu, it’s not given that line height. I’ll update the next version of UberMenu to better address this. But I also think that the Woo plugin should add the class “menu-item” to its LI so it identified what it’s injected as a menu item. This will help menu CSS to target it better.

Regards, James

Hi James,

Thanks for letting me know. We’ve been working on the next release and it will fix all these issues. You may have to make some slight modifications after you update since the default styles will fix most of the issues you’re having. I’m going to go ahead and mark this one as resolved as this will be arriving soon. ??

Just installed the WooCommerce ‘Currency Converter’ plugin, to allow customers to display prices in their chosen currency, see here:
https://www.woothemes.com/products/currency-converter-widget/

Great to see that the Menu Cart also changes between currencies (when ‘display price’ option) is selected as you click between the different options.

Great job, rating increased to 6 stars (if only I could!) ??

Wait until you see the next release, today or tomorrow, 7 stars i bet! :o)

Great update, still works a treat but with even more options ??

With regards to UberMenu (as per my other post in this support forum) I’ve found that the UberMenu CSS overrides the MenuCart CSS so the alignment option doesn’t have any effect. But this is easily fixed with the following code in your custom css files:

/* To over-ride UberMenu with correct MenuCart plugin alignment */
.wcmenucart-display-right {
	float: right!important;
}

Just thought I’d append this here as it’s a better titled thread for anyone searching on this subject in the future….

Thanks guys, James