Hello,

Specular by default has the mobile menu set on the left side and the logo on the right.

Please can you send us a screenshot of your phone.

Let us know.

Regards!

Hello,

Sorry for the late reply.

1) You can remove it using custom css:

.single-product .cl-style-center .product_meta .metas {
    display: none;
}

2)-3) Yes, removing sections from the layout will affect the other sections and mobile as well. Please know that this is personal customization and we can not provide support on personal styling. I suggest you hire a designer to help you with that.

4-It’s fixed;

5-By default, the cart is over the arrow in the single product page. See screenshot: https://ibb.co/GQP1QX5
I am not sure what triggered this behavior in your site, however, I added this CSS: .single-product .flex-direction-nav .flex-next {z-index: 1;}

6-Add this css:

#site-header-cart .button.checkout.wc-forward {
    background: #80d0c5 !important;
}

7-By default in mobile the first action (tap) in a menu item that has sub-menus, will be opening the drop-down. There is no solution for this because mobile actions are limited. But a workaround is to add the same menu item in the sub-menu and show it only on mobile. I have set it up already for you. Please check your site.
I added this css to hide it in desktop:
nav .menu li ul.sub-menu li:first-child {display: none;}

8-Add this css inside an @media (max-width: 480px) rule:

.single-product-style-center .summary .inline-wishlist, .single-product-style-wide_full_image .summary .inline-wishlist {
    width: 220px !important;
    margin-left: -12px !important;
}

9-This is personal customization and is not included in support.

Best regards!

Hello,

1) These buttons disappear in the mobile version.
I see that only wishlist is not shown, the search, cart and three bar menu is already visuble. To add the wishlist as well, i added this css:

@media (max-width: 979px){
.extra_tools_wrapper .tool.wishlist {
    display: block !important;
}
}

2) The product photo is cut in the tablet version.
I don’t see this. Here is what i see: https://ibb.co/4dM6FCv

3) How can I change the color of the “next and previous photo” buttons?
Add this css:

.single-product .flex-direction-nav .flex-next:before {color: #ccc !important;}
.single-product .flex-direction-nav .flex-prev:before {color: #ccc !important;}

4) How to put these buttons on the sides of the photo?
Add this css:

@media (max-width: 480px){
.single-product .flex-direction-nav .flex-next {
    position: absolute;
    right: -9em;
    top: 60%;
}
.single-product .flex-direction-nav .flex-prev{
    position: absolute;
    left: -9em;
    top: 60%;
}}

5) How to center the product title?
It looks quite in center to me. If you want to further position it, add some margin using custom css.

6) When you click on “solitaire”, another version of the online store appears with the filters on the left side. How can I make the page that opens my online store without those side filters?
This is a category page. Go to Customize > Shop > Shop Categories. Change here the categories page layout. Select fullwidth to remove the sidebar.

7) Login / Sign up is down and not centered vertically
This is centered to the div where it is. The lack of space in the mobile header, makes it scroll one under the other. I added this css to customize this:

.header-el.cl-h-cl_header_widget:nth-child(2) {
    display: none;
}
.header_container.cl-header-topnav-mobile .top_nav.header-row .header-el {
    width: auto !important;
}

8) In the mobile and tablet version, the “add to cart” button has no upper space. Also, in the mobile version, all the text is not contained within the button.
In the present css, i edited this:

.qty_container {
    margin: auto !important;
}

to this:

.qty_container {
    margin: 10px auto !important;
}

9) How can I center that button on the tablet version? – 10) The same as in point 8. How can I make the text inside the button?
I added this css:

.single-product-style-center .summary .inline-wishlist {
   width: 100% !important;
   margin-left: 0px !important;
   margin-top: 15px !important;
}

11) How can I change that loading animation?
The loading gif is puled from this location: https://engastadores.com/wp-content/plugins/yith-woocommerce-wishlist/assets/images/wpspin_light.gif
If you want to replace it, just replace the gif in this url. Make sure to keep the same name of it will not be found and thus, not load.

Best regards!

Hello,

Please deactivate the AP Mega menu plugin first. Then add some wp credentials in a private reply. So we can check out the rest. In what screen size are you having trouble with the search icon in the header?

I checked the site in mobile and i don’t see any problem besides the menu.
Let us know.

Best regards!

Hello,

Have you disabled the responsive mode in this site? I suggest you enable it again so the site content is scaled properly in mobile. To rever menu style from mobile to normal, add this css into Specular > General Options > Custom Css:

@media (max-width: 979px){
.mobile_small_menu {
    display: none !important;
}
header#header #navigation{
    display: block !important;
}
}

Best regards!