I can’t make the SVG button reactive on click to expand the initially hidden menu, obviously in the mobile version

Two things:

  • You should change the div you are using to wrap the svg to a button. You want it to be a button because it will automatically get all the accessibility functionality a button provides.
  • The dev tools inspector is not showing that you have set an event handler on it, so it isn’t expanding because you aren’t telling it to when someone clicks on it.

Your script file looks to be empty (looking at the Sources tab in the dev tools).

the css to do flex-direction: row on <li> to get the drop down menu

I’m not sure what you mean?

You have an empty hover selector, do you want to do it on hover?

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

I would like to know how to make the dropdown expandable, what should I use bootstrap data-target or other … where can I study them?