Pull out menu/drawer colours

Hi there,

How do I change the pull out element colour for mobile?
Shop categories/cart drawer/checkout/menu

Attachments:

You must be logged in to view attached files.

Hello,

What would you like to change: text or/and background? Please provide page URL and clarify I will provide custom CSS.

Best Regards

Hi there,

I would like to change the top heading background and text colour of the pull out element.
Please see screenshots – is it possible?

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.cart-widget-side .widget-heading, 
.login-form-side .widget-heading {
  background-color: #333;
}

.cart-widget-side .widget-heading .widget-title,
.login-form-side .widget-heading .widget-title {
  color: #3ABCCA;
}

Regards

Hi there,

This worked for the pull-out cart but not for the other elements.

I would like the class IDs for all the pull out elements such as mobile main nav, product category sidebar … etc

Thanks in advance!

Hello,

Please provide the pages URL with all the elements. They have different ID/classes and there is no one common CSS for all.

Best Regards

Sure, please see the examples in the private content

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .cart-widget-side .widget-heading, 
body .login-form-side .widget-heading {
  background-color: yellow;
}
body .cart-widget-side .widget-heading .widget-close,
body .cart-widget-side .widget-heading .widget-title,
body .login-form-side .widget-heading .widget-title {
  color: green;
}
body .cart-widget-side .widget-heading .widget-close:after,
body .cart-widget-side .widget-heading .widget-close:before{
	background-color: green;
}

Best Regards

Hi there,

Thank you but these are missing a few elements.

Please see the attached screenshots for which elements I am looking for.

The heading bg colour of image 1 and the item text colour on image 2.

Many thanks!

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .mobile-nav {
    background-color: blue;
}
.color-scheme-dark ul li {
    background-color: blue;
}
body .mobile-nav ul li .up-icon{
background-color: blue;
}
body .mobile-nav .sub-menu-dropdown ul:before {
    color: yellow;
}
body .mobile-nav ul li.current-menu-item>a {
    color: yellow;
}
body .mobile-nav ul li a {
        color: yellow;
}
body .mobile-nav .icon-sub-menu:after, 
body .mobile-nav .icon-sub-menu:before {
    background-color: yellow;
}
body .mobile-nav .searchform button {
    color: yellow;
}

Best Regards

Hi there,

Thank you for the above.

However, I do not think these are correct.

I do not want to change the appearance of the desktop menu – which the above CSS seems to change.

Also – please provide the CSS for the shop filter sidebar pull out header as shown in the previously attached image

Correct attachement in this message

Attachments:

You must be logged in to view attached files.

Hello,

The above-provided CSS relates to the mobile menu only.

Here is the code for the sidebar:

body .widget_product_categories .basel-cats-toggle:before, 
body .widget_product_categories .basel-cats-toggle:after{
color:red;
}

body .widget_product_categories ul>li ul li:before {
color: red;
}
body .widget_product_categories li.current-cat > a{
color: red;
}

body .sidebar-widget li > ul li a:hover,
body .sidebar-widget li > ul li a{
color: red;
}
body .sidebar-container {
background-color:yellow;
}

Best Regards

Hi there,

Thank you for the information.

I think there was a few mistakes in the recent CSS IDs message.
The correct ID I found to work is – .basel-close-sidebar-btn

I had 1 more question regarding the mobile main nav. If you can test this one mobile…
When an item is clicked – there is a colour change from black and then white with white text which looks like a blank space. Is there a way to change this?
It only occurs when an item is clicked..

Many thanks,

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .mobile-nav ul li a:focus {
        color: yellow;
}

Best Regards

Thank you!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts