I have this code:
<ul>
<li>
<a href="#">
<i></i>
Additional Pages
<i></i>
</a>
<ul>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
</ul>
</li>
</ul>
I want the dropdown to open at load of the page. I really am not a guru in this. But I want to put style="menu-open". That way it will be opened when page load.
Secondly, I can not click on "Additional Page" to open the drop down. I need to click on the "bi bi-chevron-down" icon to get the drop down to open. Why can't I click on "Additional Pages".
I am hoping someone here can help me know how to fix two things:
When someone clicks on "Additional Page", the menu will open/close".
How can i get the dropdown automatically opened when the page is loaded?
Thank you in advance for your help.
I have this code:
<ul>
<li>
<a href="#">
<i></i>
Additional Pages
<i></i>
</a>
<ul>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
</ul>
</li>
</ul>
I want the dropdown to open at load of the page. I really am not a guru in this. But I want to put style="menu-open". That way it will be opened when page load.
Secondly, I can not click on "Additional Page" to open the drop down. I need to click on the "bi bi-chevron-down" icon to get the drop down to open. Why can't I click on "Additional Pages".
I am hoping someone here can help me know how to fix two things:
When someone clicks on "Additional Page", the menu will open/close".
How can i get the dropdown automatically opened when the page is loaded?
Thank you in advance for your help.
Share Improve this question asked Apr 1 at 18:08 user30133860user30133860 1 New contributor user30133860 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 1- 1 There is not a single class anywhere in the code you have shown, so how exactly is this a "bootstrap menu"? Please provide a proper minimal reproducible example, when asking this kind of question. – C3roe Commented Apr 2 at 7:12
1 Answer
Reset to default 0Keep the Menu Open on Page Load
To keep the menu open when the page loads, you need to:
Add the
showclass to the dropdown menu.Add the
aria-expanded="true"attribute to the dropdown toggle.
Click on "Additional Pages" to Toggle Menu
By default, Bootstrap dropdowns require clicking the chevron-down icon to open. If you want the entire "Additional Pages" text to be clickable, you need to:
Make sure the
data-bs-toggle="collapse"attribute is on the<a>tag.Target the corresponding dropdown menu.
Check bellow code for bootstrap5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Always Open Menu</title>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Ensure the menu is visible */
.menu-open {
display: block !important;
}
</style>
</head>
<body>
<div class="container mt-3">
<ul class="list-unstyled">
<li>
<!-- Clickable Additional Pages -->
<a href="#" class="d-flex justify-content-between align-items-center text-decoration-none"
data-bs-toggle="collapse" data-bs-target="#submenu" aria-expanded="true">
<span>Additional Pages</span>
<i class="bi bi-chevron-down"></i>
</a>
<!-- Submenu -->
<ul id="submenu" class="collapse show menu-open list-unstyled ms-3">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>