Menu link class in Joomla Cassiopeia

Customising the Menu class in Joomla Cassiopeia template

I needed to style the border for my menu in the Cassiopeia template when an item is selected or hovered, as its not a very good contrasting colour by default.

and its actually really easy to do with one CSS statement and a Link Class in the Link Type screen for the menu..

TL:DR: Make your Joomla menus look better with a hover border, easily.

Adding an Icon to a Joomla Menu

• Open the menu item in the Joomla Administrator
  • Add a Link Class field. In my example i used menu__home.
  • Save it.
  • Now add the CSS to style this link class to your template. user.css. This won't get overwritten when you update your template so your changes here will persist.
  • Choose System, Site Templates, then click Cassiopeia Details and Files
  • You are looking for the user.css file in the css folder. If it doesn't exist, you can select the css folder and click 'New File' to create it.
    

    

  • Now add the CSS to provide the underline needed for the menu.
  • Here's the CSS.

    
    a.menu__home:hover,
        li.active a.menu__home {
        border-bottom: 2px solid #f8f9fa;
        }

  • You might need to hard reload your site to see the change. In Chrome, Open the inspector, and then right click the reload button to do this. Other Browsers vary.

Icon on the Joomla front end menu

Here it is on the front end before and after. Much better.

k