Mini cart css when using "Center logo with menu on sides"

[Miryam]

Miryam

November 26, 2016 at 9:50 am

Hi,

when I use header style ‘Center logo with menu on sides’ (header-style-two) the layout of the mini cart in primary_navigation is broken.

This is because the styling for kad-head-cart-popup in nav.less depends on #nav-main; but when using header-style-two the nav does not get id nav-main; it gets class nav-main instead.

I currently fixed it by adding the following custom css (copied from nav.less; replaced #nav-main with .nav-main) to my child theme, but would it be an option that you add this to the core nav.less?

.nav-main ul.sf-menu ul#kad-head-cart-popup ul.cart_list li a {
padding: 0;
padding-right: 20%;
display: inherit;
line-height: 20px;
background: transparent;
}
.nav-main ul.sf-menu ul#kad-head-cart-popup .buttons {
margin: 0;
}
.nav-main ul.sf-menu ul#kad-head-cart-popup ul.product_list_widget li a.remove {
display: block;
float: left;
width: 20px;
background: 0 0;
text-align: center;
border-radius: 50%;
color: red;
padding-right: 0;
height: 20px;
margin-right: 0;
line-height: 20px;
margin-top: 5px;
margin-right: 5px;
}
.nav-main ul.sf-menu ul#kad-head-cart-popup ul.product_list_widget li a img {
max-width: 50px;
padding-right: 10px;
width: 50px;
height: auto;
float:left;
margin: 0;
}
.nav-main ul.sf-menu ul#kad-head-cart-popup li .quantity {
font-size: 11px;
padding-top: 8px;
position: absolute;
color: #444;
top: 0;
right: 0;
}
.nav-main ul.sf-menu ul#kad-head-cart-popup ul.product_list_widget li dl {
border: 0;
padding-left: 80px;
}
.nav-main ul.sf-menu ul#kad-head-cart-popup .total {
padding: 4px;
margin: 8px 0;
color: #444;
border: 1px solid #eee;
clear: both;
line-height: 20px;
}
.nav-main ul.sf-menu ul#kad-head-cart-popup .buttons .button {
padding: 10px 16px;
display: inline-block;
font-size: 14px;
}