Mobile Bar displaying only in Cartflows pages

Hello @jazzu

Thank you for getting in touch with us!

The mobile menu is getting displayed on the checkout page of CartFlows is because the CartFlows does not load the theme’s styles and scripts if the page template is set to
– CartFlows-Box
OR
– Template for page builders.

So, if you want to remove it then you can change the page template to “Default”. This article will help you with it.

If you don’t want to change the page template then you can use the following CSS selector to hide the mobile menu.

.cartflows_step-template-cartflows-canvas #bigstore-mobile-bar{}.

I hope this helps you.

Hi @cartflows !

Thank you for your fast reply!

I don’t want to change the template, as it looks nice the way it is. I tried using .cartflows_step-template-cartflows-canvas #bigstore-mobile-bar{} in Additional CSS, style.css, I copied cartflows-normalize.css from the plugin to my child theme, but it doesn’t work anywhere..

It works in the same directory (cartflows-normalize.css) in inspect element though, so I’m just not adding the code to the right file..

Kind regards

Hello,

Thank you for getting in back to us!

I checked the checkout page and tried the CSS and it seems to be working fine. Could you please try the below CSS and add it under the theme’s customizer -> Additional CSS tab.

.cartflows_step-template-cartflows-canvas #bigstore-mobile-bar{
    display:none;
}

This article will help you to locate that additional CSS tab in the theme’s customizer.

I hope this helps you.

Feel free to get in touch with us in case you need more help or assistance.

Hi!

I tried it in Additional CSS, style.css and the css file from the plugin (I copied it to the child theme), and for some reason it’s not doing anything.

In inspect element it works for me as well, but not anywhere else..

Kind regards

Hello @jazzu

Thank you for gettin back to us!

I checked the checkout page and it seems that you are adding the CSS code to the wrong position.

Here is the screenshot for reference: https://share.getcloudapp.com/geudlK07

From the screenshot, it seems that you have added the CSS code into the CartFlows checkout step’s custom Script option/setting.

Let me tell you that this is not a JS code, it is a CSS code. So, you need to add it to a proper file or option.

I suggest you follow the below steps to add the CSS code.

Step 1: Remove the custom CSS from the custom script option on the checkout page.
Step 2: Navigate to the WP dashboard
Step 3: Navigate to Appearance -> Customize
Step 4: Once the customizer is opened. Navigate to the Additional CSS tab.
Step 5: Copy the below CSS code as it is shared.

.cartflows_step-template-cartflows-canvas #bigstore-mobile-bar{
    display:none;
}

Step 6: Click publish button on the top.

Note: If you are adding <style> or <script> tags in the additional CSS tab while adding a custom CSS then it will not work.

Also, if you are using the cache plugin on the website then please clear it and then check it once. If still not showing then please keep the code as it is and let me know so that I can take a look at the page from our end.

If still not working, then please open a technical support ticket from the website where one of our developers will help you out.

Hello @cartflows

I only have 2 pieces of code targeting the mobile bar. One is for the theme’s mobile bar that’s there by default, and the second one is a copy paste of your code. They are BOTH in Additional CSS tab of theme customizer. I even deleted the code that disabled the theme’s mobile bar that I added, so the only thing there was the code you wrote. The issue still persists.

You can see that on this screenshot

Kind regards

Hello @jazzu

Thank you for getting in touch with us!

I double-checked the checkout page and the custom CSS, after checking I found that the CSS added in the customizer’s additional CSS is not written properly.

If you look closely, you will see that the custom CSS code which I have shared with you is been wrapped in @media screen and (max-width: 1000px)

Due to which the Custom CSS is only getting applied when the window size is 1000px.

Here is the screenshot for reference: https://share.getcloudapp.com/9ZuDPqQ4

So, to solve this, please remove the custom CSS from that media query and add it at the very bottom of the customizer’s additional CSS tab.

I hope this helps you.

Please let me know how it goes.

Hello @cartflows !

Oh wow, that’s a really stupid mistake! Thank you for pointing it out, I thought I had already fixed all the brackets, but seems like one stayed open.

Thank you for your help and your wonderful support!

Kind regards

Hello @jazzu

Thank you for the confirmation and I am glad that I was able to help you out with your issue.

If you are satisfied with the CartFlows and the support that we provide then can you please provide us a rating and review?

This is to help us make our product better by introducing it to new users.

Here’s the link where you can submit a review.

If you need help with anything else, don’t hesitate to raise a new ticket!

Have a great day ahead ??

Hey!

Ofcourse, left a review without any hesitation.

Have a nice day yourself!

Hello @jazzu

Thank you so much for the awesome review and rating.

I am glad to see that you are enjoying the CartFlows plugin and we are able to help you with the exact requirements of yours.

Feel free to open a new support thread if you need more help or assistance. We will be more than happy to help.

Have a great day and stay safe. ??