BSS is just pain in neck, struggling to get decent page speed on site, lot of issues, latest one drop down menu wont work on mobile phone at all??? any pointers plz before i ditch BSS for second time for good
Hi Omer,
Really sorry to hear you’re having so many issues.
Would you be so kind as to send me a Direct Message on here and I’ll send you a link to upload your BSS design file to, I’ll then go through it and find the cause of the issues and help you trouble shoot it.
Alternatively, if you have published your site post a link to it here and I can take a look and advise what the trouble seems to be.
Hi, here is the link for test site i am working on , thanks for have a look Ltd Company Accountant - Fixed Fee SME Payroll, VAT & Tax Return
I’ll leave it to the experts to diagnose properly, but I gave it a quick look.
For me, the menu seemed to work on narrow screens.
I noticed a few problems in the browser dev console. The nastiest may be in site.js line 2, which includes document.getElementById('year') but there may be no such element.
There may be a 404 when requesting https://faradaykeynes.co.uk/fk-bss/bootstrap_theme/bootstrap.css
On intial load, some fonts didn’t load, but that problem seemed to go away (delayed?).
There’s a warning about a script from seal.starfieldtext.com.
Thanks for having a look , it is really annoying that dropdown works on wide screen but not on mobile. Lets see if i get help from officials else will have to move to pinegrow which is not a bad move considering I will get even more control on editing html itself which is massive drawback in BSS
Heya, just got some free time now and have been poking about.
It is super strange how on my phone the nav opens, but doesn’t close - then on my laptop, even emulating a phone it works fine!
This is something new and exciting to sink my teeth into!
The problem is the hacky CSS that you’re using to try and override the default behavior of Bootstrap dropdowns
navbar .nav-item.dropdown:hover .dropdown-menu {/* display: block; */}
@media (max-width: 991.98px) {.navbar .nav-item.dropdown:hover .dropdown-menu {/* display: none; */}}
You’re trying to “cancel” the hover behavior for screens below Bootstrap’s lg breakpoint. On mobile, hover doesn’t really exist (you tap instead), but CSS still considers the first tap as “hover.” That means the dropdown menu gets stuck in a half-hover, half-click state depending on how the browser interprets the tap.
Bootstrap’s JavaScript is already wired up to handle clicks/taps on .dropdown-toggle elements. The moment you start overriding it with hover-based CSS, you’re fighting against Bootstrap’s intended behavior.
On touch devices, a tap can trigger :hover and a click, which confuses the browser. Their CSS rules may prevent the dropdown menu from displaying when tapped because it either hides it or doesn’t allow Bootstrap’s JS class toggles (.show) to take effect properly.
In short: you’re trying to fix something that isn’t broken. Bootstrap is designed for click-to-open dropdowns, not hover.
How to fix it:
-
Delete that CSS entirely.
-
Let Bootstrap’s built-in JS handle the dropdowns. They will work fine on desktop and mobile.
-
If you insist on having hover menus for desktop, the right way is to write custom JS that only applies hover behavior at larger breakpoints, while keeping click-to-open on mobile. Doing it with CSS alone causes the exact problem you’re having.
This is one of those cases where adding a little CSS to make it behave differently ends up breaking the balanced JS+CSS dance that Bootstrap relies on. If you want a hybrid hover/click dropdown, it needs to be solved in JS.
Here’s a clean way to get what you want: hover on desktop, tap/click on mobile. The trick is to add a little JavaScript that listens for hover events only when the screen is large enough, while leaving Bootstrap’s default behavior intact below that breakpoint. Create a new JS file and paste this script into it….
document.addEventListener(“DOMContentLoaded”, function() {
// Bootstrap’s “lg” breakpoint is 992px
if (window.innerWidth >= 992) {
document.querySelectorAll(‘.navbar .dropdown’).forEach(function(dropdown) {
dropdown.addEventListener(‘mouseenter’, function() {
this.classList.add(‘show’);
this.querySelector(‘.dropdown-menu’).classList.add(‘show’);
});
dropdown.addEventListener(‘mouseleave’, function() {
this.classList.remove(‘show’);
this.querySelector(‘.dropdown-menu’).classList.remove(‘show’);
});
});
}
});
Compliments of ChatGPT
3 Likes
Once I saw you writing a reply @printninja, I held off as I had expected you’d found the same issue I had.
I would also add that it would appear faradaykeynes has tried to load 3 different copies of Bootstraps CSS framework.
They have one that fails with a 404,
And two in the design. One in their CSS file and another exported by BSS it would seem.
1 Like
Yeah, there’s a lot going on with that site that could use fixing, but I just dealt with his immediate problem. OP is experiencing BSS frustration because the program allows you the freedom to do just about anything… both correctly and incorrectly.
My advice to you @faradaykeynes is to study the Bootstrap framework carefully, as well as CSS and plain, old “best practices” in website development. You’re kinda not doing things the way you should. As @catkin pointed out, there’s no need to have a totally bespoke bootstrap.css file. You can just override the rules you need on a rule-by-rule basis.
Also, consider grabbing a free ChatGPT subscription. It can really help accelerate your skills because it’s like having a master HTML, CSS, JS coach at your beck and call for when you want to accomplish something, aren’t quite sure how, and don’t want to break anything.
2 Likes
thanks i deleted this “@media (max-width: 991.98px) {.navbar .nav-item.dropdown:hover .dropdown-menu {/* display: none; */}}” and it worked. thank you all for helping out
1 Like
You can also go to your design file, open the settings dialogue and choose “Head content” then delete everything you have there, that will remove the duplicate entries that are not needed for your site
1 Like