Fix Mobile Top Bar Problems

Hi, @eganet

You can achieve this by applying following CSS code.

@media (max-width:320px) {
li.nav_woo_cart.multicolumn_dropdown.drop_to_left.submenu_default_width {
    visibility: hidden;
}

a.item_link.with_icon {
    visibility: hidden;
}
}

@media (max-width:480px) {
li.nav_woo_cart.multicolumn_dropdown.drop_to_left.submenu_default_width {
    visibility: hidden;
}

a.item_link.with_icon {
    visibility: hidden;
}

}

Hope this will help.

Thanks.

Hi wbcomdesigns, I have added the code but it’s still on the right. Code not working. Infact I don’t want to hide it. Seems your code is to hide it.
I just want the shopping cart to move to the left.

Hello @eganet

Please use this css code..

@media (max-width:320px) {
li.nav_woo_cart.multicolumn_dropdown.drop_to_left.submenu_default_width {
    visibility: hidden !important;
}

a.item_link.with_icon {
    visibility: hidden !important;
}
}

@media (max-width:480px) {
li.nav_woo_cart.multicolumn_dropdown.drop_to_left.submenu_default_width {
    visibility: hidden !important;
}

a.item_link.with_icon {
    visibility: hidden !important;
}

}

The!important rule makes sure that this overrides the preset settings for the current element so it’s the one that always gets read by the browser.

Thanks.

Nope not still working.

I have removed my custom css code to avoid conflict. Now you can see the default top menu.

The desktop view is OK. As you can see everything appears on a horizontal line:
Email. [email protected] | Tel. +34 671 285 735 Mi Cuenta (0) – €0

The problem is with the Mobile screen. It appears like this:
<center>Email. [email protected] | Tel. +34 671 285 735</center>
Mi Cuenta
(0) – €0

But I want it like this:
<center>Email. [email protected] | Tel. +34 671 285 735 </center>
<center>Mi Cuenta | (0) – €0</center>

the wesite is: egacoupons.com