My current challenge involves customizing a navigation bar using CSS. I am struggling with making the sub-menus expand to 100% width as they currently appear fixed in size. Additionally, I am trying to find a solution to display the submenu options on either side of the dropdown menu when there is limited space to show all the content. Currently, all submenu options appear on the right-hand side regardless of available space.
https://i.sstatic.net/IbgjM.png
I have experimented with adding various position and display properties within the CSS code.
Here is the Navbar code:
<!-- Top menu -->
<nav class="navbar sticky-top" role="navigation">
// Code for the navbar goes here
</nav>
CSS Code:
// CSS styles for the navigation bar go here
If you want to view the test page live, visit: for Flight Stats menu.
Main objectives: 1. Ensure that submenu items expand to 100% width. 2. Implement a solution for displaying submenus on the left side if there's insufficient space on the right.