Home › Forums › WoodMart support forum › How to change categories drop down background

How to change categories drop down background

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 2, 2024 at 9:07 pm #545692

    ola
    Participant

    Hello. Pls how can I change the categories drop down background to match my brand color? By default it’s black.

    Attachments:
    You must be logged in to view attached files.
    March 4, 2024 at 12:38 pm #545952

    Luke Nielsen
    Keymaster

    Hello,

    Please send me the URL link to the site so I can look closer at it.

    I await your response.

    Kind Regards

    March 4, 2024 at 6:04 pm #546116

    ola
    Participant

    Okay. It’s https://www.deemporium.com

    • This reply was modified 9 months, 2 weeks ago by ola.
    March 4, 2024 at 6:04 pm #546117

    ola
    Participant

    It’s https://www.deemporium.com

    March 4, 2024 at 6:09 pm #546120

    Luke Nielsen
    Keymaster

    Hello,

    Try to use the code below: 

    .archive .page-title .wd-nav-product-cat .children.wd-dropdown {
    background-color: #fb9600;
}

    Define it in Theme Settings -> Custom CSS.

    Kind Regards

    March 5, 2024 at 7:56 pm #546468

    ola
    Participant

    Thanks. It works.

    However, I have another issue with mobile responsiveness.
    The website is responsive on widescreen mobile but not on small screen sizes.

    The screenshots show the responsiveness of both the small screen (iPhone 6) and the widescreen (iPhone XS Max).

    The mobile navigation at the bottom of the small screen mobile isn’t in place causing the website structures to look messy.

    Attachments:
    You must be logged in to view attached files.
    March 6, 2024 at 10:41 am #546544

    Luke Nielsen
    Keymaster

    Hello,

    Checked it on the iPhone 5-6 and on my side it looks well: https://take.ms/5X4QC , so it could be some sort of cache, I suggest you clear the browser/mobile cache and recheck the issue.

    Kind Regards

    March 6, 2024 at 11:57 am #546579

    ola
    Participant

    It’s still the same after clearing browser cache. I also used another iPhone 6 to check but the site still unresponsive.

    March 6, 2024 at 1:05 pm #546617

    Luke Nielsen
    Keymaster

    Please clarify in which browser you have such an issue and its version.

    Thank you in advance.

    Kind Regards

    March 6, 2024 at 6:16 pm #546755

    ola
    Participant

    Chrome (version 92.0.4515.90) and Safari ( 12)… Those are the latest version for iPhone 6 (iOs 12.5.7) I guess.

    March 7, 2024 at 11:22 am #546915

    Luke Nielsen
    Keymaster

    Hello,

    The thing is that on such an old browser (Safari 12), some things could work wrong becasue Safari 12, 13 and 14 browsers lacks the support of gap property for Flexbox and inset property for absolute positioning. The following properties are important to reduce CSS file size and to avoid an excessive DOM size, improving page speed. Woodmart started to implement this property after it was first used in WordPress default themes and Elementor builder. Using older browsers may not support features provided by WordPress since it requires the two latest versions of Safari browser which is Safari 16 and Safari 17 to work properly (https://make.wordpress.org/core/handbook/best-practices/browser-support/).

    Kind Regards

    March 9, 2024 at 12:31 pm #547640

    ola
    Participant

    I also used Chrome, but it’s still the same… I also installed the theme on a fresh website and encountered the same issue. It’s responsive on large screen mobile, but on small screen like iPhone6, it’s not responsive at all… We can’t predict the browser or mobile that people will use in visiting the site, so I think a theme like woodmart should be responsive on all devices.

    March 11, 2024 at 11:29 am #547930

    Luke Nielsen
    Keymaster

    Hello,

    Here is Galaxy Fold, which is narrower than the iPhone 6: https://prnt.sc/NH10agT3pGNF . As I mentioned above, using older browsers may not support features provided by WordPress since it requires the two latest versions. https://prnt.sc/lgoHj9brtXHi

    Even Elementor builder requires iOS Safari 14 and above and Chrome 100.x and above to work properly (https://elementor.com/help/requirements/).

    Kind Regards

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