Hover and Menu Link Problem-ish? Topic is solved

[zema2023]

Good day all,

I am new to Joomla and not very experienced with coding. I would like to customize the menu of the default Joomla 4 template to include smoother dropdown menus. Instead of requiring a mouse hover for each dropdown, I would like to be able to click on one dropdown menu and see the rest of the dropdowns using a mouse hover. Additionally, I would like to add dividers and reduce the size of the dropdown menu box. Could someone please help me with this?

Thank you.

[Pavel-ww]

Good day all,

I am new to Joomla and not very experienced with coding. I would like to customize the menu of the default Joomla 4 template to include smoother dropdown menus. Instead of requiring a mouse hover for each dropdown, I would like to be able to click on one dropdown menu and see the rest of the dropdowns using a mouse hover. Additionally, I would like to add dividers and reduce the size of the dropdown menu box. Could someone please help me with this?

Thank you.

Hi. This will require significant coding on base of menu module with Default layout. If you are not very experienced in this, just use some kind of framework-template. For example, Helix Ultimate - there it is from the box.

[zema2023]

Good day all,

I am new to Joomla and not very experienced with coding. I would like to customize the menu of the default Joomla 4 template to include smoother dropdown menus. Instead of requiring a mouse hover for each dropdown, I would like to be able to click on one dropdown menu and see the rest of the dropdowns using a mouse hover. Additionally, I would like to add dividers and reduce the size of the dropdown menu box. Could someone please help me with this?

Thank you.

Hi. This will require significant coding on base of menu module with Default layout. If you are not very experienced in this, just use some kind of framework-template. For example, Helix Ultimate - there it is from the box.

Hi,

Thanks a lot for your quick response and recommendation.

Thanks

[zema2023]

Good day all,

I am new to Joomla and not very experienced with coding. I would like to customize the menu of the default Joomla 4 template to include smoother dropdown menus. Instead of requiring a mouse hover for each dropdown, I would like to be able to click on one dropdown menu and see the rest of the dropdowns using a mouse hover. Additionally, I would like to add dividers and reduce the size of the dropdown menu box. Could someone please help me with this?

Thank you.

Hi. This will require significant coding on base of menu module with Default layout. If you are not very experienced in this, just use some kind of framework-template. For example, Helix Ultimate - there it is from the box.

Hi,

Thanks a lot for your quick response and recommendation.

Thanks

Hi again,

I came across the code below that I am testing in my user.css file to control mouse hover dropdown menu, but somehow, the separator on the menu does not change color with mouse hover. I wonder what I am missing?

Code: Select all

/* Hover Drop Down Menu */
.mod-menu {
  background-color: inherit;
}

.mod-menu a {
  float: left;
  font-size: 16px;
  color: inherit;
  text-align: left;
  padding: 0px 8px;
  text-decoration: none;
}

.mod-menu a:hover, .dropdown:hover {
  background-color: red !important;
  color: white;
}

[Pavel-ww]

... but somehow, the separator on the menu does not change color with mouse hover. I wonder what I am missing?

Hi. In your CSS is not a code for the separator. The separator is not <a> tag, but usually it is <span> tag. Learn the code using your browser Dev Tools to make sure.

[zema2023]

... but somehow, the separator on the menu does not change color with mouse hover. I wonder what I am missing?

Hi. In your CSS is not a code for the separator. The separator is not <a> tag, but usually it is <span> tag. Learn the code using your browser Dev Tools to make sure.

Hi,
Yes, I tried that already.
The following was what I got on Dev Tools when I clicked over the separator:

Code: Select all

<button class="mod-menu__heading nav-header mm-collapsed mm-toggler mm-toggler-nolink" aria-haspopup="true" aria-expanded="false"><span class="p-2 fa fa-calculator" aria-hidden="true"></span>Calculators</button>

So I tried applying the code below, but there was no change:

Code: Select all

.mod-menu__heading:hover, .nav-header:hover, .mm-collapsed:hover, .mm-toggler:hover, .mm-toggler-nolink:hover {
  background-color: red;
  color: white;
}

For as long it is a separator, the color does not change when hovering over it. But when I switch it to a link, then the color changes. And my problem is that I don't want to switch it to a link when it supposed to be a separator.

Something I am doing wrong.

[zema2023]

... but somehow, the separator on the menu does not change color with mouse hover. I wonder what I am missing?

Hi. In your CSS is not a code for the separator. The separator is not <a> tag, but usually it is <span> tag. Learn the code using your browser Dev Tools to make sure.

Hi,
Yes, I tried that already.
The following was what I got on Dev Tools when I clicked over the separator:

Code: Select all

<button class="mod-menu__heading nav-header mm-collapsed mm-toggler mm-toggler-nolink" aria-haspopup="true" aria-expanded="false"><span class="p-2 fa fa-calculator" aria-hidden="true"></span>Calculators</button>

So I tried applying the code below, but there was no change:

Code: Select all

.mod-menu__heading:hover, .nav-header:hover, .mm-collapsed:hover, .mm-toggler:hover, .mm-toggler-nolink:hover {
  background-color: red;
  color: white;
}

For as long it is a separator, the color does not change when hovering over it. But when I switch it to a link, then the color changes. And my problem is that I don't want to switch it to a link when it supposed to be a separator.

Something I am doing wrong.

Hello there,
I finally got it right.
I only had to use the item in question to fix the problem.

Here is the code I used:

Code: Select all

.metismenu-item:hover {
  background-color: red;
  color: white;
}

Thanks a lot.