So I am using a navigation bar built in Bootstrap 5, where on-hover the submenu items open, this works great on main nav items, on sub-navigation it overlaps and breaks, meaning that under the “services” panel, everything cannot be accessed.
I have used Dropend on the sub-navigation so the dropdown should in theory drop onto the right and not down like it does currently, any ideas?
Navigation bar HTML with main menu and nested “services” menu/dropdown:
<ul id="menu-primary" class="navbar-nav me-auto mb-2 mb-md-0 navbar-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown nav-item nav-item-235369"><a href="https://yorkshireaccountancy.streamer.click/about-us/" class="nav-link dropdown-toggle show" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">About Us</a>
<ul class="dropdown-menu depth_0 show">
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235370"><a href="https://yorkshireaccountancy.streamer.click/careers/" class="dropdown-item ">Careers</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235371"><a href="https://yorkshireaccountancy.streamer.click/referral-scheme/" class="dropdown-item ">Referral Scheme</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235372"><a href="https://yorkshireaccountancy.streamer.click/meet-the-team/" class="dropdown-item ">Meet The Team</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235373"><a href="https://yorkshireaccountancy.streamer.click/switch-accountants/" class="dropdown-item ">Switch Accountants</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235374"><a href="https://yorkshireaccountancy.streamer.click/testimonials/" class="dropdown-item ">Testimonials</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235375"><a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Services</a>
<ul class="dropdown-menu depth_0">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235376 dropend dropdown-menu-end"><a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Services</a>
<ul class="dropdown-menu sub-menu depth_1">
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235377"><a href="https://yorkshireaccountancy.streamer.click/annual-accounts/" class="dropdown-item ">Annual Accounts</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235378"><a href="https://yorkshireaccountancy.streamer.click/auto-enrolment/" class="dropdown-item ">Auto Enrolment</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235379"><a href="https://yorkshireaccountancy.streamer.click/bookkeeping/" class="dropdown-item ">Bookkeeping</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235380"><a href="https://yorkshireaccountancy.streamer.click/company-formation/" class="dropdown-item ">Company Formation</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235381"><a href="https://yorkshireaccountancy.streamer.click/corporation-tax/" class="dropdown-item ">Corporation tax</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235382"><a href="https://yorkshireaccountancy.streamer.click/management-accounts/" class="dropdown-item ">Management Accounts</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235383"><a href="https://yorkshireaccountancy.streamer.click/payroll/" class="dropdown-item ">Payroll</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235384"><a href="https://yorkshireaccountancy.streamer.click/self-assessment/" class="dropdown-item ">Self-Assessment</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235385"><a href="https://yorkshireaccountancy.streamer.click/fee-protection-insurance/" class="dropdown-item ">Fee Protection Insurance</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235386"><a href="https://yorkshireaccountancy.streamer.click/vat/" class="dropdown-item ">VAT</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235387 dropend dropdown-menu-end"><a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Specialisms</a>
<ul class="dropdown-menu sub-menu depth_1">
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235388"><a href="https://yorkshireaccountancy.streamer.click/ebay-accountants/" class="dropdown-item ">eBay Accounting</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235389"><a href="https://yorkshireaccountancy.streamer.click/pub-accountants/" class="dropdown-item ">Pub Accountants</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235390"><a href="https://yorkshireaccountancy.streamer.click/capital-allowances-tax-relief/" class="dropdown-item ">Capital Allowances Tax Relief</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235391"><a href="https://yorkshireaccountancy.streamer.click/research-and-development-tax-relief/" class="dropdown-item ">Research and Development Tax Relief</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235392"><a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Partnerships</a>
<ul class="dropdown-menu depth_0">
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235393"><a href="https://yorkshireaccountancy.streamer.click/pandle-accountant/" class="dropdown-item ">Pandle Accountant</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235394"><a href="https://yorkshireaccountancy.streamer.click/quickbooks-accountant/" class="dropdown-item ">QuickBooks Accountant</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235395"><a href="https://yorkshireaccountancy.streamer.click/receipt-bank/" class="dropdown-item ">Receipt Bank</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235396"><a href="https://yorkshireaccountancy.streamer.click/sage-accountant/" class="dropdown-item ">Sage Accountants</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235397"><a href="https://yorkshireaccountancy.streamer.click/satago/" class="dropdown-item ">Satago</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235398"><a href="https://yorkshireaccountancy.streamer.click/xero-accountant/" class="dropdown-item ">Xero Accountant</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235399"><a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Who We Help</a>
<ul class="dropdown-menu depth_0">
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235400"><a href="https://yorkshireaccountancy.streamer.click/individuals-accountant/" class="dropdown-item ">Individuals</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235401"><a href="https://yorkshireaccountancy.streamer.click/landlords-accountant/" class="dropdown-item ">Landlords</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235402"><a href="https://yorkshireaccountancy.streamer.click/limited-company-accountants/" class="dropdown-item ">Limited Companies</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235403"><a href="https://yorkshireaccountancy.streamer.click/limited-liability-partnership-accountant/" class="dropdown-item ">Limited Liability Partnership</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235404"><a href="https://yorkshireaccountancy.streamer.click/sole-traders-accountants/" class="dropdown-item ">Sole Traders</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235405"><a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Support</a>
<ul class="dropdown-menu depth_0">
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235407"><a href="https://yorkshireaccountancy.streamer.click/blog/" class="dropdown-item ">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235408"><a href="https://yorkshireaccountancy.streamer.click/free-downloads/" class="dropdown-item ">Free Downloads</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235409"><a href="https://yorkshireaccountancy.streamer.click/news/" class="dropdown-item ">News</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235410"><a href="https://yorkshireaccountancy.streamer.click/factsheets/" class="dropdown-item ">Factsheets</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235411"><a href="https://yorkshireaccountancy.streamer.click/resources/" class="dropdown-item ">Resources</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235917"><a href="https://yorkshireaccountancy.streamer.click/contact-us/" class="nav-link ">Contact Us</a></li>
</ul>
JavaScript code used to turn the bootstrap click to open subnavigation into on hover:
<script>
document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {
document.querySelectorAll(".navbar .nav-item").forEach(function(everyitem){
everyitem.addEventListener('mouseover', function(e){
let el_link = this.querySelector('a[data-bs-toggle]');
if(el_link != null){
let nextEl = el_link.nextElementSibling;
el_link.classList.add('show');
nextEl.classList.add('show');
}
});
everyitem.addEventListener('mouseleave', function(e){
let el_link = this.querySelector('a[data-bs-toggle]');
if(el_link != null){
let nextEl = el_link.nextElementSibling;
el_link.classList.remove('show');
nextEl.classList.remove('show');
}
})
});
}
// end if innerWidth
});
// DOMContentLoaded end
</script>
Any ideas would be much appreciated!`