-
Posts
-
I’m setting up a website with a shopping cart plugin using Tempera however I’m having one little issue. I performed the “Minimal step by step tutorial for debugging”… 1. Switched themes and the issue went away. I tried it on 4 different themes and the other themes looked fine including a couple from Cryout Creations.
The new shopping cart has a link you can setup to view it’s cart contents. I set the link to only appear if there is an item in the shopping cart. It’s hidden when there are no items in the cart. This cart link can be set to appear in the Main Menu, the Top Menu or the Footer Menu. When put in the Footer Menu or the Top Menu, the link looks fine. However I want to use it in the Main Menu (red bar in the header… I don’t use the top menu and I don’t want it in the footer).
When the cart link appears as an item is added to the cart, the format in the Main Menu bar get messed up. You can see what I’m talking about by doing the following:
Go to the following page…
https://stompin-ground.com/store/rmc-1-limited-edition/
For this example, please do not use the other 3 Main Menu choices (Products, Info, View Cart) as those are not connected to the shopping cart I’m setting up. Those link to the current live site/cart navigation and do not apply to this example.
Notice the Main Menu bar looks normal and keep in mind the “new” view cart button is hidden. The current “View Cart” text link is for a different cart not connected to wordpress so please ignore it.
From that page, add the item to your shopping cart.
Now the menu bar gets messed up. There is supposed to be a small shopping cart icon and the item count and the cart dollar amount shown on one line such as: [icon] (1 item $235.00). It looks fine in other themes and also in the Tempera Top and Footer menus but not in the Main Menu.
I have tried using Google Developer Tools to look at the CSS and tried to tweak some things but was not able to get it right. I did get it on one line by unchecking the “display: block” line
#access a span {
/* display: block; */
padding: 10px 13px;
}but the bar format still is not right. I would really appreciate some help on this as I really want to use the link. It works and looks great in the top and footer and in other themes. Can you help me?
Thank you very much for your time and help on this issue.
Best Regards, Troy
Stompin-Ground.comTempera adds extra padding on main menu items to obtain the right appearance, and the custom menu item uses several inner elements that each get this padding.
You can try this CSS:
#access .ec_menu_mini_cart span { display: inline-block; } #access .ec_menu_mini_cart span span { padding: 0; }but it won’t look perfect, mostly because the icon container has some inline styling that shouldn’t be there.
If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.Thank you for getting me on track. I added your css and then I was able to tweak some additional css from that point and got it looking good. I owe you some coffee and will take care of that soon.
All the best, TroyFWIW, here’s what I did… I made a couple things transparent that poked through in the wrong place, added “dashicons” to the font family and nudged some padding a bit and wallah!
________________ADDED CSS__________________
#access > .menu > ul > li > a > span {
border-color: rgba(225, 0, 0, 0) !important;
box-shadow: 2px 0 0 rgba(255, 24, 24, 0) !important;
border-right: 5px solid transparent;
font-family: Arial Black, dashicons, Gadget, sans-serif;
}
#access a span {
padding: 10px 20px;
}
.dashicons, .dashicons-before:before {
line-height: 1.2;
}
The topic ‘Main menu glitch with shopping cart item’ is closed to new replies.