I have adjusted cart in the top menu, but it is not showing in mobile devices. What should I do to get it visible in mobile devices?
Please provide me the code to show the cart in mobile devices…
Hi,
The top menu is not displayed on mobile, it never was intended to display there.
However it could be made to appear with a code, if this is required. Something like this would work, you could try it
– https://www.screencast.com/t/CABlPOFxL
This is the code for it if you want to use it
@media (max-width: 767px){
.td-header-sp-top-menu,
.td-header-top-menu-full {
display: block!important;
text-align:center;
}
.td-social-icon-wrap{
display:none;
}}
Thanks
Dear, can we display only the cart option in the top menu in mobile devices or can we make the top menu somewhat thinner than the code you have given to me?
This is consuming too much space in mobile. Hope you understand. Please provide me the code for it. Thanks
Try this modified one instead – https://www.screencast.com/t/RqZOmNBwSx
@media (max-width: 767px){
.td-header-sp-top-menu,
.td-header-top-menu-full {
display: block!important;
text-align:center;
}
.td-social-icon-wrap,
.td_data_time,
.td_ul_login,
.top-header-menu li:not(.wpmenucartli){
display:none;
}}
Dear, the code works like charm. Can we add the sign up/login to the same line along with cart in the top menu bar?
Glad it worked. If you would have mentioned you wanted the login as well, it would have been helpful. To display the login as well it would be like this
– https://www.screencast.com/t/EX7D1QEU
@media (max-width: 767px){
.td-header-sp-top-menu,
.td-header-top-menu-full,
.top-header-menu.td_ul_login {
display: inline-block!important;
}
.td-social-icon-wrap,
.td_data_time,
.menu-top-container li:not(.wpmenucartli){
display:none;
}}
Delete the previous one and enter this one, it should work.
Dear, I have applied the code and it has shown the sign/up login with cart, but the the top menu bar is not expanded to the full screen. The line of top bar is splitting about 60% of the screen.
Please look at this screenshot:
Now it should work, add this as well
@media (max-width: 767px){
.td-header-sp-top-menu, .td-header-top-menu-full {
width: 100%;
text-align:center;
}}
Note that there is also a login in the mobile menu, so now you will have one in the top menu and one in the menu modal.
