Как сделать навигационную панель Bootstrap 5.2 с раскрывающимся меню «мега-меню»? ⇐ CSS

[Anonymous]

Я пытаюсь создать новую панель навигации для своего бизнес-сайта, но ни в коем случае не могу заставить ее работать так, как мне хочется...
Я хочу иметь раскрывающиеся списки «мега-меню» (при наведении), которые охватывают ВСЮ ширину экрана (БЕЗ меню, выходящего за край экрана).
Я пробовал 3 разных варианта способы здесь:
Ближайший пример того, что мне нужно (отлично работает для настольных компьютеров/ноутбуков, но у него нет функции переключения поддержки мобильных устройств за пределами холста): https://jsfiddle.net/Brnd13/05afgb4p/42/
Еще один пример, который работает (с мобильным переключателем), но выпадающие меню отказываются становиться «мега» (не охватывают всю ширину экрана): https://jsfiddle.net/Brnd13/ky0qtpx2/9/
Еще один пример, когда меню являются мегапиксельными, но выходят за пределы экрана. : https://jsfiddle.net/Brnd13/fyaL50w9/50/
Сегодня я потратил на это около 12 часов и обычно не стал бы задавать здесь вопрос, если только Что-то меня абсолютно разгромило... и на данный момент это меня полностью утомило.
Кто-нибудь может мне помочь с этим?
Спасибо.

Код: Выделить всё

.comp-img img {
max-height: 35px; /* Ensure the image doesn't exceed the height of the navbar */
vertical-align: middle; /* Align the image properly with the navbar items */
}
.comp-img {
float: left;
padding:12px;
}

.navbar {
overflow: hidden;
background-color: #111;
font-family: Arial, Helvetica, sans-serif;
height:60px; /* Set a fixed height for the navbar */
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding:21px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding:21px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: royalblue;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
padding:0;
box-sizing: border-box;
width: 100%;
left: 0;
}

.dropdown-content .header {
background: royalblue;
padding: 16px;
color: white;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown-content a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: black;
white-space: nowrap;
}

.column a {
clear: both;
}

.bAll {
background-color: royalblue !important;
color: white !important;
padding: 8px !important;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.row {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}

.column {
flex: 1;
background-color: #ccc;
padding: 10px;
box-sizing: border-box;
}

.column h3 {
margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}

.column {
width: 100%;
}
}

Код: Выделить всё

[i]      src="https://my-site.co.uk/images/Homepage/menu.png"
alt="Logo"
width="90"
height="35"
/>









[url=#]Home[/url]


Tools & Equipment
[/i]



Tools &  Equipment


Tools
[url=#]Browse All[/url]
[url=#]Screwdrivers[/url]
[url=#]Spudgers[/url]
[url=#]Suction Cups[/url]

Equipment
[url=#]Browse All[/url]
[url=#]Pre-heating Devices[/url]
[url=#]Mounts/Holders[/url]
[url=#]Adhesives[/url]

Adhesives
[url=#]Browse All[/url]
[url=#]iPhone Adhesive Seals[/url]
[url=#]iPad Adhesive Seals[/url]
[url=#]Glues[/url]






Parts & Components
[i][/i]



Parts &  Components


SmartPhones
[url=#]Browse All[/url]
[url=#]Replacement Screens[/url]
[url=#]Batteries[/url]
[url=#]Speaker/Microphone[/url]

Tablets
[url=#]Browse All[/url]
[url=#]Replacement Screens[/url]
[url=#]Batteries[/url]
[url=#]Speaker/Microphone[/url]

Game Consoles
[url=#]Browse All[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]






Accessories
[i][/i]



Accessories


SmartPhones
[url=#]Browse All[/url]
[url=#]Replacement Screens[/url]
[url=#]Batteries[/url]
[url=#]Speaker/Microphone[/url]

Tablets
[url=#]Browse All[/url]
[url=#]Replacement Screens[/url]
[url=#]Batteries[/url]
[url=#]Speaker/Microphone[/url]

Game Consoles
[url=#]Browse All[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]






About Us
[i][/i]



About Us


About
[url=#]About Us[/url]
[url=#]Our Goals[/url]
[url=#]Link 3[/url]

Our Reviews
[url=#]All Reviews[/url]

Blog
[url=#]Disclaimers[/url]
[url=#]Website Updates[/url]
[url=#]Our Work[/url]

Подробнее здесь: https://stackoverflow.com/questions/793 ... -dropdowns