Hover and Menu Link Problem-ish? Topic is solved

[mahaha]

Hi all,
I'm finally messing around with updating our site over to 4.2, our current site is 3.10. I'm adjusting the cassiopeia template rather than using the 3.0 template I built from scratch.

Coding has changed alot in the 5 or 6 years since I built the last site, so I assume this is something dumb I'm missing or that i've done.

I'm having a hard time figuring out why the drop down is only triggered by the triangle on the right and not the whole text link? Same with hover - it's black right now to show the area the hover is taking up which isn't the full area.

The active area is showing correctly, hence I'm dumbfounded.

So I guess my question is what am I missing that the hover state is only a small fraction of the space that is showing in the drop down and main link? My goal is to have a color that fills the menus option area like the active state is showing.

I can post the environment information if needed, just feels like this is something so simple I'm not seeing it. I've gone through the cassiopeia customization files, even the main demo site is showing the drop down link be one with the text.

any ideas or a nudge in the right direction?

http://www.hansondigitalhosting.com/hd4_v2

Oh and how in the heck to I get rid of the active underline in the top level of the menu? that's also causing me to head scratch. I can't find that text-decoration line to save my life.

Thanks in advance - and do let me know if my rambling above isn't making sense, i've been staring at this wayyy to long.

:-)

[sozzled]

See viewtopic.php?f=815&t=999074#p3681548 for more information. I was also a little confused about using dropdown menu items in J! 4.x.

The dropdown submenu items used with Cassiopeia are revealed when you click the downward-pointing triangle. The submenu items are not revealed "automatically" when you hover your mouse over them. This is a deliberate design feature of Cassiopeia. There are other template developers who have implemented expanding/collapsing menus on mouseover.

Yes, J! 4.x is different to J! 3.x.

The underline for the active menu item is also a design feature. Apparently a lot of people preferred having it this way. There are other ways you can style the active menu item by writing your own CSS.

I've gone through the cassiopeia customization files, even the main demo site is showing the drop down link be one with the text.

I'm sorry but I don't know where the main demo site is. Could you tell me, please? It would be nice to see some official-looking demonstration of J! 4.x.

[mahaha]

awesome, thanks so much for the quick reply, I really appreciate it. I'm off to read the link you posted, but here is (I assume) the demo site. As you can see the whole link triggers the drop down:
https://cassiopeia.joomla.com/

Be back in a few...

thanks!

See viewtopic.php?f=815&t=999074#p3681548 for more information. I was also a little confused about using dropdown menu items in J! 4.x.

The dropdown submenu items used with Cassiopeia are revealed when you click the downward-pointing triangle. The submenu items are not revealed "automatically" when you hover your mouse over them. This is a deliberate design feature of Cassiopeia. There are other template developers who have implemented expanding/collapsing menus on mouseover.

Yes, J! 4.x is different to J! 3.x.

The underline for the active menu item is also a design feature. Apparently a lot of people preferred having it this way. There are other ways you can style the active menu item by writing your own CSS.

I've gone through the cassiopeia customization files, even the main demo site is showing the drop down link be one with the text.

I'm sorry but I don't know where the main demo site is. Could you tell me, please? It would be nice to see some official-looking demonstration of J! 4.x.

[mahaha]

I read through the link, i've already done pretty much all of that it seems. The menu is published in the menu position (not sure what that does matter as soon I'll have several other menus linked like we do in our j3 site), the only css I've been messing with is in the user.css, i already have collapsible drop down selected, the module is indeed a menu module...

thanks for the link though... the search continues.

See viewtopic.php?f=815&t=999074#p3681548 for more information. I was also a little confused about using dropdown menu items in J! 4.x.

The dropdown submenu items used with Cassiopeia are revealed when you click the downward-pointing triangle. The submenu items are not revealed "automatically" when you hover your mouse over them. This is a deliberate design feature of Cassiopeia. There are other template developers who have implemented expanding/collapsing menus on mouseover.

Yes, J! 4.x is different to J! 3.x.

The underline for the active menu item is also a design feature. Apparently a lot of people preferred having it this way. There are other ways you can style the active menu item by writing your own CSS.

I've gone through the cassiopeia customization files, even the main demo site is showing the drop down link be one with the text.

I'm sorry but I don't know where the main demo site is. Could you tell me, please? It would be nice to see some official-looking demonstration of J! 4.x.

[sozzled]

Thanks for showing me the demo site. That's interesting, isn't it? Clicking either the text or the downward pointing arrow displays the submenu.

But there's a reason for that, too. The menu item text is a menu heading. In your case, you need to define "Services", "Ordering" and "Portfolio" with the Menu Type = Menu Heading.

I did something similar a few moments ago with my own "demo" site.

[mahaha]

one thing I do notice is in the demo site the code on the "Sample Layouts" link for the drop down, I notice is a button class, whereas on my example I have a regular href tag. Not even sure what controls that aspect. I also notice on that sample layouts link, in the drop down, the "Articles" link is set up how mine is. A link for articles and the triangle is a button class and that is the only thing that triggers the drop down.

any ideas?

[mahaha]

Perfect, that heading setting (I didn't know about) did just what you said, I'll style that in a moment. What about the hover size though, why isn't it the same size as the area, or rather do you know how to change that area?

thanks again, progress!

Oh and in doing the heading, the Services link is now showing the button class...

Thanks for showing me the demo site. That's interesting, isn't it? Clicking either the text or the downward pointing arrow displays the submenu.

But there's a reason for that, too. The menu item text is a menu heading. In your case, you need to define "Services", "Ordering" and "Portfolio" with the Menu Type = Menu Heading.

I did something similar a few moments ago with my own "demo" site.

[sozzled]

Try this CSS

Code: Select all

ul.mod-menu li button {
  font-size: 1em !important;
}

[mahaha]

Thanks for the effort, but it didn't do anything up there.

I'm thinking it has to do with what ever is controlling the line hover effect perhaps. Now the line goes all the way since I switched over to headings...

I'm hanging up my mouse for the night, but if you have any other, or anyone else for that matter, I'll check back in tomorrow morning.

thanks again!

Try this CSS

Code: Select all

ul.mod-menu li button {
  font-size: 1em !important;
}

[Pavel-ww]

Perfect, that heading setting (I didn't know about) did just what you said, I'll style that in a moment. What about the hover size though, why isn't it the same size as the area, or rather do you know how to change that area?

Hi. Try this

Code: Select all

.metismenu.mod-menu .mm-collapse > li > a {
	width: 100%;
}

1.jpg

or

Code: Select all

.metismenu.mod-menu .mm-collapse > li {
	padding: 0;
}
.metismenu.mod-menu .mm-collapse > li > a {
	width: 100%;
	padding: 5px 10px;
}

2.jpg

[mahaha]

hallelujah! the second one worked perfectly, thank you soooo much!

Just to piggy back my question, 2 other small things.

Any idea how to remove the line?

And the last thing is I can't figure out what's pushing the drop down over about 5 or 10 px? I'd like it lined up with the menu above.

At least those are my next two issues I'm starting to look at.

thanks again though for the code, I super appreciate it.

Cheers!

Perfect, that heading setting (I didn't know about) did just what you said, I'll style that in a moment. What about the hover size though, why isn't it the same size as the area, or rather do you know how to change that area?

Hi. Try this

Code: Select all

.metismenu.mod-menu .mm-collapse > li > a {
	width: 100%;
}

1.jpg

or

Code: Select all

.metismenu.mod-menu .mm-collapse > li {
	padding: 0;
}
.metismenu.mod-menu .mm-collapse > li > a {
	width: 100%;
	padding: 5px 10px;
}

2.jpg

[mahaha]

ok, I actually figured everything out with the exception of the hover and active line problem.

If anyone has any pointers on that, would love to hear.

thanks again!
Mark

[Pavel-ww]

ok, I actually figured everything out with the exception of the hover and active line problem.

If anyone has any pointers on that, would love to hear.

thanks again!
Mark

Hi. Here is

Code: Select all

.container-header .metismenu > li > button::before {
	display: none;
}

[zema2023]

ok, I actually figured everything out with the exception of the hover and active line problem.

If anyone has any pointers on that, would love to hear.

thanks again!
Mark

Hi,

I am not sure if I understood you correctly, but if when you say "hover" you mean to show a drop-down menu when you hover your mouse over, then here is the code I am using on my site:

Code: Select all

/* Hide sub-menu by default */
.mod-menu .metismenu.mod-menu .mm-collapse {
  display: none;
}

/* Show sub-menu on hover */
.mod-menu .metismenu-item:hover .mm-collapse {
  display: block;
}

Thanks.

[umbrellax2]

I'm trying to get rid of the underlines in the nav bar on Cassiopeia, too, but your solution doesn't fix it. Any other ideas?

kbordev.umbrellahost.net

Thanks!

[Pavel-ww]

Any other ideas?

kbordev.umbrellahost.net

Hi. On the site, the link to which you gave, there are no problems. Any other (detailed) description?

[Alphamatt]

I have been having the same problem since a week now and I finally got it done today.
I used the google chrome inspector after none of the suggestions here worked.

I find this code with the inspector:
.container-header .metismenu>li.active>a:after, .container-header .metismenu>li.active>button:before, .container-header .metismenu>li>a:hover:after, .container-header .metismenu>li>button:hover:before {
background: #ffffff;
opacity: 1;
}

I removed the:
background: #ffffff;
opacity: 1;

Then I added a display: none; to it and got rid of the line under the menu in cassiopeia template.
So, simply as it sound, this code below did the trick and I hop it works for you too.

.container-header .metismenu>li.active>a:after, .container-header .metismenu>li.active>button:before, .container-header .metismenu>li>a:hover:after, .container-header .metismenu>li>button:hover:before {

display:none;
}

Take a look at: www.afromusicfriends.com and the link under the menus are gone

[mattsson]

Thank you so much to zema2023 for posting his CSS code for user.css, to show a drop-down menu when you hover your mouse over a corresponding main menu item! I'd been trying the code in an older forum post, this one: viewtopic.php?t=988214 and it was having no effect in my Joomla 4.3.3 website.