Site logo

Archived topic

Shopping cart icon in mobile

2 replies · Started by Mårten on September 22, 2022

Viewing posts 1–3 of 3

Hi!

I'm using the secondary menu as "primary menu" on desktop at one of our customers' website. In mobile I´m using off canvas menu and use code to hide the secondary menu in mobile. When I do that the shopping cart also disappears. I want to have the shopping cart icon on the left side of the off canvas icon in mobile. Is that possible?

Link to website: https://www.jmzqr.beeweb-red.io/

I´m also use this code to center logo in desktop. But because I use secondary menu as "Primary menu" the secondary menu don´t get sticky when I scroll. Is there something in the code bellow I have to change?

@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding,
.sticky-menu-logo .navigation-stick:not(#sticky-placeholder) .navigation-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}

#site-navigation {
margin-left: unset !important;
display: flex;
}

.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}

#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}

/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(1) {
margin-left: auto;

Hi there,

I see that you've added a cart menu item using a plugin, the menubar cart plugin adds this CSS which means when it's empty, the cart will be hidden.

.empty-wpmenucart, .hidden-wpmenucart {
    display: none!important;
}

Can you check the plugin setting to see if there's a setting to make it display even when it's empty?

This archived topic is closed to new replies.