Cassiopeia Template Hover Menu

janbabjan · Post by **janbabjan** » Mon Aug 30, 2021 1:15 pm

Hi,
I'm trying to set up a Cassiopeia template so that the dropdown menu responds to a mouseover ([ redacted ]). I would also like to expand menu after mouseover the name of the menu (not only down/up arrow).
Thanks

wavetheme · Post by **wavetheme** » Thu Sep 02, 2021 8:13 am

Hi janbabjan,

Follow some bellow steps to show sub-menu.
- Step 1. Create a file with named custom.css in the css folder.
- Step 2. Add bellow code to the index.php file.

Code: Select all

<head>
	<jdoc:include type="metas" />
	<jdoc:include type="styles" />
	<jdoc:include type="scripts" />
	<link rel="stylesheet" href="<?php echo JURI::root(); ?>/templates/cassiopeia/css/custom.css">
</head>

- Step 3. Add bellow css code to the custom.css file.

Code: Select all

.header .mod-menu > li {
  position: relative;
}

.header .mod-menu li:hover > ul {
  background-color: #fff;
  border: 1px solid #dfe3e7;  
  border-radius: 5px;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  padding: 16px;
}

.header .mod-menu li:hover > ul li {
  display: block;
}

- Step 4: Reload your website to view all changes.

Best regards,

Pavel-ww · Post by **Pavel-ww** » Thu Sep 02, 2021 9:58 am

wavetheme wrote: ↑Thu Sep 02, 2021 8:13 am Hi janbabjan,

Follow some bellow steps to show sub-menu.
- Step 1. Create a file with named custom.css in the css folder.
- Step 2. Add bellow code to the index.php file.

Hi.
Why do it? You just need create a file named user.css. It's all. Editing index.php is not required. This file is already included there out of the box.

wavetheme · Post by **wavetheme** » Fri Sep 03, 2021 2:13 am

@Pavel-ww,
I tested and it worked fine. Thank you very much.

@janbabjan,
Please create the user.css file after that add all css rules to the user.css file (you don't need to edit any code in index.php file).

mundra1 · Post by **mundra1** » Sat Sep 04, 2021 6:23 am

Pavel-ww wrote: ↑Thu Sep 02, 2021 9:58 am
wavetheme wrote: ↑Thu Sep 02, 2021 8:13 am Hi janbabjan,

Follow some bellow steps to show sub-menu.
- Step 1. Create a file with named custom.css in the css folder.
- Step 2. Add bellow code to the index.php file.

Hi.
Why do it? You just need create a file named user.css. It's all. Editing index.php is not required. This file is already included there out of the box.

Thanks. Its working fine with desktop but not perfectly on mobile. Please suggest the changes.

Pavel-ww · Post by **Pavel-ww** » Sat Sep 04, 2021 7:22 am

mundra1 wrote: ↑Sat Sep 04, 2021 6:23 am Thanks. Its working fine with desktop but not perfectly on mobile. Please suggest the changes.

Hi. You quoted the wrong person. I did not offer any solutions for this. My opinion - the click behavior should not be changed to mouseover behavior. Since this contradicts the norms of accessibility

mundra1 · Post by **mundra1** » Sat Sep 04, 2021 1:36 pm

Pavel-ww wrote: ↑Sat Sep 04, 2021 7:22 am
mundra1 wrote: ↑Sat Sep 04, 2021 6:23 am Thanks. Its working fine with desktop but not perfectly on mobile. Please suggest the changes.
Hi. You quoted the wrong person. I did not offer any solutions for this. My opinion - the click behavior should not be changed to mouseover behavior. Since this contradicts the norms of accessibility

Thanks a lot

The Joomla! Forum™

Cassiopeia Template Hover Menu

Cassiopeia Template Hover Menu

Re: Cassiopeia Template Hover Menu

Re: Cassiopeia Template Hover Menu

Re: Cassiopeia Template Hover Menu

Re: Cassiopeia Template Hover Menu

Re: Cassiopeia Template Hover Menu

Re: Cassiopeia Template Hover Menu