How to remove Bootstrap affecting dropdown menu

  • Resolved Nomad Skateboarding

    (@nomadskateboarding)


    5 years ago

    Hello, Anders!

    Thank you for what you do first and foremost! I’m late to your work, but now a fan and all in. (I just signed up for a monthly donation to the cause.) My plan is to use Chaplin as my base theme and invest my time learning with your work. So I will be supporting you going forward.

    My current issue is with the dropdown. I see you’ve addressed this multiple times already here, but I’m too new to this I think to put it all together, so my apologies.

    Hi @korbball,

    Your site includes the Bootstrap CSS files, which include targeting for classes used in Chaplin. In this case, Chaplin uses the “dropdown” class on all menus containing dropdown items, and Bootstrap includes styles targeting the same element causing the issue with the menu.

    I’d recommend you to remove the bootstrap styles, if possible.

    — Anders

    I installed Chaplin on 3 different sites I own and wasn’t able to use the dropdown on any of them except in Firefox on mobile. Another reply you made suggested it was the browser/clearing that.

    The only things installed on one of my sites is WordPress, Askimet, default theme and your theme, and I still have the same issue, so not sure how I would remove the Bootstrap styles or where they would be.

    Thank you for your time.

    Mark-Andrew

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @nomadskateboarding,

    Glad you like them, and thanks for the donation!

    The issue in the other thread was that the dropdown menus were getting styled incorrectly, so I think your issue is a separate one. Could you post a link to one the sites you’re using Chaplin on, so I can give it a try? Are you using an Android device?

    — Anders

    Thread Starter Nomad Skateboarding

    (@nomadskateboarding)

    Thank you @anlino !

    Yes, it is an Android mobile phone as my main driver. I actually am creating all my sites right from there.

    So yes, it’s Chrome on an Android with main issue.

    Link to new site I just set up
    https://coreskateboard.com/

    I left it as is.

    Apologies again for the question, I see so much of your time here with things there are answers to! I searched for Android, Chrome Mobile, etc, if there I missed.

    Thank you again!

    *My other sites I’m using default 2020, so how I got here ?? https://markandrewskates.com I love the simplicity of that theme, but want to support you directly so figure go with Chaplin as it seems your ‘main’ effort? Regardless, I digress, thank you again!

    Mark-Andrew

    Theme Author Anders Norén

    (@anlino)

    Hi @nomadskateboarding,

    Understood. I don’t have access to an Android device, so I can’t test it personally, but I did use Browserstack (a testing service offering remote control of devices) to test it in Chrome on a Google Pixel 4 running Android 10 and on a Samsung Galaxy S10 also running Android 10, and I didn’t run into any issues. Which device and Android version are you using?

    — Anders

    Thread Starter Nomad Skateboarding

    (@nomadskateboarding)

    Hello @anlino !

    Thank you for the reply and taking the time to test.

    I’m on a Pixel 4XL running latest Android and Chrome browser.

    Chrome: 80.0.3987.1499
    Android: version 10

    I sent 2 screenshots to your email. When I click on dropdown menu it shows it in ‘active state’ with highlighted border but that’s it.

    But no worries! If it doesn’t make sense after this reply I’ll resolve the issue in the thread and see if I can track down the issue on my end. If it’s not reproducing for you then I might have a conflict due to my apps/configuration possibly.

    Regardless, thank you again for your time, Anders.

    – Mark-Andrew

    Theme Author Anders Norén

    (@anlino)

    Well, this was an interesting one. Using Browserstack, I was able to replicate the problem in Google Pixel 4 XL running Android 10 and Chrome – but not in Google Pixel 4 (the non-XL version) running Android 10 and Chrome. I’m not sure why they handled it differently. Maybe they were running a slightly different version of Chrome, or something.

    I was able to fix it by changing the sub menu toggle from a button element to a a (link) element, so it should work for you when you’ve updated to version 2.2.6 of Chaplin. Let me know!

    — Anders

    Thread Starter Nomad Skateboarding

    (@nomadskateboarding)

    Success! ??

    Nicely done, Anders. Appreciated the effort and the skills to get there!

    Be well,
    Mark-Andrew

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to remove Bootstrap affecting dropdown menu’ is closed to new replies.