Locking the Menu position to the extreme left of the browser

this is exactly the situation I was trying to explain you since the beginning
you have started to control the sidebar in the template, you must now finish to control it from the template
the menu has been adapted, I mean that you can use CSS to make it reduced to the icons size, or not.

I can not add a toggle button in the menu to control the sidebar. Hope you understand what I mean
The + icons from the menu will open the submenu, but not control the sidebar...
The menu is INSIDE the sidebar, so it can not have any action on the parent sidebar using CSS

here you will need to implement some HTML and may be also Javascript. I can not make a custom development for your website only, because this is what you need now

Next week I will also be unavailable unfortunately.

you shall add a toggler button in your sidebar to manage the reduced/full width of your sidebar. then if the only thing that is missing, is the interaction with the menu to connect to your sidebar script, I can try to help you once again

Thank you Ced,

What I was trying to say is that with the current SIDEBAR-LEFT css code, the sidebar-left automatically expands and contracts based on the content of the Accordeon Menu.

Because of this, if we find a way to expand and contract the Menu, the Sidebar will adapt automatically.

As you will not be available next week, I will try getting some help from the Joomla forum and see if they can provide some other insight and we can have another chat after next week, once you get back.

Thanks again for all your help.

Regards,
Adri

ok I see now
to allow the menu to update its width on click on a parent item, it will need some Javascript.

please try to remove the css rule
this shall allow the menu to expand naturally when you display the submenu. This method could be what you want to do
let me know

Thanks Ced,

Javascript could be one way, but I was hoping that we could simply intercept in css the expansion of any menu to display submenus, to trigger the css code we have added.

For example, when I inspect in the browser a click on a + to expose a submenu, I see the following element being referenced

#accordeonck110 li.parent.open

While if they are not exposed it is simply

#accordeonck110 li.parent

Is there a way to limit the css code you have supplied to only execute when #accordeonck110 li.parent is NOT OPEN ? Something along the lines of

@media (#accordeonck110 li.parent.open:hidden) {
or
@media (#accordeonck110 li.parent.open:false) {
etc.

Please let me know your thoughts.

Thanks,
Adri

ced1870 wrote:

please try to remove the css rule

Code:

#accordeonck110 { width: 60px; }

this shall allow the menu to expand naturally when you display the submenu. This method could be what you want to do
let me know
 

That did it!!! 🙏👍

Thank you so much!!!

I am very happy now, thank you!

Have a great week end,
Adri