Home › Forums › Basel support forum › Pull out menu/drawer colours

Pull out menu/drawer colours

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • April 16, 2020 at 4:07 pm #187566

    Userdan
    Participant

    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.
    April 16, 2020 at 4:36 pm #187573

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    April 16, 2020 at 6:59 pm #187589

    Userdan
    Participant

    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.
    April 17, 2020 at 12:44 pm #187855

    Bogdan Donovan
    Keymaster

    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

    April 19, 2020 at 10:28 pm #188363

    Userdan
    Participant

    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!

    April 20, 2020 at 12:41 pm #188568

    Elise Noromit
    Member

    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

    April 20, 2020 at 5:26 pm #188619

    Userdan
    Participant

    Sure, please see the examples in the private content

    April 20, 2020 at 8:36 pm #188647

    Elise Noromit
    Member

    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

    April 20, 2020 at 10:07 pm #188663

    Userdan
    Participant

    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.
    April 21, 2020 at 6:40 am #188697

    Elise Noromit
    Member

    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

    April 21, 2020 at 10:14 am #188749

    Userdan
    Participant

    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

    April 21, 2020 at 12:54 pm #188841

    Userdan
    Participant

    Correct attachement in this message

    Attachments:
    You must be logged in to view attached files.
    April 21, 2020 at 9:12 pm #188967

    Elise Noromit
    Member

    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

    April 22, 2020 at 10:50 pm #189292

    Userdan
    Participant

    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,

    April 23, 2020 at 7:06 am #189330

    Elise Noromit
    Member

    Hello,

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

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

    Best Regards

    April 28, 2020 at 9:44 pm #190707

    Userdan
    Participant

    Thank you!

    April 29, 2020 at 8:08 am #190781

    Elise Noromit
    Member

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

    Best Regards

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)